TRY CODING FUN

重拾编程的乐趣

0%

ThreeJS 实现展示汽车

发表于 分类于
本文字数： 8.6k 阅读时长 ≈ 8 分钟

问题

公司需要我调研一下 VRAR 展示小车，我就想起 ThreeJS 了，在网上找了一下 Demo 和教程

Demo

https://threejs.org/examples/#webgl_materials_car

看到这个 Demo 我立刻知道这是我想要的了

开发过程中碰到的关键点

模型

模型可以在 https://sketchfab.com 下载，选择 glTF 格式

模型编辑器

可以用 Blender 编辑模型，但是我不会用，所以就不介绍了

模型加载

1
2
3
4
const loader = new GLTFLoader() //引入模型的loader实例
const gltf = await loadFile('src/assets/3d/2022_rolls-royce_phantom_extended_series_ii/scene.gltf')
const model = gltf.scene;
scene.add(model)

模型颜色设置

这个是设置模型颜色的代码，scene.traverse 方法可以遍历所有的模型，child.isMesh 判断是否是模型，child.name 判断模型的名称，child.material.color.set 设置模型颜色

1
2
3
4
5
6
7
8
9
10
11
const setCarColor = (index) => {
  const currentColor = new Color(colorAry[index])
  scene.traverse(child => {
    if (child.isMesh) {
      console.log(child.name)
      if (child.name == 'Object_6') {
        child.material.color.set(currentColor)
      }
    }
  })
}

有趣的是我设置其中一个模型颜色的时候，其他模型的颜色也会改变，后来发现是因为这些模型的材质是共用的。如果想单独修改这个模型的颜色，可以用 child.material = child.material.clone() 克隆一个材质，然后再设置颜色

1
2
3
4
5
6
7
8
9
10
11
12
const setCarColor = (index) => {
  const currentColor = new Color(colorAry[index])
  scene.traverse(child => {
    if (child.isMesh) {
      console.log(child.name)
      if (child.name == 'Object_6') {
        child.material = child.material.clone()
        child.material.color.set(currentColor)
      }
    }
  })
}

模型加载进度

一般来说模型很大，最好弄个进度条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const loadFile = (url) => {
  return new Promise(((resolve, reject) => {
    loader.load(url,
      (gltf) => {
        resolve(gltf)
      }, ({ loaded, total }) => {
        let load = Math.abs(loaded / total * 100)
        loadingWidth.value = load
        if (load >= 100) {
          setTimeout(() => {
            isLoading.value = false
          }, 1000)
        }
        console.log((loaded / total * 100) + '% loaded')
      },
      (err) => {
        reject(err)
      }
    )
  }))
}

模型转动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const setControls = () => {
  controls = new OrbitControls(camera, renderer.domElement)
  controls.maxPolarAngle = 0.9 * Math.PI / 2
  controls.enableZoom = true
  controls.addEventListener('change', render)
}

//返回坐标信息
const render = () => {
  map.x = Number.parseInt(camera.position.x)
  map.y = Number.parseInt(camera.position.y)
  map.z = Number.parseInt(camera.position.z)
}

// 循环场景 、相机、 位置更新
const loop = () => {
  requestAnimationFrame(loop)
  renderer.render(scene, camera)
  controls.update()
}

环境贴图

车转动的时候，需要车身有反光的效果，所以需要设置环境贴图

1
2
3
4
scene.environment = new RGBELoader().load('src/assets/textures/equirectangular/venice_sunset_1k.hdr');
scene.environment.mapping = THREE.EquirectangularReflectionMapping;
renderer.toneMapping = THREE.LinearToneMapping;
renderer.toneMappingExposure = 1;

灯光

车看上去黑不溜秋的是因为没有光，所以需要设置灯光

1
2
3
4
5
6
7
const setLight = () => {
  directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
  directionalLight.position.set( 0, 1, 0 );
  scene.add( directionalLight );
  hemisphereLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 0.4 );
  scene.add( hemisphereLight );
}

源码

人狠话不多直接上源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<script setup>
import { onMounted, reactive, ref, toRefs } from 'vue'
import {
  Color,
  Scene,
  WebGLRenderer,
} from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import * as THREE from 'three';
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
//车身颜色数组
const colorAry = [
  "rgb(216, 27, 67)", "rgb(142, 36, 170)", "rgb(81, 45, 168)", "rgb(48, 63, 159)", "rgb(30, 136, 229)", "rgb(0, 137, 123)",
  "rgb(67, 160, 71)", "rgb(251, 192, 45)", "rgb(245, 124, 0)", "rgb(230, 74, 25)", "rgb(233, 30, 78)", "rgb(156, 39, 176)",
  "rgb(0, 0, 0)"] // 车身颜色数组
