three.js渲染带动画的glb文件（内附源码，保姆级）

 今日份的下午格外的懒惰，本来不想写辣么长长的一串文字了和解释说明的，

但是发文助手提醒我篇幅较短，曝光比较少，该说不说，这有点过分了。

那就一步步来吧哎

最底下附带了案例源文件

1.准备好three.js中用到的各种文件的各种文件

然后让我们开始吧，可恶哇！！！

就想偷个懒

   import * as THREE from './js/three.module.js'
    import { OrbitControls } from './js/OrbitControls.js'
    import { GLTFLoader } from './js/GLTFLoader.js'
    import { RoomEnvironment } from './js/RoomEnvironment.js'
    import { MeshoptDecoder } from './js/meshopt_decoder.module.js'
    import { DRACOLoader } from './js/DRACOLoader.js'

    let scene, camera, renderer, control, clock, mixer

2.初始化场景

   function init() {
      clock = new THREE.Clock()
      // 场景，相机
      scene = new THREE.Scene()
      scene.background = new THREE.Color(0xbbbbbb)
      camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        2000
      )
      camera.position.set(20, 100, 170)

      // 渲染器
      renderer = new THREE.WebGLRenderer()
      renderer.setSize(window.innerWidth, window.innerHeight)
      document.body.appendChild(renderer.domElement)

      // 地表格
      const grid = new THREE.GridHelper(500, 100, 0xffffff, 0xffffff)
      grid.material.opacity = 0.5
      grid.material.depthWrite = false
      grid.material.transparent = true
      scene.add(grid)

      // 材质
      const environment = new RoomEnvironment()
      const pmremGenerator = new THREE.PMREMGenerator(renderer)
      scene.environment = pmremGenerator.fromScene(environment).texture

      //   灯光
      scene.add(new THREE.AmbientLight(0x444444))

      const light = new THREE.DirectionalLight(0xffffff)
      light.position.set(0, 20, 20)

      light.castShadow = true
      light.shadow.camera.top = 10
      light.shadow.camera.bottom = -10
      light.shadow.camera.left = -10
      light.shadow.camera.right = 10

      //告诉平行光需要开启阴影投射
      light.castShadow = true
      scene.add(light)

      // 控制器
      control = new OrbitControls(camera, renderer.domElement)

      const axesHelper = new THREE.AxesHelper(14)
      scene.add(axesHelper)
      loader()
      animate()
    }

3. 加载带动画的glb文件

 function loader() {
      const loader = new GLTFLoader()
        .setPath('./model/')
        .setDRACOLoader(new DRACOLoader().setDecoderPath('js/gltf/'))

      loader.load('bbb.glb', function (gltf) {
        gltf.scene.scale.set(80, 80, 80)
        mixer = new THREE.AnimationMixer(gltf.scene)
        mixer.clipAction(gltf.animations[0]).play()
        scene.add(gltf.scene)
      })
    }

 4.animate和render函数

   function animate() {
      requestAnimationFrame(animate)
      if (mixer) mixer.update(clock.getDelta())
      control.update() // required if damping enabled
      render()
    }

    function render() {
      renderer.render(scene, camera)
    }

5.调用写好的函数

init()
animate()

 6.所有代码，底下有源代码文件

我的glb文件在电脑是没办法正常打开的，会报错，但是可以正常渲染

源代码：https://pan.baidu.com/s/19HFQ8LpiamB5qmWIGDjzgA?pwd=b8mm 
密码：b8mm

右键index.html 在liveserve上打开即可

渲染普通的glb文件Three.js 渲染glb，gltf模型（保姆级教程）_小周不会前端呀的博客-CSDN博客_gltf 渲染