1. Preparation
Find the following files in the package of three.js. Note that I am using Modular version, I don’t know about modularity here, you can take a look at es6’s modularity .
Controller: OrbitControls.js
Loader: GLTFLoader.js
Material: RoomEnvironment.js
three.js loads compressed model: DRACOLoader
Model file: I use glb here
2. Demonstration starts
1. Create a new div in the body to host the canvas tag created by three.js
2. Import the prepared file, Note that the script tag adds type=module
Code:
<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>At this point, the preparation work is officially completed!
Note:Some events in the referenced file depend on the three.module.js folder. You need to modify the path in the source code. Here is an example:
3. Initialize the scene, camera, renderer, controller, and lighting
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. Load glb file with animation
// 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 and render functions
function animate() {
requestAnimationFrame(animate)
if (mixer) mixer.update(clock.getDelta())
control.update() // required if damping enabled
render()
}
function render() {
renderer.render(scene, camera)
}
6. Function call
init()
animate()All codes:
<!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>Right click and run:
result:
