没想到有朝一日，我也玩起了三维😀，主要实现的是根据一个 gltf 模型使用 threejs 将其渲染出来，并且可以通过鼠标控制放大、缩小、旋转 等操作。

1. 下载依赖 `js` 资源

这里使用最原始的 html 引入的方式来加载资源。这里使用 0.100.0 版本的资源。

我把这三个资源放在项目根目录的 libs/three 中，目录结构如下

├─ js
├─ static
|   ├─ bim
├─ libs
|   ├─ three
|   |   ├─ GLTFLoader@0.100.0.js
|   |   ├─ Three@0.100.0.min.js
|   |   ├─ OrbitControls@0.100.0.js
├─ index.html

2. 编写 `html`

html比较简单，主要引入对应资源，并重置全局样式。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{ margin: 0;padding: 0;overflow: hidden; }
    </style>
</head>
<body>

<script src="./libs/three/three@0.100.0.min.js"></script>
<script src="./libs/three/GLTFLoader@0.100.0.js"></script>
<script src="./libs/three/OrbitControls@0.100.0.js"></script>
<script>
    
</script>
</body>
</html>

3. 下载对应的 `gltf` 资源

我在这个网站找的 gltf 资源
Sketchfab

将下载的 gltf 完整资源放在 /static/bim 下，注意：需要包含 textures、scene.bin、scene.gltf。

4. 在 `html` 的 `script` 部分编写关键代码

在 第二步 最后的 script 内编写下列代码

// 定义场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// 将元素添加到body中
document.body.append(renderer.domElement);

// 设置相机的观看方向
camera.position.x = 10;
camera.position.y = 10;
// 数值越小，眼睛距离模型越近
camera.position.z = 10;

// 添加控制器，可操作模型放大缩小旋转
new THREE.OrbitControls( camera, renderer.domElement );

// 定义GLTFLoader,加载模型
const loader = new THREE.GLTFLoader();
loader.load("./static/bim/building_1/scene.gltf",(gltf) => {
    gltf.scene.traverse( function ( child ) {
        if ( child.isMesh ) {
            child.frustumCulled = false;
            //模型阴影
            child.castShadow = true;
            //模型自发光
            child.material.emissive =  child.material.color;
            child.material.emissiveMap = child.material.map ;
        }
    })
    scene.add(gltf.scene);
}, (xhr) => {
    // percent = (xhr.loaded / xhr.total * 100);
}, ( error ) => {
    console.log("模型加载异常");
});

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

animate();

5. 总结

以前虽然接触过 threejs，但只是停留在学习阶段，比如绘制立方体，控制旋转缩放，这次用在工作中，使用 加载模型 的方式，也算是有些收获。

1. 下载依赖 js 资源

2. 编写 html

3. 下载对应的 gltf 资源

4. 在 html 的 script 部分编写关键代码

5. 总结

1. 下载依赖 `js` 资源

2. 编写 `html`

3. 下载对应的 `gltf` 资源

4. 在 `html` 的 `script` 部分编写关键代码