今日份的下午格外的懒惰，本来不想写辣么长长的一串文字了和解释说明的，
但是发文助手提醒我篇幅较短，曝光比较少，该说不说，这有点过分了。
那就一步步来吧哎
最底下附带了案例源文件
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.所有代码，底下有源代码文件
<!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 { MeshoptDecoder } from './js/meshopt_decoder.module.js'
import { DRACOLoader } from './js/DRACOLoader.js'
let scene, camera, renderer, control, clock, mixer
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()
}
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>
我的glb文件在电脑是没办法正常打开的，会报错，但是可以正常渲染
源代码：https://pan.baidu.com/s/19HFQ8LpiamB5qmWIGDjzgA?pwd=b8mm
密码：b8mm
右键index.html 在liveserve上打开即可
渲染普通的glb文件Three.js 渲染glb，gltf模型（保姆级教程）_小周不会前端呀的博客-CSDN博客_gltf 渲染