three.js聚光灯SpotLight使用，调整聚光灯颜色、位置、角度、强度、距离、衰减指数、方向、可见性、是否产生阴影属性(vue中使用three.js09)_threejs spotlight朝向

一、聚光灯介绍

聚光灯是一个沿着特定方向方散发的光源，照射范围在三维空间中构成一个圆锥体光，它的发光效果类似于手电筒发出的光，从手电筒的位置开始散发出锥形光，随着距离的增加光线越来越弱

二、如何使用聚光灯

1.创建聚光灯

创建一个简单的点光源，通过new THREE.SpotLight(color)语句就可以创建一个指定颜色的聚光灯，然后将它添加到场景中就可以了

var spotLight = new THREE.SpotLight(0x0c0c0c) // 创建聚光灯
 scene.add(spotLight) // 将聚光灯添加到场景
1
2

2.聚光灯的属性

2.1颜色-color

我们可以通过聚光灯的属性color来调整它的颜色，color属性继承自基类Light，color属性的类型是Color，所以color属性的值需要通过颜色对象THREE.Color()来创建，具体操作如下示例

var spotLight = new THREE.SpotLight(0x0c0c0c) // 创建聚光灯
var color = new THREE.Color(0x26E250) //创建颜色对象color
 spotLight.color = color // 给聚光灯修改颜色
1
2
3

示例中是动态获取颜色选择器中的颜色，然后赋值给color属性，代码如下

// 聚光灯颜色更新
this.spotLight.color = new THREE.Color(this.lightProperties.color)
1
2

2.2是否可见-visible

SpotLight对象的visible属性是用来控制光源是否可见，该属性继承自基类Object3D，使用很简单，该属性时布尔类型，只要赋给它true或false即可

this.spotLight.visible = true //显示聚光灯
this.spotLight.visible = false //不显示聚光灯
this.spotLight.visible = this.lightProperties.visible //示例中动态修改聚光灯是否可见
1
2
3

2.3角度-angle

angle属性是用来设置从聚光灯的位置开始可以辐射的范围，单位是弧度，应该不超过 Math.PI/2。默认值为 Math.PI/3

// 聚光灯的角度设置为Math.PI/3
spotLight.angle= Math.PI/3
1
2

2.4强度-intensity

intensity属性是用来设置聚光灯的强度，默认值是1，如果设置成0那什么也看不到，该值越大，点光源看起来越亮

// 聚光灯强度设置为2
spotLight.intensity = 2
1
2

2.5距离-distance

distance属性表示光源的照射距离，该属性决定了光源可以照射多远，如果将该属性的值设置为4，那么从点光源的位置开始光线强度会慢慢衰减，到距离为4的位置衰减为0，也就是距离超过4将看不到点光源发出的光

// 聚光灯距离设置为20
spotLight.distance = 20
1
2

2.6光照衰减指数-decay

decay属性用来表示随着距离光照强度的衰减速度，值越大衰减的越快
当等于2时，衰减效果与现实世界的光衰减雷同，默认值为1

2.7照射面光影衰减百分比-penumbra

penumbra属性表示照射面光影衰减百分比，取值在0和1之间， 默认值为 0.0

2.8目标-target

target属性用来决定光照的方向，一般会指向一个对象

var geom = new THREE.BoxGeometry(4, 4, 4) // 创建几何对象geom
var material = new THREE.MeshLambertMaterial({ color: 0xff0000 }) // 创建材质对象material
var cube = new THREE.Mesh(geom, material) // 创建网格对象cube
 spotLight.target = cube //聚光灯指向cube对象
1
2
3
4

2.9位置-position

position属性表示光源的发光位置，该属性继承自基类Object3D，positon属性的类是Vector3，可以通过三种方式设置它的位置

1. 直接通过position属性的x、y、z属性设置

spotLight.position.x = x
spotLight.position.y = y
spotLight.position.z = z
1
2
3

2. 通过position属性的set方法设置

spotLight.position.set(x,.y,z) 
1

3. 通过创建THREE.Vector对象赋给position属性

spotLight.position = new THREE.Vector3(x,.y,z) 
1

2.10光强衰减指数-exponent

光照指向特定目标，在这个方向上距离光源越远，则光照强度递减的越快，这个值决定光照强度递减的有多快

2.11仅生成阴影-onlyShadow

