2017-02-03 13 views
1

ПОМЕЩЕНИЕ:три JS изменить фоновое изображение на вызов функции

Я пытаюсь создать статическую сцену, которая имеет фиксированное фоновое изображение и геометрию перед ним. Поскольку сцена статична, мне не нужны и envMap.

Я создал две сцены и камеры (один для фона и один для геометрии), как предлагается в this SO question, и this demo, и обновил процедуру, чтобы рассмотреть, что THREE.ImageUtils.loadTexture() is deprecated. Вот рабочий код:

// load the background texture 
var loader = new THREE.TextureLoader(); 
texture = loader.load('path_to_image.jpg'); 
var backgroundMesh = new THREE.Mesh(
    new THREE.PlaneGeometry(2, 2, 0), 
    new THREE.MeshBasicMaterial({ 
     map: texture 
    }) 
); 
backgroundMesh.material.depthTest = false; 
backgroundMesh.material.depthWrite = false; 

// create your background scene 
backgroundScene = new THREE.Scene(); 
backgroundCamera = new THREE.Camera(); 
backgroundScene.add(backgroundCamera); 
backgroundScene.add(backgroundMesh); 

Переменные backgroundScene и backgroundCamera являются глобальными и следующая процедура называется внутри функции init(). Все сцены и камеры позже визуализируются с использованием:

renderer.autoClear = false; 
renderer.clear(); 
renderer.render(backgroundScene , backgroundCamera); 
renderer.render(scene, camera); 

ПРОБЛЕМА:

Я реализовал слушатель событий, который должен изменить фоновое изображение и геометрию при нажатии кнопки, однако это не работает ,

Я думал, что загрузка новой текстуры и изменение свойства материала переменной backgroundScene, очистка renderer и рендеринг сцены снова сделают эту работу. Вот код:

var loader = new THREE.TextureLoader(); 
var texture = loader.load('path_to_new_image.jpg'); 
console.debug(texture); 
console.debug(backgroundScene.children[1].material.map); 
backgroundScene.children[1].material.map = texture; 
console.debug(backgroundScene.children[1].material.map); 

renderer.clear(); 
renderer.render(backgroundScene , backgroundCamera); 
renderer.render(scene, camera); 

console.debug() показать мне, что новая текстура фактически загружена и backgroundScene материала изменяется соответствующим образом.

Однако, хотя геометрия визуализируется отлично, я оставляю пустой фон и получаю следующую ошибку: [.Offscreen-For-WebGL-0x364ad7e56700]RENDER WARNING: there is no texture bound to the unit 0.

Любые идеи о том, что происходит? Спасибо за вашу помощь!

ответ

1

Вам необходимо позвонить по телефону: object.material.needsUpdate = true;, если изменение вступает в силу (см. here). Когда значение свойства map изменяется, three.js необходимо переустановить привязку текстуры, которая пропускается, если не установлен флаг needsUpdate.

В качестве альтернативы, если вы просто изменили material.map.image -property, он должен работать без этого дополнительного шага.