使用ThreeJS Animation实现动画特效(加载人物模型)2018-09-05 12:17:49

( 还没有投票,继续加油! )
分享:
31.3K
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Knight</title>
    <style>body{background:#fff;margin:0;padding:0;overflow:hidden;}</style>
    <script src="js/three.min.js"></script>
  </head>
  <body>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;
                                                                      
      var scene = new THREE.Scene();
                                                                      
      var camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
      //camera.position.z = 1000;
      camera.position.set(0, 0, 1000);
      //camera.up.z = 1;
      camera.lookAt({x:0,y:0,z:0});
      //scene.add(camera);
                                                                      
      var geometry = new THREE.PlaneBufferGeometry(500, 500, 1, 1);  //Palne是在x/y轴上绘制的(所有不用旋转90度即可看到)
      var material = new THREE.MeshPhongMaterial({emissive:0xbbbbbb});  //MeshPhongMaterial冯氏材质,即类玻璃的镜面材质;emissive:0xbbbbbb,即反射#bbbbbb颜色的光
                                                                      
      var ground = new THREE.Mesh(new THREE.PlaneBufferGeometry(500, 500, 1, 1), new THREE.MeshBasicMaterial({color:0xbbbbbb,side:THREE.DoubleSide}));
      //var ground = new THREE.Mesh(geometry, material);
      ground.position.set(0, 0, 0);
      //ground.rotation.x = -Math.PI/2;
      this.scene.add(ground);
                                                                      
      var ambientLight = new THREE.AmbientLight(0x222222);
      scene.add(ambientLight);
                                                                      
      var drLight = new THREE.DirectionalLight(0xeeeeee);
      drLight.position.set(100, 100, 100);
      scene.add(drLight);
                                                                      
      var renderer = new THREE.WebGLRenderer({antialias:true});
      renderer.setSize(width, height);
      renderer.setClearColor(0xffffff, 1.0);
      document.body.appendChild(renderer.domElement);
                                                                      
      var delta = 0;
      function render(){
        delta>Math.PI*2 ? delta=0 : delta+=Math.PI/180;
        //camera.lookAt({x:0,y:0,z:0});
        ground.rotation.x = delta;
        renderer.render(scene, camera);
                                                                        
        requestAnimationFrame(render);
      }
      render();
    </script>
  </body>
</html>

//画出来地面后加载人物模


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Knight</title>
    <style>body{background:#fff;margin:0;padding:0;overflow:hidden;}</style>
    <script src="js/three.min.js"></script>
  </head>
  <body>
    <script>
    var scene,camera,renderer;
    var mesh,ground;
    var width = window.innerWidth;
    var height = window.innerHeight;
                                        
    function init(){
      scene = new THREE.Scene();
                                          
      camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
      camera.position.set(0, 0, 1000);
      camera.lookAt({x:0, y:0, z:0});
      scene.add(camera);
                                          
      var geometry = new THREE.PlaneBufferGeometry(500, 500, 1, 1);  //Palne是在x/y轴上绘制的(所有不用旋转90度即可看到)
      var material = new THREE.MeshPhongMaterial({emissive:0xbbbbbb});  //MeshPhongMaterial冯氏材质,即类玻璃的镜面材质;emissive:0xbbbbbb,即反射#bbbbbb颜色的光
      //var material = new THREE.MeshBasicMaterial({color:0xbbbbbb, side:THREE.DoubleSide});
                                          
      ground = new THREE.Mesh(geometry, material);
      ground.position.set(0, 0, 0);
      ground.rotation.x = -Math.PI/2;
      scene.add(ground);
                                          
      var loader = new THREE.JSONLoader();
      loader.load( "models/skinned/knight.js", function ( geometry, materials ) {
        var mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial( materials ) ); //蒙皮网格模型
        mesh.position.set( 0, 0, 0 );
        mesh.scale.set( 30, 30, 30 );
        scene.add( mesh );
      });
                                          
      var ambientLight = new THREE.AmbientLight(0x222222);
      scene.add(ambientLight);
                                          
      var drLight = new THREE.DirectionalLight(0xeeeeee);
      drLight.position.set(100, 100, 100);
      scene.add(drLight);
                                          
      renderer = new THREE.WebGLRenderer({antialias:true});
      renderer.setSize(width, height);
      renderer.setClearColor(0xffffff, 1.0);
      document.body.appendChild(renderer.domElement);
    }
    var delta = 0;
    function animate(){
      requestAnimationFrame(animate);
                                          
      delta>Math.PI*2 ? delta=0 : delta+=Math.PI/180;
      ground.rotation.x = delta;
      renderer.render(scene, camera);
    }
                                        
    init();
    animate();
    </script>
  </body>
</html>


//重新设定相机位置,并添加旋转控件,以便从各个方位观察模型

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>MyKnight</title>
    <style>body{background:#fff;margin:0;padding:0;overflow:hidden;}</style>
    <script src="js/three.min.js"></script>
    <script src="js/controls/TrackballControls.js"></script>
  </head>
  <body>
    <script>
    var scene,camera,renderer;
    var mesh,ground;
    var controls;
    var width = window.innerWidth;
    var height = window.innerHeight;
                                
    function init(){
      scene = new THREE.Scene();
                                  
      camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
      camera.position.set(-500, 500, 800);
      camera.lookAt({x:0, y:0, z:0});
      scene.add(camera);
                                  
      var geometry = new THREE.PlaneBufferGeometry(500, 500, 1, 1);  //Palne是在x/y轴上绘制的(所有不用旋转90度即可看到)
      //var material = new THREE.MeshPhongMaterial({emissive:0xbbbbbb}); //MeshPhongMaterial冯氏材质,即类玻璃的镜面材质;emissive:0xbbbbbb,即反射#bbbbbb颜色的光
      var material = new THREE.MeshBasicMaterial({color:0xbbbbbb, side:THREE.DoubleSide});
                                  
      ground = new THREE.Mesh(geometry, material);
      ground.position.set(0, 0, 0);
      ground.rotation.x = -Math.PI/2;
      ground.receiveShadow = true;
      scene.add(ground);
                                  
      var loader = new THREE.JSONLoader();
      loader.load( "models/skinned/knight.js", function ( geometry, materials ) {
        var mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial( materials ) ); //蒙皮网格模型
        mesh.position.set( 0, 0, 0 );
        mesh.scale.set( 30, 30, 30 );
        mesh.castShadow = true;
        scene.add( mesh );
      });
                                  
      var ambientLight = new THREE.AmbientLight(0x222222);
      scene.add(ambientLight);
                                  
      var drLight = new THREE.DirectionalLight(0xeeeeee);
      drLight.position.set(500, 500, 500);
      drLight.castShadow = true;
      scene.add(drLight);
                                  
      renderer = new THREE.WebGLRenderer({antialias:true});
      renderer.setSize(width, height);
      renderer.setClearColor(0xffffff, 1.0);
      renderer.shadowMapEnabled = true;
      document.body.appendChild(renderer.domElement);
                                  
      controls = new THREE.TrackballControls(camera);
      controls.staticMoving = true;
    }
    //var delta = 0;
                                
    function animate(){
      requestAnimationFrame(animate);
                                  
      controls.update();
      //delta>Math.PI*2 ? delta=0 : delta+=Math.PI/180;
      //camera.rotation.y = delta;
      //camera.lookAt(scene.position);
      renderer.render(scene, camera);
    }
                                
    init();
    animate();
    </script>
  </body>
</html>


//使用Animation播放动画模型,并使用THREE.Clock()做计时器

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>MyKnight</title>
    <style>body{background:#fff;margin:0;padding:0;overflow:hidden;}</style>
    <script src="js/three.min.js"></script>
    <script src="js/controls/TrackballControls.js"></script>
  </head>
  <body>
    <script>
    var scene,camera,renderer;
    var mesh,ground;
    var controls;
    var width = window.innerWidth;
    var height = window.innerHeight;
                        
    function init(){
      scene = new THREE.Scene();
                          
      camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
      camera.position.set(-500, 500, 800);
      camera.lookAt({x:0, y:0, z:0});
      scene.add(camera);
                          
      var geometry = new THREE.PlaneBufferGeometry(1000, 1000, 1, 1); //Palne是在x/y轴上绘制的(所有不用旋转90度即可看到)
      //var material = new THREE.MeshPhongMaterial({emissive:0xbbbbbb}); //MeshPhongMaterial冯氏材质,即类玻璃的镜面材质;emissive:0xbbbbbb,即反射#bbbbbb颜色的光
      var material = new THREE.MeshBasicMaterial({color:0xbbbbbb, side:THREE.DoubleSide});
                          
      var loader = new THREE.JSONLoader();
      loader.load( "models/skinned/knight.js", function ( geometry, materials ) {
                            
        for ( var i = 0; i < materials.length; i ++ ) {
          var m = materials[ i ];
          m.skinning = true;   //蒙皮
          m.morphTargets = true; //变形目标
        }
                          
        mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial( materials ) ); //蒙皮网格模型
        //mesh.position.set( 0, 0, 100 );
        mesh.scale.set( 30, 30, 30 );
        mesh.castShadow = true;
        scene.add( mesh );
                            
        var animation = new THREE.Animation( mesh, geometry.animation );
        animation.play();
      });
                          
      ground = new THREE.Mesh(geometry, material);
      ground.position.set(0, 0, 0);
      ground.rotation.x = -Math.PI/2;
      ground.receiveShadow = true;
      scene.add(ground);
                          
      var drLight = new THREE.DirectionalLight(0xeeeeee);
      drLight.position.set(500, 500, 500);
      drLight.castShadow = true;
      scene.add(drLight);
                          
      renderer = new THREE.WebGLRenderer({antialias:true});
      renderer.setSize(width, height);
      renderer.setClearColor(0xffffff, 1.0);
      renderer.shadowMapEnabled = true;
                    
      document.body.appendChild(renderer.domElement);
                          
      controls = new THREE.TrackballControls(camera);
      controls.staticMoving = true;
    }
                        
    var clock = new THREE.Clock();
    function animate(){
      requestAnimationFrame(animate);
                          
      controls.update();
                          
      THREE.AnimationHandler.update( 0.75*clock.getDelta() );   //控制动画速度(AnimationHandler类的update: function ( deltaTimeMS ) {...}方法,参数以ms为单位)
                    
      renderer.render(scene, camera);
    }
                        
    init();
    animate();
    </script>
  </body>
</html>


//three.js版本是r69






头像

snowcoal
  • 游戏
  • html5
  • threejs
  • 特效

本文标签:

游戏html5threejs特效

收藏到我的私密空间

标题:使用ThreeJS Animation实现动画特效(加载人物模型)

作者:花花世界

你暂未登录,请登录后才可收藏至您的私密空间 确认取消
雪炭网

键盘操作 更便捷 -雪炭网雪中送炭-乐趣无限

如果本站的内容有幸帮助到了您,建议您了解一下当页的广告内容哦,我们的进步离不开您的支持,Thank you~