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

一、方向光介绍

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

二、如何使用方向光

1.创建方向光

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

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

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>