?Three.js-在场景中导入3D动画模型

2022-12-05 46342

简介： ?Three.js-在场景中导入3D动画模型

+关注继续查看

1、格式

关于3D模型有很多格式

微信截图_20221207172412.png

2、常见的格式

OBJ
FBX
STL
COLLADA
3DS
GLTF

3、GLTF

glTF（gl传输格式）是一种开放格式的规范（open format specification），用于更高效地传输、加载3D内容。该类文件以JSON（.gltf）格式或二进制（.glb）格式提供，外部文件存储贴图（.jpg、.png）和额外的二进制数据（.bin）。一个glTF组件可传输一个或多个场景，包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机。

GL Transmission Format
由Khronos Group团队创造
这几年变得特别流行
支持不同的数据集，像geometries，materials，cameras，lights...
支持多种导出格式像json，binary，embed textures
逐渐成为标准，很多3D软件，3D引擎，3D库都支持该格式。

不应该在任何场景为了使用GLTF格式而使用GLTF格式，比如你需要粒子效果时，没必要使用GLTF。

4、哪里可以找到模型

这里贴出一个仓库，里面有许多模型可供我们学习

glTF-Sample-Models

微信截图_20221207165734.png

5、GLTF Format

一个 GLTF 文件可以包含多个格式.

glTF
glTF-Binary
glTF-Draco
glTF-Embedded

请注意，你的操作系统可能隐藏某些格式，尽量使用编辑器打开。

5.1 GLTF

├── Duck/                     # Duck模型
│   ├── glTF/                  
│   │   ├── Duck.gltf         # JSON格式的文件
│   │   └── Duck0.bin         # 二进制格式的文件
│   │   └── DuckCM.png        # 纹理  
复制代码

默认格式
包含多个文件
Duck.gltf是一个JSON格式的文件，包含了cameras, lights, scenes, materials, objects transformstions, 但是不包含geometries和textures。
Duck0.bin是一个二进制文件，包含geometries(vertices positions, UV coordinates, normals, colors, etc.)
DuckCM.png是纹理

我们加载Duck.gltf时，其他文件会自动加载。

5.2 GLTF-BINARY

├── Duck/                     # Duck模型
│   ├── glTF-Binary/                  
│   │   ├── Duck.glb        # 二进制格式的文件 
复制代码

只有一个文件
包含上面我们讨论的所有数据
二进制格式
通常更轻量
因为只有一个文件所以容易加载
很难改变其中的数据

5.3 GLTF-DRACO

├── Duck/                    # Duck模型
│   ├── glTF-Draco/                  
│   │   ├── 0.bin         
│   │   └── Duck.bin       
│   │   └── Duck.gltf 
│   │   └── DuckCM.png   
复制代码

像gltf格式，但是其中的数据经过Draco算法压缩处理

更轻量

5.4 GLTF-Embedded

├── Duck/                     # Duck模型
│   ├── glTF-Embedded/                  
│   │   ├── Duck.gltf        # 二进制格式的文件 
复制代码

只有一个文件
JSON格式
更重

6、在Three.js中加载模型

6.1 导入GLTFLoader

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
复制代码

6.2 初始化loader

const gltfLoader = new GLTFLoader()
复制代码

6.3 使用loader

gltfLoader.load(
  "/models/Duck/glTF/Duck.gltf",
  (gltf) => {
    console.log("success");
    console.log(gltf);
  },
  () => {
    console.log("progress");
  },
  () => {
    console.log("error");
  }
);
复制代码

6.4 在场景中添加模型

模型在哪？

微信截图_20221207165815.png

这里的Mesh就是我们的模型
我们不需要PerspectiveCamera
camera和duck继承自Object3D
Object3D被缩放（scale）地很小

多种方法将模型添加到场景中

Add the whole scene in our scene
Add the children of the scene to our scene and ignore the PerspectiveCamera
Filter the children before adding to the scene
Add only the Mesh and end up with a duck with wrong scale , position and rotation
Open the file in a 3D software, clean it and export it again

