three.js聚光灯SpotLight使用，调整聚光灯颜色、位置、角度、强度、距离、衰减指数、方向、可见性、是否产生阴影属性(vue中使用three.js09) |
您所在的位置：网站首页 › maya聚光灯不亮 › three.js聚光灯SpotLight使用，调整聚光灯颜色、位置、角度、强度、距离、衰减指数、方向、可见性、是否产生阴影属性(vue中使用three.js09) |
three.js聚光灯SpotLight使用，调整聚光灯颜色、位置、角度、强度、距离、衰减指数、方向、可见性、是否产生阴影属性(vue中使用three.js09)
|
聚光灯SpotLight使用
一、聚光灯介绍二、如何使用聚光灯1.创建聚光灯2.聚光灯的属性2.1颜色-color2.2是否可见-visible2.3角度-angle2.4强度-intensity2.5距离-distance2.6光照衰减指数-decay2.7照射面光影衰减百分比-penumbra2.8目标-target2.9位置-position2.10光强衰减指数-exponent2.11仅生成阴影-onlyShadow2.12阴影偏移-shadow.bias2.13投影方式可见-shadow.camera.visible2.14投影远点-shadow.camera.far2.15投影近点-shadow.camera.near2.16投影视场-shadow.camera.fov2.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是否可见-visibleSpotLight对象的visible属性是用来控制光源是否可见，该属性继承自基类Object3D，使用很简单，该属性时布尔类型，只要赋给它true或false即可 this.spotLight.visible = true //显示聚光灯 this.spotLight.visible = false //不显示聚光灯 this.spotLight.visible = this.lightProperties.visible //示例中动态修改聚光灯是否可见 2.3角度-angleangle属性是用来设置从聚光灯的位置开始可以辐射的范围，单位是弧度，应该不超过 Math.PI/2。默认值为 Math.PI/3 // 聚光灯的角度设置为Math.PI/3 spotLight.angle= Math.PI/3 2.4强度-intensityintensity属性是用来设置聚光灯的强度，默认值是1，如果设置成0那什么也看不到，该值越大，点光源看起来越亮 // 聚光灯强度设置为2 spotLight.intensity = 2 2.5距离-distancedistance属性表示光源的照射距离，该属性决定了光源可以照射多远，如果将该属性的值设置为4，那么从点光源的位置开始光线强度会慢慢衰减，到距离为4的位置衰减为0，也就是距离超过4将看不到点光源发出的光 // 聚光灯距离设置为20 spotLight.distance = 20 2.6光照衰减指数-decaydecay属性用来表示随着距离光照强度的衰减速度，值越大衰减的越快 当等于2时，衰减效果与现实世界的光衰减雷同，默认值为1 2.7照射面光影衰减百分比-penumbrapenumbra属性表示照射面光影衰减百分比，取值在0和1之间， 默认值为 0.0 2.8目标-targettarget属性用来决定光照的方向，一般会指向一个对象 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位置-positionposition属性表示光源的发光位置，该属性继承自基类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仅生成阴影-onlyShadowonlyShadow属性来控制是否值生成阴影。如果此属性设置为 true，则该光源只生成阴影，而不会在场景中添加任何光照 2.12阴影偏移-shadow.biasshadow.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代码 是否展示环境光 环境光颜色 是否展示聚光灯 聚光灯颜色 {{item.name}} {{item.value}} target 是否产生阴影 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) } } } #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; } |
【本文地址】
今日新闻 |
推荐新闻 |