三个js在函数调用上改变背景图片答案

【问题标题】：three js change background image on function call三个js在函数调用上改变背景图片
【发布时间】：2017-06-21 06:24:42
【问题描述】：

前提：

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

对正在发生的事情有任何想法吗？感谢您的帮助！

【问题讨论】：

标签： javascript three.js textures rendering

【解决方案1】：

您需要致电object.material.needsUpdate = true; 以使更改生效（请参阅here）。当材质的map-property改变时，three.js需要重新设置texture-binding，除非设置了needsUpdate-flag，否则跳过。

或者，如果您只是更改 material.map.image-property，它应该可以在没有额外步骤的情况下工作。

【讨论】：