聚光灯SpotLight使用
- 一、聚光灯介绍
- 二、如何使用聚光灯
- 1.创建聚光灯
- 2.聚光灯的属性
- 2.1颜色-color
- 2.2是否可见-visible
- 2.3角度-angle
- 2.4强度-intensity
- 2.5距离-distance
- 2.6光照衰减指数-decay
- 2.7照射面光影衰减百分比-penumbra
- 2.8目标-target
- 2.9位置-position
- 2.10光强衰减指数-exponent
- 2.11仅生成阴影-onlyShadow
- 2.12阴影偏移-shadow.bias
- 2.13投影方式可见-shadow.camera.visible
- 2.14投影远点-shadow.camera.far
- 2.15投影近点-shadow.camera.near
- 2.16投影视场-shadow.camera.fov
- 2.17shadow.mapSize.width 和 shadow.mapSize.height
- 三、demo效果
- 四、demo代码
一、聚光灯介绍
聚光灯是一个沿着特定方向方散发的光源，照射范围在三维空间中构成一个圆锥体光，它的发光效果类似于手电筒发出的光，从手电筒的位置开始散发出锥形光，随着距离的增加光线越来越弱
二、如何使用聚光灯
1.创建聚光灯
创建一个简单的点光源，通过new THREE.SpotLight(color)语句就可以创建一个指定颜色的聚光灯，然后将它添加到场景中就可以了
var spotLight = new THREE.SpotLight(0x0c0c0c) // 创建聚光灯
scene.add(spotLight) // 将聚光灯添加到场景
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 // 给聚光灯修改颜色
示例中是动态获取颜色选择器中的颜色，然后赋值给color属性，代码如下
// 聚光灯颜色更新
this.spotLight.color = new THREE.Color(this.lightProperties.color)
2.2是否可见-visible
SpotLight对象的visible属性是用来控制光源是否可见，该属性继承自基类Object3D，使用很简单，该属性时布尔类型，只要赋给它true或false即可
this.spotLight.visible = true //显示聚光灯
this.spotLight.visible = false //不显示聚光灯
this.spotLight.visible = this.lightProperties.visible //示例中动态修改聚光灯是否可见
2.3角度-angle
angle属性是用来设置从聚光灯的位置开始可以辐射的范围，单位是弧度，应该不超过 Math.PI/2。默认值为 Math.PI/3
// 聚光灯的角度设置为Math.PI/3
spotLight.angle= Math.PI/3
2.4强度-intensity
intensity属性是用来设置聚光灯的强度，默认值是1，如果设置成0那什么也看不到，该值越大，点光源看起来越亮
// 聚光灯强度设置为2
spotLight.intensity = 2
2.5距离-distance
distance属性表示光源的照射距离，该属性决定了光源可以照射多远，如果将该属性的值设置为4，那么从点光源的位置开始光线强度会慢慢衰减，到距离为4的位置衰减为0，也就是距离超过4将看不到点光源发出的光
// 聚光灯距离设置为20
spotLight.distance = 20
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对象
2.9位置-position
position属性表示光源的发光位置，该属性继承自基类Object3D，positon属性的类是Vector3，可以通过三种方式设置它的位置
- 直接通过position属性的x、y、z属性设置
spotLight.position.x = x
spotLight.position.y = y
spotLight.position.z = z
- 通过position属性的set方法设置
spotLight.position.set(x,.y,z)
- 通过创建THREE.Vector对象赋给position属性
spotLight.position = new THREE.Vector3(x,.y,z)
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效果
如上图，该示例支持以下功能
- 可以控制环境光是否显示，切换环境光颜色
- 可以控制聚光灯是否显示，切换聚光灯颜色
- 调整聚光灯的位置
- 调整聚光灯的光源角度
- 调整聚光灯的强度
- 调整聚光灯的距离
- 调整聚光灯的光照衰减速度
- 调整聚光灯的光影衰减百分比
- 调整聚光灯的照射目标，即光照方向
- 调整聚光灯是否产生阴影
四、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>
2096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
