ThingJS 提供一個模擬手電筒、車燈、等線性光照效果的光源—聚光燈，從一個點向錐形范圍內發射光線，官方型別是spotlight，查看>>demo
看我博客>> ThingJS聚光燈功能屬性介紹 到時候再打包官方示例出來（接近200個）
uj5u.com熱心網友回復：
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' 聚光燈可以追蹤滑鼠位置(開啟'跟隨物體'后失效)");
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/173033.html
標籤：JavaScript