three.js之材质-MeshPhongMaterial介绍和使用(vue中使用three.js17)

1.MeshPhongMaterial材质介绍

MeshPhongMaterial材质可以创建一种光亮的材质，可以使用的属性和MeshLambertMaterial材质基本一样，可以配置的其他属性有color、opacity、shading、blending、depthTest、depthWrite、wireframe、wireframeLinewidth、wireframeLinecap、wireframeLineJoin、vertexColors；这些属性不做详细说明，主要列一下我们感兴趣的属性

注：属性ambient、wrapAround、wrapRGB 不知从哪个版本开始废弃掉了，反正v119没有这几个属性

2.demo说明

如上图，该示例支持以下功能

1. 调整visible属性控制物体是否显示
2. 通过勾选transparent和调整opacity属性控制物体透明度
3. 通过color属性调整材质的颜色
4. 通过emissive属性调整材质发光的颜色
5. 通过specular属性调整高光的颜色
6. 通过shininess属性调整高光的亮度
7. 通过下拉选择side属性控制渲染前面、后面、全部
8. 通过下拉选择mesh属性控制页面绘制球体、方块还是平面

3.demo代码

<template>
  <div>
    <div id="container"></div>
    <div class="controls-box">
      <section>
        <el-row>
          <el-checkbox v-model="properties.visible">visible</el-checkbox>
        </el-row>
        <el-row>
          <el-checkbox v-model="properties.transparent">transparent</el-checkbox>
        </el-row>
        <el-row>
          <el-checkbox v-model="properties.wrapAround">wrapAround</el-checkbox>
        </el-row>
        <el-row>
          <el-checkbox v-model="properties.metal">metal</el-checkbox>
        </el-row>

        <el-row>
          <el-col :span="8" class="label-col"><label> color</label></el-col>
          <el-col :span="16">
            <div @click="inputClick">
              <el-input :value="properties.color"></el-input>
            </div>
            <div v-show="isShowColors" class="color-select-layer">
              <sketch-picker v-model="properties.color" @input="colorChange"></sketch-picker>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="label-col"><label> emissive</label></el-col>
          <el-col :span="16">
            <div @click="emissiveColorInputClick">
              <el-input :value="properties.emissiveColor"></el-input>
            </div>
            <div v-show="isShowEmissiveColors" class="color-select-layer">
              <sketch-picker v-model="properties.emissiveColor" @input="emissiveColorChange"></sketch-picker>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="label-col"><label> specular</label></el-col>
          <el-col :span="16">
            <div @click="specularColorInputClick">
              <el-input :value="properties.specularColor"></el-input>
            </div>
            <div v-show="isShowSpecularColors" class="color-select-layer">
              <sketch-picker v-model="properties.specularColor" @input="specularColorChange"></sketch-picker>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <div v-for="(item,key) in properties" :key="key">
            <div v-if="item&&item.name!=undefined">
              <el-col :span="8">
                <span class="vertice-span">{{item.name}}</span>
              </el-col>
              <el-col :span="13">
                <el-slider v-model="item.value" :min="item.min" :max="item.max" :step="item.step" :format-tooltip="formatTooltip"></el-slider>
              </el-col>
              <el-col :span="3">
                <span class="vertice-span">{{item.value}}</span>
              </el-col>
            </div>
          </div>

        </el-row>
        <el-row>
          <el-col :span="8" class="label-col"><label>side</label></el-col>
          <el-col :span="16">
            <el-select v-model="properties.side" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="label-col"><label>mesh</label></el-col>
          <el-col :span="16">
            <el-select v-model="properties.selectMesh" placeholder="请选择">
              <el-option v-for="item in selectMeshOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </section>

    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { Sketch } from 'vue-color'
