Issue at Hand:
I am currently working on creating a static scene with a fixed image background and some geometries in front of it. Given that the scene is static, I have determined that I do not need an envMap.
To achieve this, I followed the guidance provided in a Stack Overflow question (link) as well as a demo found at this resource. As there were considerations to be made due to the deprecation of THREE.ImageUtils.loadTexture(), I updated my procedure accordingly. Below is the code that now functions properly:
// Loading 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;
// Creating the background scene
backgroundScene = new THREE.Scene();
backgroundCamera = new THREE.Camera();
backgroundScene.add(backgroundCamera);
backgroundScene.add(backgroundMesh);
The variables backgroundScene and backgroundCamera are declared globally and the following process is invoked within the init() function. All scenes and cameras are subsequently rendered using the following:
renderer.autoClear = false;
renderer.clear();
renderer.render(backgroundScene, backgroundCamera);
renderer.render(scene, camera);
Encountered Issue:
My attempted solution involved implementing an event listener to switch the background image and geometry upon clicking a button; however, this functionality is not functioning as intended.
I hypothesized that by loading a new texture, updating the material property of the backgroundScene variable, clearing the renderer, and re-rendering the scene would rectify the issue. The code used is as follows:
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);
Upon using console.debug(), I confirmed that the new texture was loaded successfully, and the material of the backgroundScene had been updated accordingly.
Although the geometries were rendered correctly, the background remained blank, accompanied by the error message:
[.Offscreen-For-WebGL-0x364ad7e56700]RENDER WARNING: there is no texture bound to the unit 0If anyone has any insights into what might be causing this issue, your assistance would be greatly appreciated! Thank you!