three.js方向光DirectionalLight使用，调整方向光颜色、光源位置、光照强度、光照指向、是否可见、是否产生阴影属性(vue中使用three.js10)

一、方向光介绍

方向光发出的所有光线都是平行的，可以认为是距离很远的光源，例如遥远的太阳光就是方向光，方向光不像聚焦光那样距离目标越远越暗淡，被方向光照射的整个区域收到的光照强度都一样

二、如何使用方向光

1.创建方向光

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

var directionalLight = new THREE.DirectionalLight(0x0c0c0c) // 创建方向光
scene.add(directionalLight ) // 将方向光添加到场景
1
2

2.方向光的属性

2.1颜色-color

color属性继承自基类Light，color属性的类型是Color，所以color属性的值需要通过颜色对象THREE.Color()来创建

2.2是否可见-visible

visible属性继承自基类Object3D，使用很简单，该属性时布尔类型，取值true或false

2.3强度-intensity

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

2.4目标-target

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

2.5位置-position

position属性表示光源的发光位置，该属性继承自基类Object3D，positon属性的类是Vector3

2.6是否产生阴影-castShadow

castShadow属性是用来控制光源是否产生阴影，取值为true或false

2.7投影远点-shadow.camera.far

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

2.8投影近点-shadow.camera.near

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

2.9投影上边界-shadow.camera.top

2.10投影下边界-shadow.camera.bottom

2.11投影左边界-shadow.camera.left

2.12投影右边界-shadow.camera.right

2.13shadow.mapSize.width 和 shadow.mapSize.height

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

三、demo效果

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

1. 可以控制方向光是否显示
2. 调整方向光颜色
3. 调整方向光的位置
4. 调整方向光的强度
5. 调整聚光灯的照射目标，即光照方向
6. 调整聚光灯是否产生阴影

四、demo代码

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

      <section>
        <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
        },
        intensity: {
          name: 'intensity',
          value: 3.1,
          min: 0,
          max: 5,
          step: 0.1
        },

        color: '#fafafa',
        visible: true,
        target: 'sphere',
        castShadow: true
      },

      isShowColors: false,
      lightHelper: null,
      shadowCameraHelper: null,
      cube: null,
      sphere: null,
      plane: null,
      ambientLight: null,
      directionalLight: 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.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 planeGeometry = new THREE.PlaneGeometry(200, 100) // 创建一个平面对象PlaneGeometry
      const planeMaterial = new THREE.MeshLambertMaterial({
        color: 0x409fee
      }) // 材质对象Material
      this.plane = new THREE.Mesh(planeGeometry, planeMaterial)
      this.plane.receiveShadow = true

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

      // 平面对象添加到场景中
      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(25, 6, 10)
      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(25, 5, -5)
      this.scene.add(this.sphere) // 将网格对象添加到场景
    },

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

      this.directionalLight = new THREE.DirectionalLight(0xffffff) // 创建方向光
      this.directionalLight.position.set(15, 40, 35) // 设置方向光源位置

      this.directionalLight.castShadow = true
      this.directionalLight.shadow.mapSize.width = 1024
      this.directionalLight.shadow.mapSize.height = 1024
      // 方向光投影近点、远点更新
      this.directionalLight.shadow.camera.near = 2
      this.directionalLight.shadow.camera.far = 100

      // 方向光投影边界更新
      this.directionalLight.shadow.camera.top = 8
      this.directionalLight.shadow.camera.bottom = -8
      this.directionalLight.shadow.camera.left = -8
      this.directionalLight.shadow.camera.right = 8

      this.scene.add(this.directionalLight)

      // 创建辅助工具
      this.lightHelper = new THREE.DirectionalLightHelper(this.directionalLight)
      this.scene.add(this.lightHelper)

      this.shadowCameraHelper = new THREE.CameraHelper(
        this.directionalLight.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.directionalLight.color = new THREE.Color(this.lightProperties.color)

      // 方向光强度更新
      this.directionalLight.intensity = this.lightProperties.intensity.value

      // 方向光位置更新
      this.directionalLight.position.set(
        this.lightProperties.positionX.value,
        this.lightProperties.positionY.value,
        this.lightProperties.positionZ.value
      )

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

      // 方向光是否可见更新
      this.directionalLight.visible = this.lightProperties.visible
      // 是否产生阴影
      this.directionalLight.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