trois js changer l'image d'arrière-plan sur la fonction appel

Question

HYPOTHÈSE:

Je suis en train de créer une scène statique qui a un fond d'image fixe et une géométrie devant elle. Depuis la scène est statique, je n'ai pas besoin et envMap.

J'ai créé deux scènes et des caméras (une pour l'arrière-plan et une pour les géométries) comme le suggère this SO question et this demo et mis à jour la procédure de considérer que THREE.ImageUtils.loadTexture() is deprecated. Voici le code de travail:

// 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); 

Les variables backgroundScene et backgroundCamera sont globales et la procédure suivante est appelée dans la fonction init(). Toutes les scènes et les caméras sont ensuite rendus à l'aide:

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

PROBLÈME:

Je mis en place un écouteur d'événement qui est censé changer l'image d'arrière-plan et de la géométrie quand un bouton est pressé, mais cela ne fonctionne pas . Je pensais que charger la nouvelle texture et changer la propriété matérielle de la variable backgroundScene, effacer le renderer et restituer la scène ferait l'affaire. Voici le code:

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); 

Le console.debug() me montrer que la nouvelle texture est effectivement chargée et le matériel backgroundScene est modifiée en conséquence.

Cependant, alors que les géométries sont rendues très bien, il me reste un fond blanc et l'erreur suivante: [.Offscreen-For-WebGL-0x364ad7e56700]RENDER WARNING: there is no texture bound to the unit 0.

Des idées de ce qui se passe? Merci de votre aide!

Answer 1

vous devrez appeler object.material.needsUpdate = true; pour que la modification prenne effet (voir here). Lorsque la propriété map est modifiée, trois.js doit ré-établir la liaison de texture, qui est ignorée à moins que l'indicateur needsUpdate ne soit défini. Alternativement, si vous changez simplement la propriété material.map.image, cela devrait fonctionner sans cette étape supplémentaire.