SpotLight 聚光灯光源

—> Light —> Object3D

SpotLight 是一种锥形光源, 它有特定的方向性, 需要给它指定目标 target. 手电筒的光就是生活中的点光源的一个例子. 在下面演示的 'target 目标'的下拉框中, 可以选择场景中已经有的几何体:Cube, Sphere 和 Fish. 当然, 你也可以重新自定义一个 Object3D 作为 target, 随意修改 x, y, z, 让 SpotLight 指向它. 因为 SpotLight 是锥形, 所以你会看到 Cube 和 Fish 的某些部位不显示, 仿佛 被切割了一样, 把 angle 调节的大些, 能够获取更大的展示区域.

function SpotLight( color, intensity, distance, angle, penumbra, decay ) { } var light = new THREE.SpotLight(0xffff00, 1, 50); light.position.set(0, 0, 5); scene.add(light); var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}), sphereMaterial = new THREE.MeshStandardMaterial({color:0xffffff}), fishMaterial = new THREE.MeshPhongMaterial({color: 0xffffff, side:THREE.DoubleSide}); var targetObj = new THREE.Object3D(); targetObj.position.set( 0, 0, 5 ); scene.add(targetObj); light.target = targetObj;

Attributes

type : String

Default value : 'SpotLight'
Description : 类型.

isSpotLight : Boolean

Default value : true (只读)
Description : 类型是否为SpotLight.

angle : Float

Default value : Math.PI / 3
Description : 角度.

decay : Float

Default value : 1
Description : 光线沿距离衰减的量. 在物理正确的模式下, decay = 2 会引导物理上逼真的光线衰减.

distance : Float

Default value : 0
Description : 光源照射到的距离.

penumbra : Float

Default value : 0
Description : 由半影引起的聚光锥衰减的百分比:0 ~ 1.

shadow : SpotLightShadow

Default value : new SpotLightShadow()
Description : 阴影.

target : Object3D

Default value : new Object3D()
Description : 投射目标.

图解API

聚光灯光源的模型就是一个圆锥形, 可通过 SpotLightHelper 聚光灯助手来演示. 圆锥以为的地方, 就不会再接收到光照了. 点开查看

addSpotLight(-3, 10, 7, 0xffff00, Math.PI/6); addSpotLight(0,12,0, 0xffffff, Math.PI/4); var geometry = new THREE.SphereGeometry(3, 64, 64), material = new THREE.MeshPhongMaterial({color: 0x663399}); mesh = new THREE.Mesh( geometry, material ); mesh.castShadow = true; scene.add(mesh); var floorGeometry = new THREE.PlaneBufferGeometry( 50, 50), floorMaterial = new THREE.MeshPhongMaterial( { color: 0x666666 }), floor = new THREE.Mesh( floorGeometry, floorMaterial ); floor.rotation.x = -Math.PI/2; floor.position.y = -9; floor.position.z = -10; floor.receiveShadow = true; scene.add( floor ); function addSpotLight(x,y,z,color,angle){ var light = new THREE.SpotLight(color, 1, 50); light.position.set(x,y,z); light.angle = angle; light.decay = 1; light.distance = 60; scene.add(light); light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 70, 1, 8, 80 ) ); light.shadow.bias = -0.000222; light.shadow.mapSize.width = 1024; light.shadow.mapSize.height = 1024; var helper = new THREE.SpotLightHelper(light, color); scene.add(helper); }