Three.js пример не отображается правильно на Chromebook (но хорошо на Windows, и таблетки)

Я построил пример (см ниже код).

Предполагается показать городской пейзаж. Это отображается очень хорошо при просмотре с помощью Chrome (версия 43.0.2357.124 м) на компьютере под управлением Windows 7. Он также отлично отображает Chrome на планшете Android (версия 43.0.2357.93).

Однако, когда я пытаюсь использовать его на Chromebook (версия 43.0.2357.81 (стабильный канал)), я просто получаю черную страницу (а черную, как в «noir», не пустую).

Может ли кто-нибудь предложить, как я могу получить 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. Функция update(), вызываемая в animate, больше не существует (doh!). 2. Моя книга устарела - следовало использовать BoxGeometry и PlaneBuffer, и ... THREE.GeometryUtils.merge (cityGeometry, building); ... должен был быть заменен на ... building.updateMatrix(); cityGeometry.merge (building.geometry, building.matrix) ОК, поэтому, исправив, что консоль на ПК не показывает ошибок (только сообщение журнала THREE.WebGLRenderer 71). –

Однако на ChromeBook я просматриваю один и тот же URL-адрес в каждом случае, а html и js находятся на другом компьютере. Я получаю следующие ошибки: Three.WebGLShader: Shader не удалось скомпилировать Three.WebGLProgram: ошибка шейдера: 0 gl.VALIDATE_STATUS false gl.getPRogramInfoLog недействительными шейдерами –

@ Crush_157 Я сталкивался с подобной проблемой. Я использую шейдеры ShaderLib. В любом случае, в моем случае у меня есть 2 DirectionalLight на моей сцене. Все работает отлично в большинстве браузеров/устройств, за исключением chromeOS. И угадайте, что, если я удалю один из DirectionalLight, мои объекты начнут появляться :). Не знаете, почему

источник

2015-07-16 06:37:18

Полезно знать - спасибо –

Three.js пример не отображается правильно на Chromebook (но хорошо на Windows, и таблетки)

ответ

Смежные вопросы