three 导入gltf 动画实现对于r138版本_data-engine="three.js r136-CSDN博客

本文链接：https://blog.csdn.net/weixin_45121138/article/details/123663917

这个博客展示了如何使用Three.js库加载和播放3D模型（gltf格式）的动画。通过初始化相机、渲染器、场景和灯光，结合 OrbitControls 控件，实现了对3D场景的交互。博客中加载了一个名为'fly.gltf'的模型，并通过AnimationMixer进行动画播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>animation</title>
  <!-- <script type="importmap">
    {
      "imports": {
        "three": "../three/three.js"
        "loader":"../three/loader.js"
        "DRACOLoader": "../three/DRACOLoader.js"
      }
    }
  </script> -->
  <script src="../three/three.js"></script>
  <!--  -->
  <script src="../three/controll.js"></script>
  <script src="../three/loader.js"></script>
  <script src="../three/DRACOLoader.js"></script>
  <style>
    body{ 
      width: 100%;
      height: 100%;
      margin: 0;
    }
    canvas{
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body onload="init()">
  <!-- <div id="contains"></div> -->
  <!-- <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script> -->
  
  <script>
    // import * as THREE from 'three';
    // import { DRACOLoader } from 'DRACOLoader';
    // import { GLTFLoader } from 'loader';
    // const contains =document.querySelector("#contains")
    var camera,renderer,scene,light,mesh,material,geometry,plane,mixer;
    var mixers = [];
    clock = new THREE.Clock();
    function initControl() {
      control = new THREE.OrbitControls(camera, renderer.domElement);
    }
    function initCamera(){
      camera=new THREE.PerspectiveCamera(45,window.innerWidth/innerHeight,1,1000)
      camera.position.set(0,100,200)
      camera.lookAt(new THREE.Vector3(0, 0, 0));
    }
    function initRenderer(){
      renderer=new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth,window.innerHeight)
      document.body.appendChild(renderer.domElement)
    }
    function initScene(){
      scene =new THREE.Scene()
    }
    function initlight(){  
      light =new THREE.DirectionalLight('white',0.1)//平行光 颜色和强度
      light.position.set(20,50,50)
      // light.intensity=
      light.distance=10
      scene.add(light)
      scene.add(new THREE.AmbientLight('white'))//环境光   
    }
    function initMesh(){
      var planeGeometry = new THREE.PlaneGeometry(100, 100);
      var planeMaterial = new THREE.MeshNormalMaterial();
      plane = new THREE.Mesh(planeGeometry, planeMaterial);
      plane.rotation.x = -0.5 * Math.PI;
      plane.position.y = -5;
      plane.receiveShadow = true; //可以接收阴影
      scene.add(plane);
      // const dracoLoader = new DRACOLoader();
			// dracoLoader.setDecoderPath( '../three/gltf/' );   
      var loader = new THREE.GLTFLoader()
      // loader.setDRACOLoader( dracoLoader );
      loader.load("../3d/fly.gltf",function(gltf){
        // var axesHelper = new THREE.AxesHelper( 5 );
        // scene.add( axesHelper );
        const model = gltf.scene;
				model.position.set( 1, 1, 0 );
				// model.scale.set( 0.5,0.5,0.5);
				scene.add( model );
        mixer = new THREE.AnimationMixer( model );
				mixer.clipAction( gltf.animations[ 0 ] ).play();
        //出错
        // gltf.scene.castShadow = true;
        // mixer = new THREE.AnimationMixer(gltf.scene); 
        // console.log(gltf.animations[0]);
        // for (var i=0;i<gltf.scene.animations.length;i++){
        //       mixer.clipAction(gltf.scene.animations[i]).play();
        //   }
      })
    }
    function animation(){
      control.update();
      requestAnimationFrame( animation );
        var time = clock.getDelta();
        if (mixer) {
            mixer.update(time);
        }
        renderer.render( scene, camera );
      // plane.position.x+=0.01
    }
    function init(){
      initCamera()
      initRenderer()
      initScene()
      initMesh()
      initlight()
      initControl()
      animation()
    }
  </script>
</body>
</html>