three.js学习笔记MorphAnimMesh

最新推荐文章于 2024-01-06 20:13:30 发布

渣渣前端

最新推荐文章于 2024-01-06 20:13:30 发布

阅读量394

点赞数

分类专栏： three.js 文章标签： three.js

本文链接：https://blog.csdn.net/dtbk123/article/details/104324267

版权

three.js 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

three,js提供了创建动画的网格MorphAnimMesh，有了它模型就可以动起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{margin:auto;
            overflow: hidden;
        }
    </style>
</head>
<script src='../libs/three.js'></script>
<script src="../libs/dat.gui.js"></script>
<body>
    <div id='webgl'></div>
    <script>
        function init(){
            var clock=new THREE.Clock()

            var renderer=new THREE.WebGLRenderer();
            var scene=new THREE.Scene();
            var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
            renderer.setSize(window.innerWidth,window.innerHeight);
            renderer.setClearColor(new THREE.Color(0xffffff));

            camera.position.set(350,300,400);
            camera.lookAt(scene.position)

            var soptlight=new THREE.SpotLight(0xff0000);
            soptlight.position.set(300,300,200);
            scene.add(soptlight)

            var mesh;
            var frame=[];
            var meshAnim;

           var loader=new THREE.JSONLoader()
            //加载模型
           loader.load('../assets/models/horse.js',(gemo)=>{
               //设置morphTargets为true模型才能动
               var mat1=new THREE.MeshLambertMaterial({morphTargets:true,vertexColors:THREE.FaceColors});
               //var mat2=new THREE.MeshLambertMaterial({color:0xffffff,vertexColors:THREE.FaceColors})

            //mesh=new THREE.Mesh(gemo,mat1);
            //mesh.position.x=-100;
            //frame.push(mesh);
            //current=mesh;
            morphColorsToFaceColor(gemo)

            gemo.computeVertexNormals();
            gemo.computeFaceNormals();
            gemo.computeMorphNormals();

            meshAnim=new THREE.MorphAnimMesh(gemo,mat1);
            meshAnim.duration = 1000;//设置播放结束时间
            meshAnim.position.x = 200;
            meshAnim.position.z = 0;

            scene.add(meshAnim);
           },'../assets/models')


           function morphColorsToFaceColor(gemo){
                if(gemo.morphColors&&gemo.morphColors.length){
                    var colorMap=gemo.morphColors[0];
                    for(var i=0;i<colorMap.colors.length;i++){
                        gemo.faces[i].color = colorMap.colors[i];
                        gemo.faces[i].color.offsetHSL(0, 0.3, 0);
                    }
                }
           }
            
            function render(){
                var delta=clock.getDelta();
                //renderer.clear();
                if(meshAnim){
                    meshAnim.updateAnimation(delta*1000)
                }
                renderer.render(scene,camera)
                requestAnimationFrame(render);
            }

           render()

            renderer.render(scene,camera);

            document.getElementById('webgl').appendChild(renderer.domElement)

        }

        window.onload=init;

    </script>
</body>
</html>

渣渣前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js学习笔记MorphAnimMesh

three,js提供了创建动画的网格MorphAnimMesh，有了它模型就可以动起来<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...
复制链接

扫一扫