聚光燈光源從一個點向一個方向發出,沿着一個圓錐,光照越遠它的尺寸就越大。ThingJS場景效果加入新成員—聚光燈。
光源 (Lights) 是每個場景的重要組成部分。網格和紋理決定了場景的形狀和外觀，而光源則決定了三維環境的顔色和氛圍。您可能會在每個場景中使用多個光源。讓它們一起工作需要一些實踐，但結果卻相當驚人。
ThingJS 提供一個模拟手電筒、車燈、等線性光照效果的光源—聚光燈，從一個點向錐形範圍内發射光線，官方類型是spotlight。
聚光燈是3D世界中的一種光源類型，其燈光從一點發出，沿着某一個方向照射出一個錐形光照範圍。聚光燈近似于一個有夾角範圍限定的點光源。聚光燈可用于模拟舞台、汽車車頭燈，手電筒，台燈等光源效果，可添加至3D容器、錄影機等對象下方，對其中所有對應的對象生效。
聚光燈屬性介紹
燈光角度
聚光燈的燈光聚光角度。
亮度
光線的明亮程度。
半影
投射光線邊緣的虛化，預設為0，不模糊。
距離
光源照射的距離。預設為0，如果為0，表示光源不受距離影響，可照射至無窮遠。
高度
光源照射的高度。聚光燈有方向和位置，并且以圓錐的形狀制造燈光。
影子
光源被物體所遮蔽而産生陰影效果，預設關閉。
輔助線
預設顯示。這種燈光從一點發出，在一個方向按照—個錐形的範圍照射，呈現圓錐的形狀。
跟随物體
通過設定追蹤對象，可将該聚光燈設定為追光燈。
顔色
光線的顔色，對象的顔色受光線顔色影響。
3dmax之中，聚光燈是室内打光的基礎，這種類型的3dmax燈光可以友善我們快速提亮目标區域的亮度，如果目标物體是動态的呢？官方采用JS mousemove滑鼠移動事件來實作目标物體運動。
mousemove 事件是一個實時響應的事件，當滑鼠指針的位置發生變化時（至少移動一個像素），就會觸發 mousemove 事件。該事件響應的靈敏度主要參考滑鼠指針移動速度的快慢以及浏覽器跟蹤更新的速度。官方在物體上方5米建立一個聚光燈，并讓物體沿着路徑方向不斷循環，實作“跟随物體”的聚光燈效果。光打在了移動的物體上，照射範圍和角度随着物體移動變化而變化。
跟随物體的聚光燈代碼示例如下。完整版請登入ThingJS平台-場景效果-聚光燈檢視。
var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse',
});
// 參數
var dataObj = {
'type': 'SpotLight',
'lightAngle': 30,
'intensity': 1,
'penumbra': 0.5,
'castShadow': false,
'position': null,
'height': 0,
'color': 0xFFFFFF,
'distance': null,
'target': null,
'helper': true,
};
// 叉車
let car1;
let car2;
// 目前燈光
let curLight;
let curLightPosition;
// 建立聚光燈方法
function createSpotLight(position, target) {
dataObj['lightAngle'] = 30;
dataObj['intensity'] = 0.5;
dataObj['penumbra'] = 0.5;
dataObj['castShadow'] = false;
dataObj['position'] = position;
dataObj['distance'] = 25;
dataObj['color'] = 0xFFFFFF;
dataObj['helper'] = true;
dataObj['follow'] = false;
//建立聚光燈
var spotLight = app.create(dataObj);
curLight = spotLight;
curLightPosition = spotLight.position;
createSpotLightControlPanel(spotLight);
}
……
// 注冊滑鼠移動事件,檢查是否按下'shift'鍵, 按下設定聚光燈跟随滑鼠位置
app.on('mousemove', function (ev) {
if (!curLight) {
return;
}
if (!ev.shiftKey) {
return;
}
var pickedPosition = ev.pickedPosition;
if (pickedPosition) {
curLight.lookAt(pickedPosition);
}
})
// 注冊場景load事件
app.on('load', function (ev) {
// 主燈強度設定為0,突出聚光燈效果
app.lighting = {
mainLight: {
intensity: 0
}
};
// 擷取場景内id為'car01' 和 'car02' 的叉車
car1 = app.query('car01')[0];
car2 = app.query('car02')[0];
// 參數1: 在car2上方5米建立一個聚光燈
// 參數2: 初始target設定為car1的位置
createSpotLight(THING.Math.addVector(car2.position, [0, 5, 0]), car1.position);
// 建立一個圓形路徑
var path = [];
var radius = 6;
for (var degree = 0; degree <= 360; degree += 10) {
var x = Math.cos(degree * 2 * Math.PI / 360) * radius;
var z = Math.sin(degree * 2 * Math.PI / 360) * radius;
path.push(THING.Math.addVector(car1.position, [x, 0, z]));
}
// 讓 car1 沿圓形路徑運動
car1.movePath({
orientToPath: true, // 物體移動時沿向路徑方向
path: path,
time: 10 * 1000,
// 循環類型
// THING.LoopType.Repeat 不斷循環
// THING.LoopType.PingPong 往複循環
loopType: THING.LoopType.Repeat
});
console.log("按住'shift' 聚光燈可以追蹤滑鼠位置(開啟'跟随物體'後失效)");
}) ThingJS，場景效果基礎打好了，讓你的項目應用更加輕松！