three.js所示例不Chromebook上正常顯示（但確定在Windows和平板）

我剛開始這本書遊戲開發與three.js所（https://www.packtpub.com/game-development/game-development-threejs）three.js所示例不Chromebook上正常顯示（但確定在Windows和平板）

我已經建立了一個例子（見下面的代碼）。

它應該顯示一個城市景觀。在Windows 7計算機上使用Chrome（版本43.0.2357.124 m）進行查看時，顯示效果很好。在Android平板電腦（版本43.0.2357.93）上使用Chrome也很好。但是，當我從Chromebook（版本43.0.2357.81（穩定通道））嘗試它時，我只是得到一個黑色頁面（而且這是黑色的，因爲「黑色」不是空白）。

任何人都可以提出如何讓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代碼「city.js」

// 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();

來源

2015-06-22 Crush_157

沒有控制檯告訴任何事情？ – Atrahasis

好點先生！ 1.在animate中調用的update（）函數不再存在（doh！）。 2.我的書已過時 - 本應使用BoxGeometry和PlaneBuffer，並且... THREE.GeometryUtils.merge（cityGeometry，building）; ...應該被替換爲... building.updateMatrix（）; cityGeometry.merge（building.geometry，building.matrix） OK，所以已經糾正了PC上的控制檯沒有顯示錯誤（只是日誌消息THREE.WebGLRenderer 71）。 –

然而，在ChromeBook上（爲了清楚我在每種情況下瀏覽到相同的URL，並且html＆js位於不同的機器上），我收到以下錯誤： Three.WebGLShader：Shader無法編譯 Three.WebGLProgram：着色器錯誤：0 gl.VALIDATE_STATUS錯誤gl.getPRogramInfoLog無效着色器 –

@ Crush_157我都面臨着類似的問題。我使用ShaderLib的着色器。無論如何，就我而言，我的場景中有2個DirectionalLight。除了chromeOS之外，大多數瀏覽器/設備都可以正常工作。並猜測是什麼，如果我刪除一個DirectionalLight，我的對象開始顯示:)。不知道爲什麼

來源

2015-07-16 06:37:18

很高興知道 - 謝謝 –

three.js所示例不Chromebook上正常顯示（但確定在Windows和平板）

回答

相關問題