drei js ändern auf Funktionsaufruf Hintergrundbild

Question

PREMISE:

Ich versuche, eine statische Szene zu schaffen, die einen festen Bildhintergrund und eine Geometrie vor ihm hat. Da die Szene statisch ist, brauche ich nicht und envMap.

Ich habe zwei Szenen und Kameras (eine für den Hintergrund und eine für die Geometrien) wie in this SO question und this demo vorgeschlagen erstellt und die Prozedur aktualisiert, um diese THREE.ImageUtils.loadTexture() is deprecated zu berücksichtigen. Hier ist der Arbeitscode:

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

Die Variablen backgroundScene und backgroundCamera sind global und das folgende Verfahren in der init() Funktion aufgerufen. Alle Szenen und Kameras verwenden später gemacht:

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

PROBLEM:

ich einen Ereignis-Listener implementiert, sollte das Hintergrundbild und die Geometrie ändern, wenn eine Taste gedrückt wird, aber dies funktioniert nicht .

Ich dachte, dass das Laden der neuen Textur und das Ändern der Materialeigenschaft der Variable backgroundScene, das Löschen der renderer und das Rendern der Szene wieder die Aufgabe erledigen würde. Hier ist der 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); 

Die console.debug() mir zeigen, dass die neue Textur tatsächlich geladen wird und das backgroundScene Material verändert sich entsprechend.

Während jedoch die Geometrien in Ordnung sind, habe ich einen leeren Hintergrund und bekomme den folgenden Fehler: [.Offscreen-For-WebGL-0x364ad7e56700]RENDER WARNING: there is no texture bound to the unit 0.

Irgendwelche Ideen, was vor sich geht? Danke für Ihre Hilfe!

Answer 1

müssen Sie object.material.needsUpdate = true; aufrufen, damit die Änderung wirksam wird (siehe here). Wenn die Eigenschaft map des Materials geändert wird, muss three.js die Texturbindung neu einrichten, die übersprungen wird, sofern nicht das Flag needsUpdate gesetzt ist.

Alternativ, wenn Sie nur die material.map.image -Eigenschaft ändern, sollte es ohne diesen zusätzlichen Schritt funktionieren.