const loader = new GLTFLoader() //引入模型的loader实例
const defaultMap = {
  x: 510,
  y: 128,
  z: 0,
}// 相机的默认坐标
const map = reactive(defaultMap)//把相机坐标设置成可观察对象
const { x, y, z } = toRefs(map)//输出坐标给模板使用
let scene, camera, renderer, controls, floor, dhelper, hHelper, directionalLight, hemisphereLight, grid // 定义所有three实例变量
let isLoading = ref(true) //是否显示loading  这个load模型监听的进度
let loadingWidth = ref(0)// loading的进度

//创建灯光
const setLight = () => {

}

// 创建场景
const setScene = () => {
  scene = new Scene()
  // 设置背景颜色为白色
  scene.background = new Color(0xffffff);
  scene.environment = new RGBELoader().load('src/assets/textures/equirectangular/venice_sunset_1k.hdr');
  scene.environment.mapping = THREE.EquirectangularReflectionMapping;
  renderer = new WebGLRenderer({
    antialias: true,
  })
  renderer.setSize(innerWidth, innerHeight)
  renderer.toneMapping = THREE.LinearToneMapping;
  renderer.toneMappingExposure = 1;
  document.querySelector('.boxs').appendChild(renderer.domElement)
  renderer.shadowMapEnabled = true
}

// 创建相机
const setCamera = () => {
  camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 100 );
  camera.position.set( - 6.5, 2, 4 );
}

// 设置模型控制
const setControls = () => {
  controls = new OrbitControls(camera, renderer.domElement)
  controls.maxPolarAngle = 0.9 * Math.PI / 2
  controls.enableZoom = true
  controls.addEventListener('change', render)
}

//返回坐标信息
const render = () => {
  map.x = Number.parseInt(camera.position.x)
  map.y = Number.parseInt(camera.position.y)
  map.z = Number.parseInt(camera.position.z)
}

// 循环场景 、相机、 位置更新
const loop = () => {
  requestAnimationFrame(loop)
  renderer.render(scene, camera)
  controls.update()
}

//是否自动转动
const isAutoFun = () => {
  controls.autoRotate = true
}
//停止转动
const stop = () => {
  controls.autoRotate = false
}

//设置车身颜色
const setCarColor = (index) => {
  const currentColor = new Color(colorAry[index])
  scene.traverse(child => {
    if (child.isMesh) {
      console.log(child.name)
      if (child.name == 'Object_6') {
        child.material.color.set(currentColor)
      }
    }
  })
}

const loadFile = (url) => {
  return new Promise(((resolve, reject) => {
    loader.load(url,
      (gltf) => {
        resolve(gltf)
      }, ({ loaded, total }) => {
        let load = Math.abs(loaded / total * 100)
        loadingWidth.value = load
        if (load >= 100) {
          setTimeout(() => {
            isLoading.value = false
          }, 1000)
        }
        console.log((loaded / total * 100) + '% loaded')
      },
      (err) => {
        reject(err)
      }
    )
  }))
}


//初始化所有函数
const init = async () => {
  setScene()
  setCamera()
  setLight()
  setControls()
  const gltf = await loadFile('src/assets/3d/2022_rolls-royce_phantom_extended_series_ii/scene.gltf')
  const model = gltf.scene;
  scene.add(model)
  loop()
}
//用vue钩子函数调用
onMounted(init)

</script>

<template>
  <div class="boxs">
    <div class="maskLoading" v-if="isLoading">
      <div class="loading">
        <div :style="{ width: loadingWidth + '%' }"></div>
      </div>
      <div style="padding-left: 10px;">{{ parseInt(loadingWidth) }}%</div>
    </div>
    <div class="mask">
      <p>x : {{ x }} y:{{ y }} z :{{ z }}</p>
      <button @click="isAutoFun">转动车</button>
      <button @click="stop">停止</button>
      <div class="flex">
        <div @click="setCarColor(index)" v-for="(item, index) in colorAry" :style="{ backgroundColor: item }"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
body {
  margin: 0;
}

.maskLoading {
  background: #000;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1111111;
  color: #fff;
}

.maskLoading .loading {
  width: 400px;
  height: 20px;
  border: 1px solid #fff;
  background: #000;
  overflow: hidden;
  border-radius: 10px;

}

.maskLoading .loading div {
  background: #fff;
  height: 20px;
  width: 0;
  transition-duration: 500ms;
  transition-timing-function: ease-in;
}

canvas {
  width: 100%;
  height: 100%;
  margin: auto;
}

.mask {
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;

}

.flex div {
  width: 10px;
  height: 10px;
  margin: 5px;
  cursor: pointer;
}
</style>

资源

参考

感谢

开发过程中碰到了一些问题，和群友 undefined 讨论很多，感谢他的帮助

相关文章