网格Three.js上两种材质之间的动画

时间:2017-08-18 16:38:21

标签: three.js gsap

我正在尝试将Meshes材质随时间更改为其他材质(最好使用Greensock Animation Platform)。有没有办法使用非着色材料?

伪代码:

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

2 个答案:

答案 0 :(得分:1)

您希望在不编写自定义ShaderMaterial的情况下从一种材料补间到另一种材料。

这是实现这种效果的一种方法。但它需要重复你的网格。

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

请务必致电

TWEEN.update();

在动画循环中。

three.js r.87

答案 1 :(得分:0)

您可以使用emissiveMap存储新图片并最初将color保留为0x000000

然后,您可以运行两个补间。

首先将漫反射map颜色从{r:1, g:1, b:1}补间到{r:0, g:0, b:0}

用于将发光颜色从{r:0, g:0, b:0}更改为{r:1, g:1, b:1}

的其他补间