Question

我刚刚开始使用Three.js开发游戏开发（https://www.packtpub.com/game-development/game-development-threejs）

我已经建立了一个例子（见下面的代码）。

它应该显示一个城市景观。在Windows 7计算机上使用Chrome（版本43.0.2357.124 m）查看时显示正常。它还可以在Android平板电脑上使用Chrome显示正常（版本43.0.2357.93）。

然而，当我从Chromebook（版本43.0.2357.81（稳定频道））尝试时，我只是得到一个黑色的页面（这是黑色的，如＆＃34; noir＆＃34;不是空白）。< / p>

有人可以建议我如何让Chromebook显示这个城市吗？

第1部分：HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="http://threejs.org/build/three.min.js"></script>
    <script src="city.js"></script>
</body>
</html>

第2部分：JavaScript代码＆＃34; city.js＆＃34;

// GLOBALS ======================================================
var camera, scene, renderer;
// SETUP ========================================================
function animate() {
    draw();
    update();
    requestAnimationFrame( animate );
}

function setup() {
    document.body.style.backgroundColor = '#d7f0f7';
    setupThreeJS();
    setupWorld();
    requestAnimationFrame( animate );
}

function setupThreeJS() {
    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0x9db3b5, 0.002);

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.y = 400;
    camera.position.z = 400;
    camera.rotation.x = -45 * Math.PI / 180;

    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.shadowMapEnabled = true;
    document.body.appendChild( renderer.domElement );
}

function setupWorld() {
    var geo = new THREE.PlaneGeometry(2000, 2000, 40, 40);
    var mat = new THREE.MeshPhongMaterial({color: 0x9db3b5, overdraw: true});
    var floor = new THREE.Mesh(geo, mat);
    floor.rotation.x = -0.5 * Math.PI;
    floor.receiveShadow = true;
    scene.add(floor);
    var geometry = new THREE.CubeGeometry( 1, 1, 1 );
    geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, 0.5, 0 ) );
    var material = new THREE.MeshPhongMaterial({overdraw: true, color: 0xcccccc});

    var cityGeometry = new THREE.Geometry();
    for (var i = 0; i < 300; i++) {
        var building = new THREE.Mesh(geometry.clone());
        building.position.x = Math.floor( Math.random() * 200 - 100 ) * 4;
        building.position.z = Math.floor( Math.random() * 200 - 100 ) * 4;
        building.scale.x  = /**/Math.random()/*Math.pow(Math.random(), 2)/**/ * 50 + 10;
        building.scale.y  = /**/Math.random()/*Math.pow(Math.random(), 3)/**/ * building.scale.x * 8 + 8;
        building.scale.z  = building.scale.x;
        THREE.GeometryUtils.merge(cityGeometry, building);
}
    var city = new THREE.Mesh(cityGeometry, material);
    city.castShadow = true;
    city.receiveShadow = true;
    scene.add(city);

    var light = new THREE.DirectionalLight(0xf9f1c2, 1);
    light.position.set(500, 1500, 1000);
    light.castShadow = true;
    light.shadowMapWidth = 2048;
    light.shadowMapHeight = 2048;
    var d = 1000;
    light.shadowCameraLeft = d;
    light.shadowCameraRight = -d;
    light.shadowCameraTop = d;
    light.shadowCameraBottom = -d;
    light.shadowCameraFar = 2500;
    scene.add(light);
}

// DRAW =========================================================

function draw() {
    renderer.render( scene, camera );
}
// RUN ==========================================================

setup();

Answer 1

@ Crush_157我遇到过类似的问题。我正在使用ShaderLib的着色器。无论如何，在我的情况下，我的场景中有2个DirectionalLight。除了chromeOS之外，所有浏览器/设备都能正常工作。猜猜看，如果我删除其中一个DirectionalLight，我的对象开始显示:)。不确定为什么

Three.js示例无法在Chromebook上正确显示（但在Windows和平板电脑上可以正常显示）

1 个答案: