three.js材质分类，网格基础材质MeshBasicMaterial属性介绍和使用(vue中使用three.js11)

一、材质的分类

我们知道材质结合几何体可以构建网格，材质就像物体的皮肤，决定了物体长什么样子，常用的材质主要有以下九种

1.1网格基础材质-MeshBasicMaterial

基础材质，可以用它赋予几何体一种简单的颜色，或者显示几何体的线框

1.2网格深度材质-MeshDepthMaterial

根据网格到相机的距离，这种材质决定如何给网格染色

1.3网格法向材质-MeshNormalMaterial

这是一种简单的材质，根据物体表面的法向量计算颜色

1.4网格面材质-MeshFaceMaterial

这是一个容器，可以在这个容器里为物体的各个表面指定不同的颜色

1.5网格朗伯材质-MeshLamberMaterial

这种材质会考虑光照的影响，可以用来创建颜色暗淡、不光亮的物体

1.6网格Phong材质-MeshPhongMaterial

这种材质也会考虑光照的影响，而且可以用来创建光亮的物体

1.7着色器材质-ShaderMaterial

这种材质允许使用自定义的着色器程序，直接控制顶点的放置方式和像素的着色方式

1.8直线基础材质-LineBasicMaterial

这种材质可以用于THREE.Line几何体，从而创建着色器直线

1.9虚线-LineDashedMaterial

这种材质跟直线基础材质一样，不过可以用来创建一种虚线效果

二、材质的共有属性

材质有一个基类THREE.Material，这个类列出了所有共有属性，我们把这些共有属性分为三类

2.1基础共性

2.2融合属性

2.3高级属性

三、MeshBasicMaterial材质属性介绍

网格基础材质是一种非常简单的材质，这种材质不考虑光照的影响，该材质主要有以下属性

四、demo说明

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

1. 通过mesh下拉选择创建正方体、球体或平面
2. 调整材质是否可见
3. 调整材质的颜色
4. 调整是否透明属性和透明度
5. 调整是否显示边框线
6. 调整side属性

五、demo代码

<template>
  <div>
    <div id="container"></div>
    <div class="controls-box">
      <section>
        <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>
        <el-row>
          <el-checkbox v-model="properties.visible">是否可见</el-checkbox>
        </el-row>
        <el-row>
          <el-col :span="8" class="label-col"><label> 材质颜色</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-checkbox v-model="properties.transparent">是否透明</el-checkbox>
        </el-row>
        <el-row>
          <el-checkbox v-model="properties.wireframe">是否渲染为线框</el-checkbox>
        </el-row>
        <el-row>
          <div v-for="(item,key) in properties" :key="key">
            <div v-if="item&&item.name!=undefined&&(item.name=='opacity'&&properties.transparent)||(item.name=='linewidth'&&properties.wireframe)">
              <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>

      </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
        },
        wireframeLinewidth: {
          name: 'linewidth',
          value: 5,
          min: 0,
          max: 20,
          step: 1
        },
        selectMesh: 'cube',
        side: 'front',
        transparent: false,
        wireframe: true,
        visible: true,
        color: '#ccffcc'
      },
      isShowColors: false,
      cube: null,
      sphere: null,
      plane: 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
    },
    // 初始化
    init () {
      this.createScene() // 创建场景
      this.createMesh() // 创建网格模型
      this.createCubeAndSphere() // 创建方块和球
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.render() // 渲染
    },
    // 创建场景
    createScene () {
      this.scene = new THREE.Scene()
    },
    // 创建网格模型
    createMesh () {
      const planeGeometry = new THREE.PlaneGeometry(100, 100, 4, 4) // 创建一个平面对象PlaneGeometry
      const planeMaterial = new THREE.MeshLambertMaterial({
        color: 0x777777
      }) // 材质对象Material
      const plane = new THREE.Mesh(planeGeometry, planeMaterial)
      plane.receiveShadow = true

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

      // 平面对象添加到场景中
      this.scene.add(plane)
    },
    // 创建方块和球
    createCubeAndSphere () {
      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.MeshBasicMaterial({
        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.scene.add(this.cube)
    },

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

      const spotLight = new THREE.SpotLight(0xffffff) // 创建聚光灯
      spotLight.position.set(-40, 60, -10)
      spotLight.castShadow = true
      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(-80, 60, 40) // 设置相机位置

      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.plane)
      this.scene.remove(this.cube)
      this.scene.remove(this.sphere)

      switch (selectMesh) {
        case 'cube':
          this.scene.add(this.cube)
          break
        case 'sphere':
          this.scene.add(this.sphere)
          break
        case 'plane':
          this.scene.add(this.plane)
          break
      }
    },
    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.color.setStyle(this.properties.color)
      this.meshMaterial.opacity = this.properties.opacity.value
      this.meshMaterial.wireframeLinewidth = this.properties.wireframeLinewidth.value
      this.meshMaterial.transparent = this.properties.transparent
      this.meshMaterial.wireframe = this.properties.wireframe
      this.meshMaterial.visible = this.properties.visible

      this.updateMesh(this.properties.selectMesh)
      this.updateSide(this.properties.side)
    },
    render () {
      this.updateFun()
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.render)
    },
    // 创建控件对象
    createControls () {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
      this.controls.target.copy(this.plane.position)
    }
  }
}
</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