推荐：将NSDT场景编辑器加入你的3D工具链

3D工具集：NSDT简石数字孪生

辅助调节光源阴影

光源阴影范围，也可以通过GUI界面可视化调节，这样更形象。

关于gui的介绍，参考入门部分18. gui.js库(可视化改变三维场景)(opens new window)

阴影范围可视化调节

• 根据工厂尺寸数量级预先设置.shadow.camera，然后通过GUI调试选择一个合适的值
• .shadow.camera的位置通过光源的位置调试。
• .shadow.camera参数改变后，注意执行cameraHelper.update();更新

// 阴影子菜单
const shadowFolder = gui.addFolder('平行光阴影');
const cam = directionalLight.shadow.camera;
// 相机left、right等属性变化执行.updateProjectionMatrix();
// 相机变化了，执行CameraHelper的更新方法.update();
shadowFolder.add(cam,'left',-500,0).onChange(function(v){
    cam.updateProjectionMatrix();//相机更新投影矩阵
    cameraHelper.update();//相机范围变化了，相机辅助对象更新
});

其他参数类似设置

shadowFolder.add(cam,'right',0,500).onChange(function(v){
    cam.updateProjectionMatrix();
    cameraHelper.update();
});
shadowFolder.add(cam,'top',0,500).onChange(function(v){
    cam.updateProjectionMatrix();
    cameraHelper.update();
});
shadowFolder.add(cam,'bottom',-500,0).onChange(function(v){
    cam.updateProjectionMatrix();
    cameraHelper.update();
});
shadowFolder.add(cam,'far',0,1000).onChange(function(v){
    cam.updateProjectionMatrix();
    cameraHelper.update();
});

上一篇：ThreeJS教程：工厂(模拟太阳光阴影) (mvrlink.com)

下一篇：ThreeJS教程：精灵模型Sprite (mvrlink.com)