three.js - 在网格 Three.js 上的两种 Material 之间设置动画

标签 three.js gsap

随着时间的推移,我试图将网格 Material 更改为另一种 Material (最好使用 Greensock 动画平台)。有没有办法使用非着色器 Material 来做到这一点?

伪代码:

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

最佳答案

您想在不编写自定义的情况下从一种 Material 补间到另一种 Material 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();

在你的动画循环中。

三.js r.87

关于three.js - 在网格 Three.js 上的两种 Material 之间设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45761324/

相关文章:

html - span 元素上的 GreenSock 动画

javascript - 如何为使用 GSAP TweenMax 创建一个 super 简单的 AngularJS 指令?

javascript - 当手机处于横向模式时,Raycaster 不工作

javascript - Three.js 中的类型错误 : DAT is undefined when using DAT. gui()

javascript - 如何加快绿袜时间表?

javascript - GSAP scaleX 在时间线中出现无序

javascript - 如何从投影矩阵中提取相机参数

three.js - RenderTarget 作为新纹理仅返回黑白纹理

javascript - 从 r68 开始,在 THREE.js 上 getDescendants() 的正确方法

javascript - 使用 jQuery 反转 CSS 动画