THREE 使用Tween插件实现动画

最新推荐文章于 2024-08-19 16:55:34 发布

话儒者

最新推荐文章于 2024-08-19 16:55:34 发布

阅读量3.2k

点赞数 1

文章标签： three tween 3d动画

本文链接：https://blog.csdn.net/zh2369576532/article/details/88869520

版权

tween动画基础使用步骤

var step ={x:0};
var tween = new TWEEN.Tween(step).to({x:100},1000);//x从0到100，用时1s
tween.easing(TWEEN.Easing.Quadratic.Out);//动画缓动函数
tween.start();//动画开始第一帧
TWEEN.update();//配合requestAnimationFrame使用

THREE导入模型

首页要引入必要文件

<script src="js/three.js"></script>
<script src="js/OBJLoader.js"></script>//针对模型文件导入
<script src="js/MTLLoader.js"></script>//针对材质文件导入

具体代码

var onProgress = function ( xhr ) {//模型导入过程
    if ( xhr.lengthComputable ) {
        var percentComplete = xhr.loaded / xhr.total * 100;
        console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
    }
};
var oncompleteCallback = function (object) {//模型导入完成后引用
    object.traverse(function(child) {//导入文件中多段模型
        if (child instanceof THREE.Mesh) {
            mesh = child;
        }
    });
    object.children[0].geometry.computeBoundingBox();//模型放到中心1
    object.children[0].geometry.center();//模型放到中心2
    object.position.y =- 100;//模型操作
    object.rotation.y =- Math.PI*0.88;//模型操作
    scene.add( object );
    animate();
};
var onError = function () { };
new THREE.MTLLoader()//主体1，材质
    .setPath( 'model/' )
    .load( 'test.mtl', function ( materials ) {
        materials.preload();
        new THREE.OBJLoader()//主体2，模型（也可单独使用）
            .setMaterials( materials )
            .setPath( 'model/' )
            .load( 'deertest.obj', function ( object ) {
                oncompleteCallback(object);
            }, onProgress, onError );
    } );

three与tween配合使用

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;padding: 0;
    }
    body{
        background-color: #000;
    }
</style>
<body>
    <div id="bloc"></div>
</body>
<script src="js/three.js"></script>
<script src="js/OBJLoader.js"></script>
<script src="js/MTLLoader.js"></script>

<script src="js/tween.min.js"></script>
<script>
    var camera,scene,renderer;
    renderer = new THREE.WebGLRenderer({
        antialias:true,
        alpha:true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.shadowMap.enabled = true;
    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();

    //摄像机
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 200000 );
    camera.position.z = 1600;
    camera.position.y = 300;


    //灯光
    var ambientlight = new THREE.AmbientLight(0xffffff,0.1);
    scene.add(ambientlight);

    var pointlight = new THREE.SpotLight(0xffffff,0.8);
    pointlight.position.z = 3000;
    pointlight.position.x = -12000;
    pointlight.position.y = 12000;
    scene.add(pointlight);


    var step ={ry:0,z:0,y:0,x:0};
    var step1 ={ry:0.4,z:-300,y:-250,x:0};//第一段动画坐标点
    var step2 ={ry:0.88,z:-1000,y:100,x:150};//第二段动画坐标点
    var tween = new TWEEN.Tween(step).to(step1,1000);//第一段动画
    var tween2 = new TWEEN.Tween(step).to(step2,2000);//第二段动画
    tween.easing(TWEEN.Easing.Quadratic.Out);
    tween2.easing(TWEEN.Easing.Cubic.InOut);
    tween.chain(tween2);//第一段动画后进行第二端动画
    tween.start();//动画开始第一帧

    var onProgress = function ( xhr ) {
        if ( xhr.lengthComputable ) {
            var percentComplete = xhr.loaded / xhr.total * 100;
            console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
        }
    };
    var oncompleteCallback = function (object) {
        object.traverse(function(child) {//导入文件中多段模型
            if (child instanceof THREE.Mesh) {
                mesh = child;
            }
        });
        object.children[0].geometry.computeBoundingBox();//模型放到中心1
        object.children[0].geometry.center();//模型放到中心2
        object.position.y =- 100;//模型操作
        object.rotation.y =- Math.PI*0.88;//模型操作
        scene.add( object );
        animate();
    };
    var onError = function () { };
    new THREE.MTLLoader()
        .setPath( 'model/' )
        .load( 'test.mtl', function ( materials ) {
            materials.preload();
            new THREE.OBJLoader()
                .setMaterials( materials )
                .setPath( 'model/' )
                .load( 'deertest.obj', function ( object ) {
                    oncompleteCallback(object);
                }, onProgress, onError );
        } );

    function animate() {
        requestAnimationFrame( animate );
        render();
    }

    function render() {
        TWEEN.update();//动画一帧帧更新配合requestAnimationFrame
        mesh.rotation.y = step.ry;
        mesh.position.z = step.z;
        mesh.position.y = step.y;
        mesh.position.x = step.x;

        camera.lookAt( scene.position );
        renderer.render( scene, camera );

    }

</script>
</html>

效果
在这里插入图片描述