【Three.js基础学习】17.imported-models

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

课程回顾：

如何在three.js 中引入不同的模型？

1. 格式（不同的格式）

https://en.wikipedia.org/wiki/List_of_file_formats#3D_graphics // 请用外网打开

如果想要加载一个模型，必须根据不同的标准选择格式

OBJ FBX STL PLY 3DS GLTF

COLLADA

1.GLTF (使用这个) 会得到PBR材料，是基于物理的渲染材料，转化成网格标准材质

https://github.com/KhronosGroup/glTF-Sample-Models

// 将所需要的模型放到静态文件中，这取决与你要用什么

例如：static/models/Duck

这里有四个文件对应格式 gltf ,gltf-binary（二进制）,gltf-draco和gltf-embedded(嵌入式)

我们要知道怎么用，这些格式各有特点，取决于我们的需求，可以利用对方的特点和优势

2.如何在3D使用?

使用加载器，实时上我们之前使用了加载器，如：纹理加载器，字体加载器等

import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js

gltfLoader.load()

将模型添加到场景中

scene.add(gltf.scene)

3.Draco压缩

Draco 比默认版本更加轻

压缩应用于缓冲数据，通常是几何体

Website: https://google.github.io/draco/

Git repository: https://github.com/google/draco

必须在GLTF之前实例化它

为什么更快？

draco压缩会将一部分js代码放到CPU上执行使用WebAssembly和工人。

相当于两个线程一起工作

setDecoderPath

4.将DracoLoader实例给予glTFLoader加载器

setDRACOLoader

5. 什么时候使用draco版本

首先要DRACOLoader.js这个类，其次在静态中把draco文件copy上去(解码器)

文件更大时候，更适合使用，这样压缩版本使用文件更小，节约

6.冻结

若是一个巨大的几何体，使用WebAssembly和工人时候，会加载好几秒，也就是冻结

7.animations

如何处理动画

要播放动画需要动画混合器

new THREE.AnimationMixer()

8.three.js3D编辑器

搜索three.js.edito，点击第一个或者

https://threejs.org/editor/

在这个微型在线模型编辑器中，可以将模型文件拖到这里快速查看模板是否符合自己需要

Duck.glb

一、代码

javascript">import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
import * as dat from 'lil-gui'/*** Base*/
// Debug
const gui = new dat.GUI()// Canvas
const canvas = document.querySelector('canvas.webgl')// Scene
const scene = new THREE.Scene()/* Models
*/
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/')  // 要将models中的文件放到静态文件中 (注意要将数据放到models下)const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)let mixer = nullgltfLoader.load(// '/models/Duck/glTF/Duck.gltf', // 2.// '/models/FlightHelmet/glTF/FlightHelmet.gltf', // 会遇到将模型放到场景中，显示不全 1. 2.// '/models/Duck/glTF-Draco/Duck.gltf',  // draco 压缩 版本 2.'/models/Fox/glTF/Fox.gltf',  // 实现动画 会动的狐狸(gltf)=>{console.log(gltf)// 这里注意若使用 for of 会造成循环混乱// 1.初级使用， 让我们知道gltf 加载了什么，怎么加载// 所以可以使用white 或者拓展运算符// const children = [...gltf.scene.children]// for(const child of children){//     scene.add(child)// }// 2.当然上面是为了理解，也可以一行代码搞定// scene.add(gltf.scene)// 3.实现狐狸动画mixer = new THREE.AnimationMixer(gltf.scene) // 动画混合器const action = mixer.clipAction(gltf.animations[2]) // 动画剪辑器 clipAction  animations[0] 通过控制台可以看到狐狸关键帧数据，抬腿，摇头等等，action.play() // 开始 同时需要在更新时间时候 更新关键帧gltf.scene.scale.set(0.025,0.025,0.025)scene.add(gltf.scene)},()=>{console.log('progress')},()=>{console.log('error')}
)/*** Floor*/
const floor = new THREE.Mesh(new THREE.PlaneGeometry(10, 10),new THREE.MeshStandardMaterial({color: '#444444',metalness: 0,roughness: 0.5})
)
floor.receiveShadow = true
floor.rotation.x = - Math.PI * 0.5
scene.add(floor)/*** Lights*/
const ambientLight = new THREE.AmbientLight(0xffffff, 0.8)
scene.add(ambientLight)const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6)
directionalLight.castShadow = true
directionalLight.shadow.mapSize.set(1024, 1024)
directionalLight.shadow.camera.far = 15
directionalLight.shadow.camera.left = - 7
directionalLight.shadow.camera.top = 7
directionalLight.shadow.camera.right = 7
directionalLight.shadow.camera.bottom = - 7
directionalLight.position.set(5, 5, 5)
scene.add(directionalLight)/*** Sizes*/
const sizes = {width: window.innerWidth,height: window.innerHeight
}window.addEventListener('resize', () =>
{// Update sizessizes.width = window.innerWidthsizes.height = window.innerHeight// Update cameracamera.aspect = sizes.width / sizes.heightcamera.updateProjectionMatrix()// Update rendererrenderer.setSize(sizes.width, sizes.height)renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})/*** Camera*/
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.set(2, 2, 2)
scene.add(camera)// Controls
const controls = new OrbitControls(camera, canvas)
controls.target.set(0, 0.75, 0)
controls.enableDamping = true/*** Renderer*/
const renderer = new THREE.WebGLRenderer({canvas: canvas
})
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))/*** Animate*/
const clock = new THREE.Clock()
let previousTime = 0const tick = () =>
{const elapsedTime = clock.getElapsedTime()const deltaTime = elapsedTime - previousTimepreviousTime = elapsedTime// Updata mixerif(mixer != null){mixer.update(deltaTime)}// Update controlscontrols.update()// Renderrenderer.render(scene, camera)// Call tick again on the next framewindow.requestAnimationFrame(tick)
}tick()

