我有一个3D可视化官方教程,如何打聚光灯?官方示例打包(200个)

ThingJS_小锘 2020-10-15 11:09:26
ThingJS 提供一个模拟手电筒、车灯、等线性光照效果的光源—聚光灯,从一个点向锥形范围内发射光线,官方类型是spotlight,查看>>demo

看我博客>> ThingJS聚光灯功能属性介绍 到时候再打包官方示例出来(接近200个)

...全文
119 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
ThingJS_小锘 2020-10-15
  • 打赏
  • 举报
回复
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' 聚光灯可以追踪鼠标位置(开启'跟随物体'后失效)");
})

87,994

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