关于javascript:ThingJS10种聚光灯的属性被打包了

40次阅读

共计 2618 个字符，预计需要花费 7 分钟才能阅读完成。

创立聚光灯光源非常简单，只有指定色彩（并设置相干属性），而后增加到场景中即可。ThingJS 打包了 10 种聚光灯的属性在 3D 控制面板中开发。
光源 (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，小利用关上物联网的大世界！

正文完