const gltfLoader = new GLTFLoader();
gltfLoader.load(
  "/models/Duck/glTF/Duck.gltf",
  (gltf) => {
    console.log("success");
    scene.add(gltf.scene.children[0]);
  }
);
复制代码

导入其它格式的模型(glTF-Draco不生效)

gltfLoader.load(
  "/models/Duck/glTF-Binary/Duck.glb", // glTF-Binary
gltfLoader.load(
  "/models/Duck/glTF-Embedded/Duck.gltf", // glTF-Embedded
复制代码

添加一个稍微复杂的模型（飞行头盔）

如果以上面的方式导入模型，我们只会得到模型的一部分，我们尝试循环它们，并将它们添加到场景中

for (const child of gltf.scene.children) {
      scene.add(child);
    }
复制代码

由于我们在循环过程中，从场景1中的一部分移动的场景2中，场景1中的模型就会减少，这样就会导致我们的循环出现问题。

尝试使用while

while (gltf.scene.children.length) {
      scene.add(gltf.scene.children[0]);
}
复制代码

使用扩展运算符 ...

const children = [...gltf.scene.children];
    for (const child of children) {
      scene.add(child);
    }
复制代码

更简单的方式就是直接将模型中的scene添加到我们的场景中

scene.add(gltf.scene);
复制代码

6.5 Draco Compression(Draco压缩)

Draco Compression can be usualy helpful.

Draco 压缩这种格式会更轻量
Draco压缩会针对于Buffer 数据
我们可以在其他格式中使用Draco压缩，并非只用GLTF格式的模型
由Google开源的

如何将Draco压缩过后的模型导入到我们的场景中呢？

使用DracoLoader

import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
const dracoLoader = new DRACOLoader();
复制代码

在Web Assembly中使用会更快，Three.js 提供了相应的文件夹在 /node_modules/three/examples/js/libs文件夹下的draco文件夹将该文件夹移动的static文件夹下

dracoLoader.setDecoderPath("/draco/");
复制代码

gltfLoader.setDRACOLoader(dracoLoader);
复制代码

这样我们也可以使用glTF-Loader文件导入模型啦，它更轻量！！

6.6 什么时候使用Draco 压缩格式

不应该什么时候都用，因为还需要加载DRACOLoader类以及Decoder。

如果模型很大，建议使用Draco格式，取决于你加载的模型大小，可以通过网站加载体验选择，做出正确的选择。

6.7 在场景中添加动画模型

gltfLoader.load("/models/Fox/glTF/Fox.gltf",
复制代码

直接导入不做处理，它会很大，我们需要缩放一下

gltfLoader.load("/models/Fox/glTF/Fox.gltf", (gltf) => {
  gltf.scene.scale.set(0.025, 0.025, 0.025);
  scene.add(gltf.scene);
  console.log("success");
});
复制代码

接下来就是处理模型的动画了

我们导入的gltf对象包含了一个animations 属性，它是AnimationClip的实例。

微信截图_20221207165840.png

我们需要创建AnimationMixer，它就像音乐播放器一样，帮助我们播放动画。

const mixer = new THREE.AnimationMixer(gltf.scene);
复制代码

使用clipAction方法将AnimationClips添加到mixer中

const action = mixer.clipAction(gltf.animations[0]);
  action.play()
复制代码

处理完了，为什么还是没有动画呢，最重要的一步还不做，那就是在每一帧中更新mixer。这里出现了作用域的问题，需要处理一下

let mixer = null;
gltfLoader.load("/models/Fox/glTF/Fox.gltf", (gltf) => {
  mixer = new THREE.AnimationMixer(gltf.scene);
  const action = mixer.clipAction(gltf.animations[0]);
  action.play();
  gltf.scene.scale.set(0.025, 0.025, 0.025);
  scene.add(gltf.scene);
  console.log("success");
});
复制代码

const tick = () => {
  const elapsedTime = clock.getElapsedTime();
  const deltaTime = elapsedTime - previousTime;
  previousTime = elapsedTime;
  // Update mixer
  if (mixer) {
    mixer.update(deltaTime);
  }
  // Update controls
  controls.update();
  // Render
  renderer.render(scene, camera);
  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
};
tick();
复制代码