onlyShadow属性来控制是否值生成阴影。如果此属性设置为 true，则该光源只生成阴影，而不会在场景中添加任何光照

2.12阴影偏移-shadow.bias

shadow.bias属性用来表示偏置阴影的位置。当你使用非常薄的对象时，可以使用它来解决一些奇怪的效果。如果你看到奇怪的阴影效果，将该属性设置为很小的值（例如 0.01）通常可以解决问题。此属性的默认值为 0。

2.13投影方式可见-shadow.camera.visible

如果设置为true，就可以看到光源在哪里，如何产生阴影

2.14投影远点-shadow.camera.far

表示到距离光源的哪一个位置可以生成阴影

2.15投影近点-shadow.camera.near

表示距离光源的哪一个位置开始生成阴影

2.16投影视场-shadow.camera.fov

表示用于生成阴影的视场有多大

2.17shadow.mapSize.width 和 shadow.mapSize.height

阴影映射宽度和阴影映射高度。决定了有多少像素用来生成阴影。当阴影具有锯齿状边缘或看起来不光滑时，可以增加这个值。在场景渲染之后无法更改

三、demo效果

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

1. 可以控制环境光是否显示，切换环境光颜色
2. 可以控制聚光灯是否显示，切换聚光灯颜色
3. 调整聚光灯的位置
4. 调整聚光灯的光源角度
5. 调整聚光灯的强度
6. 调整聚光灯的距离
7. 调整聚光灯的光照衰减速度
8. 调整聚光灯的光影衰减百分比
9. 调整聚光灯的照射目标，即光照方向
10. 调整聚光灯是否产生阴影

四、demo代码

