ПОМЕЩЕНИЕ:три 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
.
Любые идеи о том, что происходит? Спасибо за вашу помощь!