Animiere zwischen zwei Materialien auf einem Mesh Three.js

Question

Ich versuche, ein Meshes-Material im Laufe der Zeit zu einem anderen Material zu ändern (vorzugsweise mit Greensock Animation Platform). Gibt es eine Möglichkeit, dies mit Nicht-Shader-Materialien zu tun?

Pseudocode:

TweenMax.to(mesh.material.map, 1, {image:newTexture}); 

Answer 1

Sie von einem Material zum anderen tweenen wollen, ohne eine eigene ShaderMaterial zu schreiben.

Hier ist eine Möglichkeit, diesen Effekt zu erreichen. Es erfordert jedoch das Duplizieren Ihres Meshes.

var mesh = new THREE.Mesh(geometry, material1); // transparent false 
scene.add(mesh); 

var mesh2 = new THREE.Mesh(geometry, material2); // transparent true, opacity 0 
scene.add(mesh2); 

//mesh2.onBeforeRender = function (renderer) { renderer.clearDepth(); }; // optional 

var tween = new TWEEN.Tween(mesh2.material) 
    .to({ opacity: 1 }, 1500) 
    .delay(1500) 
    .start(); 

Seien Sie sicher,

TWEEN.update(); 

in Ihrer Animation Schleife zu nennen.

three.js r.87

Answer 2

Sie emissiveMap neues Bild speichern können und seine color zu 0x000000 zunächst zu halten.

Sie können dann zwei Tweens ausführen.

zuerst die diffuse map Farbe von {r:1, g:1, b:1} zu {r:0, g:0, b:0}

und die anderen Tween zum Ändern Emissionsfarbe von {r:0, g:0, b:0} zu {r:1, g:1, b:1}