Question

的前提：

我试图创建一个静态场景，它具有固定的图像背景和前面的几何体。由于场景是静态的，我不需要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。

关于发生了什么的任何想法？谢谢你的帮助！

Answer 1

您需要致电object.material.needsUpdate = true;才能使更改生效（请参阅here）。当材质的map - 属性发生变化时，three.js需要重新设置纹理绑定，除非设置needsUpdate - 标志，否则将跳过该纹理绑定。

或者，如果您只是更改material.map.image - 属性，它应该无需额外步骤即可。

三个js在函数调用上更改背景图像

1 个答案: