three.js渲染带动画的glb文件

news2024/11/20 7:24:10

1. 准备工作

将下列文件在three.js的包中找到，注意的是我这里使用的是模块化版本的，这里不知道模块化的，可以先去看一下es6的模块化。

控制器： OrbitControls.js

加载器：GLTFLoader.js

材质： RoomEnvironment.js

three.js加载压缩模型： DRACOLoader

模型文件：我这里用的是glb

2. 演示开始

1. 在body中新建一个div用来承载three.js创建canvas标签

2. 把准备好的文件引入，注意script标签加上type=module

代码：

<body>
  <div id="WebGL-output"></div>
</body>

<script type="module">
  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 { DRACOLoader } from './js/DRACOLoader.js'
</script>

到这里算是准备工作正式完成！

注意：引用文件中有些事件依赖于three.module.js这个文件夹的，需要去源码当中把路径修改，这里举一个例子：

3.初始化场景，相机，渲染器，控制器，灯光

  function init() {
    clock = new THREE.Clock()
    // 场景，相机
    scene = new THREE.Scene()

    // 添加场景背景
    const loader11 = new THREE.TextureLoader();
    const bgTexture = loader11.load('./model/111.png');
    scene.background = bgTexture;
    // scene.background = new THREE.Color(0xbbbbbb)

    // 透视相机（）
    camera = new THREE.PerspectiveCamera(
      50,
      window.innerWidth / window.innerHeight,
      1,
      2000
    )
    camera.position.set(-230, 100, 300)
    scene.add(camera);

    // 渲染器
    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 = 100
    light.shadow.camera.bottom = -100
    light.shadow.camera.left = -100
    light.shadow.camera.right = 100

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

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

    // 坐标轴
    // const axesHelper = new THREE.AxesHelper(114)
    // scene.add(axesHelper)
    loader()
    animate()
  }

4. 加载带动画的glb文件

// 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)
    })
  }

5.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)
  }

6.函数调用

init()
animate()

所有代码：

<!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>glb文件渲染</title>
</head>

<body>
  <div id="WebGL-output"></div>
</body>

<script type="module">
  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 { DRACOLoader } from './js/DRACOLoader.js'

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

  function init() {
    clock = new THREE.Clock()
    // 场景，相机
    scene = new THREE.Scene()

    // 添加场景背景
    const loader11 = new THREE.TextureLoader();
    const bgTexture = loader11.load('./model/111.png');
    scene.background = bgTexture;
    // scene.background = new THREE.Color(0xbbbbbb)

    // 透视相机（）
    camera = new THREE.PerspectiveCamera(
      50,
      window.innerWidth / window.innerHeight,
      1,
      2000
    )
    camera.position.set(-230, 100, 300)
    scene.add(camera);

    // 渲染器
    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 = 100
    light.shadow.camera.bottom = -100
    light.shadow.camera.left = -100
    light.shadow.camera.right = 100

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

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

    // 坐标轴
    // const axesHelper = new THREE.AxesHelper(114)
    // scene.add(axesHelper)
    loader()
    animate()
  }

  // 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)
    })
  }

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

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

  init()
  animate()
</script>
</html>