three.js光源-环境光AmbientLight使用，创建环境光，修改光源颜色，控制是否显示(vue中使用three.js07)

一、环境光介绍

环境光在three.js中是一种基础光，它的颜色会影响到整个场景中的所有对象，就像太阳光会照射到地球上任何一个迎光的地方，一般情况下它不是场景中唯一的光源而是和其他光源配合使用

二、如何使用环境光

1.创建环境光

创建环境光非常简单，由于环境光不需要指定位置，因此只需要使用
new THREE.AmbientLight(color) 就可以创建指定颜色的环境光，然后将它添加到场景中就可以了

var ambientLight = new THREE.AmbientLight(0x0c0c0c) // 创建环境光
 scene.add(ambientLight) // 将环境光添加到场景

2.修改环境光颜色

修改环境光颜色实际上修改的是AmbientLight对象的color属性，该属性继承自基类Light，color属性的类型是Color，所以color属性的值需要通过颜色对象THREE.Color()来创建，具体操作如下示例

var ambientLight = new THREE.AmbientLight(0x0c0c0c) // 创建环境光
var color = new THREE.Color(0x26E250) //创建颜色对象color
ambientLight.color = color // 给环境光修改颜色

示例中是动态获取颜色选择器中的颜色所以是这样的

// 光源颜色更新
this.ambientLight.color = new THREE.Color(this.ambientLightcolor)

3.控制是否显示环境光

是否显示环境光是通过AmbientLight对象的visible属性，该属性继承自基类Object3D，使用很简单，该属性时布尔类型，只要赋给它true或false即可

this.ambientLight.visible = true //显示环境光
this.ambientLight.visible = false //不显示环境光
this.ambientLight.visible = this.ambientLightVisible //示例中动态修改是否显示环境光

附：调整颜色的属性color继承自基类Light，设置是否显示的属性visible继承自基类Object3D，所以其他类型的光源也可以通过这两个属性控制颜色和是否显示

三、demo效果

如上图，该示例主要有两项功能

1. 可以通过选色板选取颜色来改变环境光的颜色
2. 通过勾选按钮来控制是否显示环境光

四、demo代码

<template>
  <div>
    <div id="container"></div>
    <div class="controls-box">
      <el-checkbox v-model="ambientLightVisible">是否展示环境光</el-checkbox>
      <el-col :span="8" class="label-col"><label> 环境光颜色</label></el-col>
      <el-col :span="16">
        <div @click="colorInputClick">
          <el-input disabled :value="ambientLightcolor" @click="colorInputClick"></el-input>
        </div>
        <div v-show="isShowColors" class="color-select-layer">
          <sketch-picker v-model="ambientLightcolor" @input="colorValueChange"></sketch-picker>
        </div>
      </el-col>

    </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 {
      ambientLightVisible: true,
      isShowColors: true,
      ambientLightcolor: '#063610',
      rotationSpeed: 0.02,
      bouncingSpeed: 0,
      cube: null,
      sphere: null,
      ambientLight: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    colorInputClick () {
      this.isShowColors = !this.isShowColors
    },
    colorValueChange (val) {
      //console.log(val)
      this.ambientLightcolor = 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(60, 20, 1, 1) // 创建一个平面对象PlaneGeometry
      const planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff
      }) // 材质对象Material
      const plane = new THREE.Mesh(planeGeometry, planeMaterial)
      plane.receiveShadow = true

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

      // 平面对象添加到场景中
      this.scene.add(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, 3, 2)
      this.scene.add(this.cube) // 将网格对象添加到场景

      const sphereGeometry = new THREE.SphereGeometry(4, 20, 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(20, 5, 2)
      this.scene.add(this.sphere) // 将网格对象添加到场景
    },
    // 创建光源
    createLight () {
      // 添加聚光灯
      const spotLight = new THREE.SpotLight(0xfafafa)
      spotLight.position.set(-40, 80, -10)
      spotLight.castShadow = true
      this.scene.add(spotLight) // 聚光灯添加到场景中

      // 环境光
      this.ambientLight = new THREE.AmbientLight(0x0c0c0c) // 创建环境光
      this.scene.add(this.ambientLight) // 将环境光添加到场景
    },
    // 创建相机
    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(45, k, 0.1, 1000)

      this.camera.position.set(-25, 30, 25) // 设置相机位置
      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.setClearColor(0x3f3f3f, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },
    // 更新属性
    updateFun () {
      // 方块旋转
      this.cube.rotation.x += this.rotationSpeed
      this.cube.rotation.y += this.rotationSpeed
      this.cube.rotation.z += this.rotationSpeed

      // 球上下跳动

      this.bouncingSpeed += 0.03
      this.sphere.position.x = 20 + 10 * Math.cos(this.bouncingSpeed)
      this.sphere.position.y = 2 + 10 * Math.abs(Math.sin(this.bouncingSpeed))

      // 光源颜色更新
      this.ambientLight.color = new THREE.Color(this.ambientLightcolor)
      this.ambientLight.visible = this.ambientLightVisible
    },
    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;
}
</style>