首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在网格Three.js上的两个材质之间设置动画

在网格Three.js上的两个材质之间设置动画
EN

Stack Overflow用户
提问于 2017-08-19 00:38:21
回答 2查看 1.8K关注 0票数 3

我正在尝试随着时间的推移将网格材质更改为另一种材质(最好使用Greensock动画平台)。有没有办法使用非着色器材质来实现这一点?

伪代码:

代码语言:javascript
运行
复制
TweenMax.to(mesh.material.map, 1, {image:newTexture});
EN

回答 2

Stack Overflow用户

发布于 2017-08-19 04:17:27

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

以下是实现该效果的一种方法。不过,它需要复制网格。

代码语言:javascript
运行
复制
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();

一定要打电话给我

代码语言:javascript
运行
复制
TWEEN.update();

在动画循环中。

three.js r.87

票数 3
EN

Stack Overflow用户

发布于 2017-12-19 02:02:32

您可以使用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}

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/45761324

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档