three.js点光源PointLight使用，调整点光源颜色、位置、强度、距离、可见性(vue中使用three.js08)

最新推荐文章于 2024-07-27 12:18:54 发布

点燃火柴

最新推荐文章于 2024-07-27 12:18:54 发布

阅读量7.5k

点赞数 8

分类专栏： vue-three.js 文章标签： webgl vue javascript js

本文链接：https://blog.csdn.net/qw8704149/article/details/108437667

版权

vue-three.js 专栏收录该内容

92 篇文章 103 订阅

订阅专栏

点光源PointLight使用

一、点光源介绍
二、如何使用点光源
三、demo效果
四、demo代码

一、点光源介绍

点光源是一种单点发光，照射所有方向的光源，它的发光效果类似于夜空中发射的照明弹，在点光源的照射下，物体的迎光面会亮一些，背光面会暗一些
附：点光源的照射下物体没有产生阴影，是因为点光源会朝所有方向发射光线，这种情况下计算阴影对计算机GPU的负担太过沉重

二、如何使用点光源

1.创建点光源

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

var pointLight = new THREE.PointLight(0x0c0c0c) // 创建点光源
 scene.add(pointLight) // 将点光源添加到场景

2.点光源的属性

2.1颜色-color

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

var pointLight = new THREE.PointLight(0x0c0c0c) // 创建点光源
var color = new THREE.Color(0x26E250) //创建颜色对象color
pointLight.color = color // 给点光源修改颜色

示例中是动态获取颜色选择器中的颜色，然后赋值给color属性，所以是这样的

// 点光源颜色更新
this.pointLight.color = new THREE.Color(this.pointLightcolor)

2.2是否可见-visible

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

this.pointLight.visible = true //显示点光源
this.pointLight.visible = false //不显示点光源
this.pointLight.visible = this.pointLightVisible //示例中动态修改点光源是否可见

2.3强度-intensity

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

// 点光源强度设置为2
pointLight.intensity = 2

2.4距离-distance

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

// 点光源距离设置为20
pointLight.distance = 20

2.5位置-position

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

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

pointLight.position.x = x
pointLight.position.y = y
pointLight.position.z = z

通过position属性的set方法设置

pointLight.position.set(x,.y,z)

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

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

三、demo效果

在这里插入图片描述
如上图，该示例支持以下功能

可以控制环境光是否显示，切换环境光颜色
可以控制点光源是否显示，切换点光源颜色
调整点光源的位置
调整点光源的强度
调整点光源的距离

四、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="pointLightVisible">是否展示点光源</el-checkbox>
        </el-row>
        <el-row>

          <el-col :span="8" class="label-col"><label> 点光源颜色</label></el-col>
          <el-col :span="16">
            <div @click="pointLightInputClick">
              <el-input :value="pointLightcolor"></el-input>
            </div>
            <div v-show="isShowPointLightColors" class="color-select-layer">
              <sketch-picker v-model="pointLightcolor" @input="pointLightColorChange"></sketch-picker>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-collapse accordion>
            <div>
              <el-collapse-item :title="item.name" v-for="(item,key) in pointLightProperties" :key="key">
                <el-col v-for='(paramsItem,paramsItemKey) in item.params' :key="paramsItemKey">
                  <el-col :span="5">
                    <span class="vertice-span">{{paramsItem.name}}</span>
                  </el-col>
                  <el-col :span="16">
                    <el-slider v-model="paramsItem.value" :min="paramsItem.min" :max="paramsItem.max" :step="paramsItem.step" :format-tooltip="formatTooltip"></el-slider>
                  </el-col>
                  <el-col :span="3">
                    <span class="vertice-span">{{paramsItem.value}}</span>
                  </el-col>
                </el-col>
              </el-collapse-item>
            </div>
          </el-collapse>
        </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 {
      pointLightProperties: {
        position: {
          name: '点光源位置-positon',
          params: {
            positionX: {
              name: 'x',
              value: 14,
              min: -14,
              max: 25,
              step: 1
            },
            positionZ: {
              name: 'z',
              value: 2,
              min: -7,
              max: 7,
              step: 1
            }
          }
        },
        intensity: {
          name: '点光源强度-intensity',
          params: {
            intensity: {
              name: 'intensity',
              value: 1,
              min: 0,
              max: 5,
              step: 0.1
            }
          }
        },
        distance: {
          name: '点光源距离-distance',
          params: {
            distance: {
              name: 'distance',
              value: 10,
              min: 0,
              max: 100,
              step: 1
            }
          }
        }
      },
      ambientLightVisible: true,
      isShowAmbientLightColors: false,
      ambientLightcolor: '#0c0c0c',
      pointLightVisible: true,
      isShowPointLightColors: false,
      pointLightcolor: '#ccffcc',
      rotationSpeed: 0.02,
      bouncingSpeed: 0,
      cube: null,
      sphere: null,
      sphereLightMesh: null,
      ambientLight: null,
      pointLight: 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
    },
    pointLightInputClick () {
      this.isShowPointLightColors = !this.isShowPointLightColors
    },
    pointLightColorChange (val) {
      this.pointLightcolor = val.hex
    },
    // 初始化
    init () {
      this.createScene() // 创建场景
      this.createMesh() // 创建网格模型
      this.createCubeAndSphere() // 创建方块和球
      this.createSmallSphere() // 创建小球模拟点光源发光点
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.render() // 渲染
    },
    // 创建场景
    createScene () {
      this.scene = new THREE.Scene()
    },
    // 创建网格模型
    createMesh () {
      const planeGeometry = new THREE.PlaneGeometry(60, 20, 20, 20) // 创建一个平面对象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) // 将网格对象添加到场景
    },
    // 创建小球模拟点光源发光点
    createSmallSphere () {
      const sphereLight = new THREE.SphereGeometry(0.2)
      const sphereLightMaterial = new THREE.MeshBasicMaterial({
        color: 0xac6c25
      })
      this.sphereLightMesh = new THREE.Mesh(sphereLight, sphereLightMaterial)
      this.sphereLightMesh.castShadow = true

      this.sphereLightMesh.position = new THREE.Vector3(3, 0, 3)
      this.scene.add(this.sphereLightMesh)
    },
    // 创建光源
    createLight () {
      // 添加聚光灯
      const spotLight = new THREE.SpotLight(0xffffff)
      spotLight.position.set(-80, 60, -10)
      spotLight.castShadow = true
      this.scene.add(spotLight) // 聚光灯添加到场景中

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

      this.pointLight = new THREE.PointLight(this.pointLightcolor) // 创建点光源
      this.pointLight.distance = 100 // 设置点光源照射距离为100
      this.scene.add(this.pointLight) // 将点光源添加到场景
    },
    // 创建相机
    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

      // 点光源颜色更新
      this.pointLight.color = new THREE.Color(this.pointLightcolor)

      // 点光源强度更新
      this.pointLight.intensity = this.pointLightProperties.intensity.params.intensity.value

      // 点光源距离更新
      this.pointLight.distance = this.pointLightProperties.distance.params.distance.value

      // 点光源位置更新
      this.pointLight.position.set(
        this.pointLightProperties.position.params.positionX.value,
        5,
        this.pointLightProperties.position.params.positionZ.value
      )

      this.sphereLightMesh.position.copy(this.pointLight.position)
      // 点光源是否可见更新
      this.pointLight.visible = this.pointLightVisible
    },
    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;
}
.vertice-span {
  line-height: 38px;
  padding: 0 2px 0 10px;
}
</style>