二、知识点

1.格式以及引用模型

OBJ FBX STL PLY 3DS GLTF

COLLADA

有不同的格式这里使用GLTF

GLTF

对应格式 gltf ,gltf-binary（二进制）,gltf-draco和gltf-embedded(嵌入式)

如何使用

import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js

gltfLoader.load()

将模型添加到场景中

scene.add(gltf.scene)

2.Draco压缩

如何使用

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'

const dracoLoader = new DRACOLoader()

dracoLoader.setDecoderPath('/draco/') // 要将models中的文件放到静态文件中 (注意要将数据放到models下)

3.动画

new THREE.AnimationMixer() 动画混合器

clipAction 动画剪辑器

play 更新关键帧同时要配合更新的时间使用

4.效果

1.鸭子关键代码 ,没有用到draco压缩

javascript">// modelsconst gltfLoader = new GLTFLoader()gltfLoader.load('/models/Duck/glTF/Duck.gltf', // 2.(gltf)=>{console.log(gltf)//    const children = [...gltf.scene.children]//     for(const child of children){//         scene.add(child)//     }scene.add(gltf.scene)}
)

2.人像

javascript">const gltfLoader = new GLTFLoader()
// gltfLoader.setDRACOLoader(dracoLoader)let mixer = nullgltfLoader.load(// '/models/Duck/glTF/Duck.gltf', // 2.'/models/FlightHelmet/glTF/FlightHelmet.gltf', // 会遇到将模型放到场景中，显示不全 1. 2.(gltf)=>{console.log(gltf)//    const children = [...gltf.scene.children]for(const child of gltf.scene.children){scene.add(child)}}
)

会看到加载进去的不完整

javascript">const gltfLoader = new GLTFLoader()
// gltfLoader.setDRACOLoader(dracoLoader)gltfLoader.load(// '/models/Duck/glTF/Duck.gltf', // 2.'/models/FlightHelmet/glTF/FlightHelmet.gltf', // 会遇到将模型放到场景中，显示不全 1. 2.(gltf)=>{console.log(gltf)const children = [...gltf.scene.children]for(const child of children){scene.add(child)}// scene.add(gltf.scene) //两种方式都可以}
)

3.draco压缩使用鸭子

javascript">const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/') const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)// let mixer = nullgltfLoader.load('/models/Duck/glTF-Draco/Duck.gltf',  // draco 压缩 版本 2., // 会遇到将模型放到场景中，显示不全 1. 2.(gltf)=>{console.log(gltf)//    const children = [...gltf.scene.children]// for(const child of children){//     scene.add(child)// }scene.add(gltf.scene)}
)

4.狐狸

javascript">
// models
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/') const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)let mixer = nullgltfLoader.load(// '/models/Duck/glTF/Duck.gltf', // 2.
//    '/models/FlightHelmet/glTF/FlightHelmet.gltf', // 会遇到将模型放到场景中，显示不全 1. 2.
'/models/Fox/glTF/Fox.gltf',  // 实现动画 会动的狐狸(gltf)=>{console.log(gltf)mixer = new THREE.AnimationMixer(gltf.scene) // 动画混合器const action = mixer.clipAction(gltf.animations[2]) // 动画剪辑器 clipAction  animations[0] 通过控制台可以看到狐狸关键帧数据，抬腿，摇头等等，action.play() // 开始 同时需要在更新时间时候 更新关键帧gltf.scene.scale.set(0.025,0.025,0.025)scene.add(gltf.scene)}
)

注意更新时间

javascript">const tick = () =>
{const elapsedTime = clock.getElapsedTime()const deltaTime = elapsedTime - previousTimepreviousTime = elapsedTime// Updata mixerif(mixer != null){mixer.update(deltaTime)}// Update controlscontrols.update()// Renderrenderer.render(scene, camera)// Call tick again on the next framewindow.requestAnimationFrame(tick)
}