课程回顾

https://en.wikipedia.org/wiki/List_of_file_formats#3D_graphics

请用外网打开

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

例如static/models/Duck

,gltf-binary二进制,gltf-draco和gltf-embedded(嵌入式)

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

2.如何在3D使用?

three/examples/jsm/loaders/GLTFLoader.js

gltfLoader.load()

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

Git

https://github.com/google/draco

必须在GLTF之前实例化它

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

setDRACOLoader

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

7.animations

three/examples/jsm/controls/OrbitControls.js

import

three/examples/jsm/loaders/GLTFLoader.js

import

three/examples/jsm/loaders/DRACOLoader.js

import

document.querySelector(canvas.webgl)//

Scene

dracoLoader.setDecoderPath(/draco/)

gltfLoader

gltfLoader.setDRACOLoader(dracoLoader)let

mixer

/models/FlightHelmet/glTF/FlightHelmet.gltf,

会遇到将模型放到场景中显示不全

/models/Duck/glTF-Draco/Duck.gltf,

draco

会动的狐狸(gltf){console.log(gltf)//

这里注意若使用

THREE.AnimationMixer(gltf.scene)

动画混合器const

mixer.clipAction(gltf.animations[2])

动画剪辑器

通过控制台可以看到狐狸关键帧数据抬腿摇头等等action.play()

同时需要在更新时间时候

更新关键帧gltf.scene.scale.set(0.025,0.025,0.025)scene.add(gltf.scene)},(){console.log(progress)},(){console.log(error)}

)/***

THREE.MeshStandardMaterial({color:

#444444,metalness:

THREE.DirectionalLight(0xffffff,

0.6)

directionalLight.shadow.mapSize.set(1024,

1024)

directionalLight.shadow.camera.far

directionalLight.shadow.camera.left

directionalLight.shadow.camera.top

directionalLight.shadow.camera.right

directionalLight.shadow.camera.bottom

directionalLight.position.set(5,

scene.add(directionalLight)/***

Sizes*/

}window.addEventListener(resize,

{//

sizes.heightcamera.updateProjectionMatrix()//

Update

rendererrenderer.setSize(sizes.width,

sizes.height)renderer.setPixelRatio(Math.min(window.devicePixelRatio,

2))

renderer.setPixelRatio(Math.min(window.devicePixelRatio,

2))/***

null){mixer.update(deltaTime)}//

Update

framewindow.requestAnimationFrame(tick)

}tick()

,gltf-binary二进制,gltf-draco和gltf-embedded(嵌入式)

如何使用

three/examples/jsm/loaders/GLTFLoader.js

gltfLoader.load()

three/examples/jsm/loaders/DRACOLoader.js

const

dracoLoader.setDecoderPath(/draco/)

(注意要将数据放到models下)

GLTFLoader()gltfLoader.load(/models/Duck/glTF/Duck.gltf,

const

gltfLoader.setDRACOLoader(dracoLoader)let

mixer

2./models/FlightHelmet/glTF/FlightHelmet.gltf,

会遇到将模型放到场景中显示不全

[...gltf.scene.children]for(const

child

gltf.scene.children){scene.add(child)}}

const

gltfLoader.setDRACOLoader(dracoLoader)gltfLoader.load(//

2./models/FlightHelmet/glTF/FlightHelmet.gltf,

会遇到将模型放到场景中显示不全

2.(gltf){console.log(gltf)const

children

[...gltf.scene.children]for(const

child

dracoLoader.setDecoderPath(/draco/)

const

gltfLoader.setDRACOLoader(dracoLoader)//

let

nullgltfLoader.load(/models/Duck/glTF-Draco/Duck.gltf,

draco

dracoLoader.setDecoderPath(/draco/)

const

gltfLoader.setDRACOLoader(dracoLoader)let

mixer

/models/FlightHelmet/glTF/FlightHelmet.gltf,

会遇到将模型放到场景中显示不全

会动的狐狸(gltf){console.log(gltf)mixer

new

THREE.AnimationMixer(gltf.scene)

动画混合器const

mixer.clipAction(gltf.animations[2])

动画剪辑器

通过控制台可以看到狐狸关键帧数据抬腿摇头等等action.play()

同时需要在更新时间时候

更新关键帧gltf.scene.scale.set(0.025,0.025,0.025)scene.add(gltf.scene)}

)注意更新时间

null){mixer.update(deltaTime)}//

Update

framewindow.requestAnimationFrame(tick)