使用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实现动画特效

作者:花花世界

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

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