export default {
  components: {
    'sketch-picker': Sketch
  },
  data () {
    return {
      options: [
        {
          value: 'front',
          label: 'front'
        },
        {
          value: 'back',
          label: 'back'
        },
        {
          value: 'double',
          label: 'double'
        }
      ],

      selectMeshOptions: [
        {
          value: 'cube',
          label: 'cube'
        },
        {
          value: 'sphere',
          label: 'sphere'
        },
        {
          value: 'plane',
          label: 'plane'
        }
      ],

      properties: {
        opacity: {
          name: 'opacity',
          value: 0.3,
          min: 0,
          max: 1,
          step: 0.1
        },
        shininess: {
          name: 'shininess',
          value: 30,
          min: 0,
          max: 300,
          step: 1
        },
        wrapR: {
          name: 'wrapR',
          value: 1,
          min: 0,
          max: 1,
          step: 0.1
        },
        wrapG: {
          name: 'wrapG',
          value: 1,
          min: 0,
          max: 1,
          step: 0.1
        },
        wrapB: {
          name: 'wrapB',
          value: 1,
          min: 0,
          max: 1,
          step: 0.1
        },
        color: '#EB193D',
        emissiveColor: '#AB193D',
        specularColor: '#111111',
        selectMesh: 'cube',
        side: 'front',
        transparent: false,
        wrapAround: false,
        metal: false,
        visible: true
      },
      isShowColors: false,
      isShowEmissiveColors: false,
      isShowSpecularColors: false,
      cube: null,
      sphere: null,
      plane: null,
      activeMesh: null,
      meshMaterial: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    formatTooltip (val) {
      return val
    },
    inputClick () {
      this.isShowColors = !this.isShowColors
    },
    colorChange (val) {
      this.properties.color = val.hex
    },
    emissiveColorInputClick () {
      this.isShowEmissiveColors = !this.isShowEmissiveColors
    },
    emissiveColorChange (val) {
      this.properties.emissiveColor = val.hex
    },
    specularColorInputClick () {
      this.isShowSpecularColors = !this.isShowSpecularColors
    },
    specularColorChange (val) {
      this.properties.specularColor = val.hex
    },

    // 初始化
    init () {
      this.createScene() // 创建场景
      this.createMesh() // 创建网格模型
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.render() // 渲染
    },
    // 创建场景
    createScene () {
      this.scene = new THREE.Scene()
    },
    // 创建网格模型
    createMesh () {
      const geometry = new THREE.PlaneGeometry(100, 100, 4, 4) // 创建一个平面对象PlaneGeometry
      const planeMaterial = new THREE.MeshPhongMaterial({
        color: 0x7777ff
      }) // 材质对象Material
      const plane = new THREE.Mesh(geometry, planeMaterial)
      plane.receiveShadow = true

      // 设置平面位置
      plane.rotation.x = -0.5 * Math.PI
      plane.position.set(0, -20, 0)

      // 平面对象添加到场景中
      this.scene.add(plane)

      const sphereGeometry = new THREE.SphereGeometry(14, 20, 20)
      const cubeGeometry = new THREE.BoxGeometry(15, 15, 15)
      const planeGeometry = new THREE.PlaneGeometry(14, 14, 4, 4)

      // 创建材质
      this.meshMaterial = new THREE.MeshLambertMaterial({
        color: 0x7777ff
      })

      // 创建球、方块、平面
      this.sphere = new THREE.Mesh(sphereGeometry, this.meshMaterial)
      this.cube = new THREE.Mesh(cubeGeometry, this.meshMaterial)
      this.plane = new THREE.Mesh(planeGeometry, this.meshMaterial)

      this.sphere.position.set(-12, 3, 2)
      this.cube.position = this.sphere.position
      this.plane.position = this.sphere.position
      this.activeMesh = this.sphere
    },

    // 创建光源
    createLight () {
      // 环境光
      const ambientLight = new THREE.AmbientLight(0xab193d, 0.1) // 创建环境光
      this.scene.add(ambientLight) // 将环境光添加到场景

      const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯
      spotLight.position.set(-40, 60, -10)
      this.scene.add(spotLight)
    },
    // 创建相机
    createCamera () {
      const element = document.getElementById('container')
      const width = element.clientWidth // 窗口宽度
      const height = element.clientHeight // 窗口高度
      const k = width / height // 窗口宽高比
      // PerspectiveCamera( fov, aspect, near, far )
      this.camera = new THREE.PerspectiveCamera(35, k, 0.1, 1000)
      this.camera.position.set(-60, 60, 100) // 设置相机位置

      this.camera.lookAt(new THREE.Vector3(10, 0, 0)) // 设置相机方向
      this.scene.add(this.camera)
    },
    // 创建渲染器
    createRender () {
      const element = document.getElementById('container')
      this.renderer = new THREE.WebGLRenderer()
      this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
      this.renderer.shadowMap.enabled = true // 显示阴影
      this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
      this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },
    updateMesh (selectMesh) {
      this.scene.remove(this.activeMesh)
      switch (selectMesh) {
        case 'cube':
          this.activeMesh = this.cube
          break
        case 'sphere':
          this.activeMesh = this.sphere
          break
        case 'plane':
          this.activeMesh = this.plane
          break
      }
      this.scene.add(this.activeMesh)
    },
    updateSide (side) {
      switch (side) {
        case 'front':
          this.meshMaterial.side = THREE.FrontSide
          break
        case 'back':
          this.meshMaterial.side = THREE.BackSide
          break
        case 'double':
          this.meshMaterial.side = THREE.DoubleSide
          break
      }
      this.meshMaterial.needsUpdate = true
    },
    // 更新属性
    updateFun () {
      this.meshMaterial.opacity = this.properties.opacity.value
      this.meshMaterial.transparent = this.properties.transparent
      this.meshMaterial.metal = this.properties.metal
      this.meshMaterial.color.setStyle(this.properties.color)
      this.meshMaterial.emissive.setStyle(this.properties.emissiveColor)
      this.meshMaterial.specular = new THREE.Color(
        this.properties.specularColor
      )

      // 属性ambient、wrapAround、wrapRGB 废弃掉了
      /* this.meshMaterial.wrapAround = this.properties.wrapAround
      this.meshMaterial.wrapRGB.x = this.properties.wrapR.value
      this.meshMaterial.wrapRGB.y = this.properties.wrapG.value
      this.meshMaterial.wrapRGB.z = this.properties.wrapB.value */
      this.meshMaterial.shininess = this.properties.shininess.value
      this.meshMaterial.visible = this.properties.visible

      this.updateMesh(this.properties.selectMesh)
      this.updateSide(this.properties.side)
      this.meshMaterial.needsUpdate = true
      this.activeMesh.rotation.y += 0.01 // 旋转
    },

    render () {
      this.updateFun()
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.render)
    },
    // 创建控件对象
    createControls () {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    }
  }
}
</script>

<style>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.controls-box {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 300px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #c3c3c3;
}
.label-col {
  padding: 8px 5px;
}
.color-select-layer {
  position: relative;
  left: -20px;
  padding: 15px 0;
}
.vertice-span {
  line-height: 38px;
  padding: 0 2px 0 10px;
}
</style>

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
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397