<template>
  <div>
    <div id="container"></div>
    <div class="controls-box">

      <section>
        <el-row>
          <el-checkbox v-model="ambientLightVisible">是否展示环境光</el-checkbox>
        </el-row>
        <el-row>
          <el-col :span="8" class="label-col"><label> 环境光颜色</label></el-col>
          <el-col :span="16">
            <div @click="ambientLightInputClick">
              <el-input :value="ambientLightcolor"></el-input>
            </div>
            <div v-show="isShowAmbientLightColors" class="color-select-layer">
              <sketch-picker v-model="ambientLightcolor" @input="ambientLightColorChange"></sketch-picker>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-checkbox v-model="lightProperties.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="lightProperties.color"></el-input>
            </div>
            <div v-show="isShowColors" class="color-select-layer">
              <sketch-picker v-model="lightProperties.color" @input="colorChange"></sketch-picker>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <div v-for="(item,key) in lightProperties" :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>target</label></el-col>
          <el-col :span="16">
            <el-select v-model="lightProperties.target" 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-checkbox v-model="lightProperties.castShadow">是否产生阴影</el-checkbox>
        </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: 'cube',
          label: 'cube'
        },
        {
          value: 'sphere',
          label: 'sphere'
        },
        {
          value: 'plane',
          label: 'plane'
        }
      ],
      lightProperties: {
        positionX: {
          name: 'positionX',
          value: 15,
          min: -40,
          max: 40,
          step: 1
        },
        positionY: {
          name: 'positionY',
          value: 40,
          min: -60,
          max: 100,
          step: 1
        },
        positionZ: {
          name: 'positionZ',
          value: 35,
          min: -40,
          max: 40,
          step: 1
        },
        angle: {
          name: 'angle',
          value: 0.4,
          min: 0.1,
          max: 1.5,
          step: 0.1
        },
        intensity: {
          name: 'intensity',
          value: 3.1,
          min: 0,
          max: 5,
          step: 0.1
        },
        distance: {
          name: 'distance',
          value: 200,
          min: 0,
          max: 1000,
          step: 1
        },
        decay: {
          name: 'decay ',
          value: 1,
          min: 0,
          max: 2,
          step: 0.1
        },
        penumbra: {
          name: 'penumbra',
          value: 0.1,
          min: 0,
          max: 1,
          step: 0.1
        },
        color: '#ccffcc',
        visible: true,
        target: 'sphere',
        castShadow: true,
        onlyShadow: false
      },

      ambientLightVisible: true,
      isShowAmbientLightColors: false,
      ambientLightcolor: '#0c0c0c',
      isShowColors: false,
      lightHelper: null,
      shadowCameraHelper: null,
      cube: null,
      sphere: null,
      plane: null,
      ambientLight: null,
      spotLight: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    formatTooltip (val) {
      return val
    },
    ambientLightInputClick () {
      this.isShowAmbientLightColors = !this.isShowAmbientLightColors
    },
    ambientLightColorChange (val) {
      this.ambientLightcolor = val.hex
    },
    inputClick () {
      this.isShowColors = !this.isShowColors
    },
    colorChange (val) {
      this.lightProperties.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 material = new THREE.MeshPhongMaterial({
        color: 0x808080,
        dithering: true
      })

      const geometry = new THREE.PlaneBufferGeometry(2000, 2000)

      this.plane = new THREE.Mesh(geometry, material)
      this.plane.position.set(0, 0, 0)
      this.plane.rotation.x = -Math.PI * 0.5
      this.plane.receiveShadow = true
      this.scene.add(this.plane)
    },
    // 创建方块和球
    createCubeAndSphere () {
      const geom = new THREE.BoxGeometry(4, 4, 4) // 创建几何对象geom
      const material = new THREE.MeshLambertMaterial({ color: 0xff0000 }) // 创建材质对象material
      this.cube = new THREE.Mesh(geom, material) // 创建网格对象cube
      this.cube.castShadow = true
      this.cube.position.set(-4, 6, 2)
      this.scene.add(this.cube) // 将网格对象添加到场景

      const sphereGeometry = new THREE.SphereGeometry(4, 26, 20) // 创建几何对象sphereGeometry
      const sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff }) // 创建材质对象sphereMaterial
      this.sphere = new THREE.Mesh(sphereGeometry, sphereMaterial) // 创建网格对象sphere
      this.sphere.castShadow = true
      this.sphere.position.set(-4, 5, 12)
      this.scene.add(this.sphere) // 将网格对象添加到场景
    },

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

      this.spotLight = new THREE.SpotLight(0xffffff)
      this.spotLight.position.set(15, 40, 35)
      this.spotLight.angle = Math.PI / 4
      this.spotLight.penumbra = 0.05
      this.spotLight.decay = 2
      this.spotLight.distance = 200

      this.spotLight.castShadow = true
      this.spotLight.shadow.mapSize.width = 1024
      this.spotLight.shadow.mapSize.height = 1024
      this.spotLight.shadow.camera.near = 10
      this.spotLight.shadow.camera.far = 200
      this.scene.add(this.spotLight)

      this.lightHelper = new THREE.SpotLightHelper(this.spotLight)
      this.scene.add(this.lightHelper)

      this.shadowCameraHelper = new THREE.CameraHelper(
        this.spotLight.shadow.camera
      )
      this.scene.add(this.shadowCameraHelper)

      this.scene.add(new THREE.AxesHelper(20))
    },
    // 创建相机
    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(165, 38, -10) // 设置相机位置

      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.setClearColor(0x3f3f3f, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },
    // 更新属性
    updateFun () {
      // 环境光颜色更新
      this.ambientLight.color = new THREE.Color(this.ambientLightcolor)
      // 环境光是否可见更新
      this.ambientLight.visible = this.ambientLightVisible

      // 聚光灯颜色更新
      this.spotLight.color = new THREE.Color(this.lightProperties.color)

      // 聚光灯角度更新
      this.spotLight.angle = this.lightProperties.angle.value

      // 聚光灯强度更新
      this.spotLight.intensity = this.lightProperties.intensity.value

      // 聚光灯距离更新
      this.spotLight.distance = this.lightProperties.distance.value

      // 更新聚光锥的半影衰减百分比
      this.spotLight.penumbra = this.lightProperties.penumbra.value

      // 更新沿着光照距离的衰减量
      this.spotLight.decay = this.lightProperties.decay.value

      // 聚光灯位置更新
      this.spotLight.position.set(
        this.lightProperties.positionX.value,
        this.lightProperties.positionY.value,
        this.lightProperties.positionZ.value
      )

      // 更新target
      if (this.lightProperties.target === 'sphere') {
        this.spotLight.target = this.sphere
      } else if (this.lightProperties.target === 'plane') {
        this.spotLight.target = this.plane
      } else {
        this.spotLight.target = this.cube
      }

      // 聚光灯是否可见更新
      this.spotLight.visible = this.lightProperties.visible
      // 是否产生阴影
      this.spotLight.castShadow = this.lightProperties.castShadow
      // 更新辅助工具
      this.lightHelper.update()
      this.shadowCameraHelper.update()
    },
    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
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