学习Three.js——动画(Animation)

最新推荐文章于 2024-08-08 07:28:22 发布

yyyzhhhhh

最新推荐文章于 2024-08-08 07:28:22 发布

阅读量3.1k

点赞数 1

分类专栏： Three.js

本文链接：https://blog.csdn.net/a13602955218/article/details/85222986

版权

这篇博客深入探讨了Three.js中的动画技术，包括Tween动画的使用，通过MorphAnimMesh和morphTargetInfluence实现的变形动画，以及如何创建复杂的骨骼动画。对于骨骼动画，文章介绍了如何利用SkinnedMesh和自定义动作，以及加载外部模型来实现动画播放。

摘要由CSDN通过智能技术生成

Tween

用法：

var tween = new TWEEN.Tween({
   x:10}).to({
   x:3},10000).easing(TWEEN.Easing.Elastic.InOut).OnUpdate(function(){
   
    
})

Tween(…).to(…,time)是从一个状态变化到另一个状态，time是变化需要的时间(毫秒)

easing是变化的方式，OnUpdate是变化过程的需要更新的一些变化

		var posSrc = {
   pos: 1};//初始状态
        var tween = new TWEEN.Tween(posSrc).to({
   pos: 0}, 5000);
        tween.easing(TWEEN.Easing.Sinusoidal.InOut);

        var tweenBack = new TWEEN.Tween(posSrc).to({
   pos: 1}, 5000);
        tweenBack.easing(TWEEN.Easing.Sinusoidal.InOut);

        tween.chain(tweenBack);//将两个tween连接在一起
        tweenBack.chain(tween);


        var onUpdate = function () {
   
            var count = 0;
            var pos = this.pos;

            loadedGeometry.vertices.forEach(function (e) {
   
                var newY = ((e.y + 3.22544) * pos) - 3.22544;
                pointCloud.geometry.vertices[count++].set(e.x, newY, e.z);
            });

            pointCloud.sortParticles = true;
        };

        tween.onUpdate(onUpdate);
        tweenBack.onUpdate(onUpdate);