一、点光源介绍

点光源是一种单点发光，照射所有方向的光源，它的发光效果类似于夜空中发射的照明弹，在点光源的照射下，物体的迎光面会亮一些，背光面会暗一些
附：点光源的照射下物体没有产生阴影，是因为点光源会朝所有方向发射光线，这种情况下计算阴影对计算机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) // 创建一个平面对象PlaneGeometryconst planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}) // 材质对象Materialconst plane = new THREE.Mesh(planeGeometry, planeMaterial)plane.receiveShadow = true// 设置平面位置plane.rotation.x = -0.5 * Math.PIplane.position.set(15, 0, 0)// 平面对象添加到场景中this.scene.add(plane)},// 创建方块和球createCubeAndSphere () {const geom = new THREE.BoxGeometry(4, 4, 4) // 创建几何对象geomconst material = new THREE.MeshLambertMaterial({ color: 0xff0000 }) // 创建材质对象materialthis.cube = new THREE.Mesh(geom, material) // 创建网格对象cubethis.cube.castShadow = truethis.cube.position.set(-4, 3, 2)this.scene.add(this.cube) // 将网格对象添加到场景const sphereGeometry = new THREE.SphereGeometry(4, 20, 20) // 创建几何对象sphereGeometryconst sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff }) // 创建材质对象sphereMaterialthis.sphere = new THREE.Mesh(sphereGeometry, sphereMaterial) // 创建网格对象spherethis.sphere.castShadow = truethis.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 = truethis.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 = truethis.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 // 设置点光源照射距离为100this.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.rotationSpeedthis.cube.rotation.y += this.rotationSpeedthis.cube.rotation.z += this.rotationSpeed// 球上下跳动this.bouncingSpeed += 0.03this.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>

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

微信js扫一扫，扫条形码去掉code_128。在vue中封装全局对象的方法，封装微信js-sdk权限验证的方法
微信公众号在调用扫一扫功能时,一维码(条形码)在直接返回结果时会在结果前带上EAN_8, EAN_13, CODE_25, CODE_39, CODE_128, UPC_A, UPC_E wx.sca ...
创建第一个three.js三维场景，可通过鼠标缩放与移动方块(vue中使用three.js02)
three.js创建可鼠标操作立方体一.three.js创建鼠标操作立方体几个重要步骤 1.创建场景 2.创建网格模型 3.创建光源 4.创建相机 5.创建渲染器 6.创建控件对象 7.渲染二.全 ...
three.js聚光灯SpotLight使用，调整聚光灯颜色、位置、角度、强度、距离、衰减指数、方向、可见性、是否产生阴影属性(vue中使用three.js09)
聚光灯SpotLight使用一.聚光灯介绍二.如何使用聚光灯 1.创建聚光灯 2.聚光灯的属性 2.1颜色-color 2.2是否可见-visible 2.3角度-angle 2.4强度-inte ...
计算机桌面颜色如何设置标准,电脑调整桌面颜色设置_电脑桌面颜色设置
2016-12-09 09:18:44 具体方法如下:1.鼠标点击桌面右键,属性2.打开显示属性圣话框,选择"外观"选项高级3.打开高级外观对话框,选择"项目" ...
php对表格的处理,JavaScript_js处理表格对table进行修饰，js处理表格 1、行颜色间隔显示 - phpStudy...
js处理表格对table进行修饰 js处理表格 1.行颜色间隔显示 css样式:两个选择器 .one{ background-color:#33ffcc; } .two{ backgound-colo ...
AE导出合成时，如何调整背景颜色？
AE导出合成时,如何调整背景颜色? AE导出来的视频,背景为黑色添加一个纯色图层按ctrl+Y再新建一个任意颜色的固态层放在后面透色 AE如何将图层置为底层? ctrl + shift + [ A ...
echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标
本文已参与「新人创作礼」活动,一起开启掘金创作之路. 宝子们,今天又是开心的一天呢~ 上面先说注意事项 1.如果使用show hidden控制图表显示隐藏,某些切换效果很奇怪,比如饼图,会从左上角开始 ...
java制作海报工具类，java操作图片贴图，java给图片添加文字，调整字体颜色大小间距
工具类 java操作图片,给一个大图片贴小图片,给图片添加文字并调整文字颜色,大小,字体间距,把本地图片或者网络图片加载到缓冲区主要方法: imageIoRead方法,把图片加载到缓冲区 merge ...
利用色光三原色调整图片颜色
最近学习了android中的图片颜色的处理,现在来总结一下.android中存在三种方式来调整图片的颜色,来达到不同的效果.分别是:利用色光三原色来调整图片颜色,利用颜色矩阵来调整图片颜色,利用调整每 ...
Three.js 实现点击模型改变颜色
Three.js 实现点击模型改变颜色想实现点击模型,改变模型颜色的效果.在网上看了一些代码,发现特别搞笑,很多的博客给出的计算代码都是错误的,根本无法实现点击效果,还在不同的博客相互的复制,只能感 ...

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

点光源PointLight使用