ThingJS：如何基於JS語法來設置聚光燈功能

SpotLight聚光燈具備錐形效果的光源,能夠產生陰影,相似咱們平常生活中的手電筒。ThingJS如何基於JS語法來設置聚光燈功能呢？光源 (Lights) 是每一個場景的重要組成部分。網格和紋理決定了場景的形狀和外觀，而光源則決定了三維環境的顏色和氛圍。您可能會在每一個場景中使用多個光源。讓它們一塊兒工做須要一些實踐，但結果卻至關驚人。瀏覽器

ThingJS 提供一個模擬手電筒、車燈、等線性光照效果的光源—聚光燈，從一個點向錐形範圍內發射光線，官方類型是spotlight。聚光燈是3D世界中的一種光源類型，其燈光從一點發出，沿着某一個方向照射出一個錐形光照範圍。聚光燈近似於一個有夾角範圍限定的點光源。聚光燈可用於模擬舞臺、汽車車頭燈，手電筒，檯燈等光源效果，可添加至3D容器、攝像機等對象下方，對其中全部對應的對象生效。app

聚光燈屬性介紹

燈光角度聚光燈的燈光聚光角度。亮度光線的明亮程度。半影投射光線邊緣的虛化，默認爲0，不模糊。距離光源照射的距離。默認爲0，若是爲0，表示光源不受距離影響，可照射至無窮遠。高度光源照射的高度。聚光燈有方向和位置，而且以圓錐的形狀製造燈光。影子光源被物體所遮蔽而產生陰影效果，默認關閉。輔助線默認顯示。這種燈光從一點發出，在一個方向按照—個錐形的範圍照射，呈現圓錐的形狀。跟隨物體經過設定追蹤對象，可將該聚光燈設定爲追光燈。顏色光線的顏色，對象的顏色受光線顏色影響。 oop

3dmax之中，聚光燈是室內打光的基礎，這種類型的3dmax燈光能夠方便咱們快速提亮目標區域的亮度，若是目標物體是動態的呢？官方採用JS mousemove鼠標移動事件來實現目標物體運動。 mousemove 事件是一個實時響應的事件，當鼠標指針的位置發生變化時（至少移動一個像素），就會觸發 mousemove 事件。該事件響應的靈敏度主要參考鼠標指針移動速度的快慢以及瀏覽器跟蹤更新的速度。官方在物體上方5米建立一個聚光燈，並讓物體沿着路徑方向不斷循環，實現「跟隨物體」的聚光燈效果。光打在了移動的物體上，照射範圍和角度隨着物體移動變化而變化。url

跟隨物體的聚光燈代碼示例以下。完整版請登陸ThingJS平臺-場景效果-聚光燈查看。3d

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,不單單是JS開發專家，也是基於JS開發3D炫酷場景的行家！指針