HT for Web (Hightopo) 3D场景环境配置（天空球，雾化，辉光，景深）
具体涉及到的知识点如下：
天空球
雾化
辉光
景深
这是最终效果：
天空球：
天空球（skybox）简单来说，就是用来在3d场景中模拟蓝天白云的效果。它是一个球形网格，完全包围3d场景，并填充了一张环形纹理作为天空背景。纹理通常是一个天空的全景图（例如星空、日落、云层等），通过在球形网格的表面上将纹理映射，呈现出一个连续的、无缝的天空效果。
在 ht for web中，天空球可以通过g3d.setskybox(node)来实现。需要注意的是，这里的node是ht.node类型的节点，该节点当作天空球来用时，不会出现在datamodel列表当中。
/*** 设置天空球** @memberof index3d*/addskybox() {const node = this.skybox = new ht.node();node.s({shape3d: sphere,shape3d.image: ./assets/skybox.jpg,});this.g3d.setskybox(node);}
下面两张图片分别是设置天空球与未设置天空球的效果：
当然，我们也可以将蓝天白云换成夜间图片：
this.skybox.setstyle(shape3d.image, ./assets/skybox_dark.jpg);
雾化：
雾化是一种常用的 3d 场景效果，可以让场景中的物体在远离摄像机的距离时变得模糊，像有一层白雾遮挡，从而增加深度感和真实感。在 ht 中，雾化效果可以通过设置场景的雾化属性来实现，代码如下：
/*** 雾化** @memberof index3d*/addfog() {this.g3d.setfogdisabled(false);this.g3d.setfogmode('linear'); // 线性模式this.g3d.setfogfar(30000);// this.g3d.setfogmode('exp2'); // 标准模式// this.g3d.setfogdensity(0.00007); // 浓度this.g3d.setfogcolor('green'); // 设置雾的颜色}
雾化分为两种模式：线性模式和标准模式。
[线性模式]
线性模式下支持设置近端距离和远端距离，
近端距离：默认为1，代表从该距离起物体开始受雾效果影响，可通过setfognear设置雾化近端距离、getfognear获取雾化近端距离。
远端距离：默认为2000，代表从该距离之后物体完全看不清, 可通过setfogfar设置雾化远端距离、getfogfar获取雾化远端距离。
[标准模式]
标准模式下雾化效果则会自动调整雾化效果，在该模式下，可通过setfogdensity设置雾化强度来调整雾化的效果， getfogdensity可以获取到雾化强度。
另外，我们还可通过g3d.setfogcolor(color)设置雾化效果的颜色:
辉光：
辉光是一种用于增强场景中元素外观和吸引力的视觉效果，其主要实现的是让各个模型进行自发光。常用于如夜景中灯光、道路流光等元素。
在ht中，可通过 g3d.enablepostprocessing('bloom', true/false) 开启/关闭整个场景的辉光效果：
/*** 开启辉光** @memberof index3d*/enablebloom() {const {g3d} = this;g3d.enablepostprocessing(bloom, true); // 开启辉光const module = this.bloom = g3d.getpostprocessingmodule(bloom);module.strength = 0.4; // 强度module.threshold = 0.33; // 阈值module.radius = 0.08; //范围g3d.setpostprocessingvalue('bloom', 'selective', true); // 开启辉光过滤g3d.iv(); // 刷新拓扑}disablebloom() {this.g3d.enablepostprocessing(bloom, false); // 关闭辉光}// 为直升机单独使用辉光效果this.helicopternode.s('bloom', true);
this.propellernode.s('bloom', true);
其中，enablepostprocessing('bloom', true)表示开启 bloom 效果；strength表示自发光亮度的强弱；threshold表示决定哪些颜色会发光；radius表示发光的范围。在代码的后半段，我们单独为直升机和螺旋桨开启了辉光效果。
景深：
景深（depth of field）可以用来突出画面中的主体元素。我们用单反相机或手机进行拍摄时，利用景深原理，通过聚焦到某一物体，可以使周围环境变得模糊，从而突出主要元素。就像下图一样：
如果要对于一个3d场景设置景深效果，在 ht 中，景深效果是使用特殊的贴图来模拟的。景深贴图一般使用黑色的透明png贴图实现，黑色部分为受景深影响的范围，透明部分不受景深影响。通过使用不同的景深贴图及参数，可以模拟出与现实一样的景深效果。
具体开启和配置景深的代码如下：
/*** 开启景深** @memberof index3d*/enabledof() {const {g3d} = this;g3d.enablepostprocessing(dof, true); // 开启景深const module = this.dof = g3d.getpostprocessingmodule(dof);module.aperture = 0.01; // 景深阀值module.image = ./assets/dof_all.png; // 景深贴图g3d.iv(); // 刷新拓扑}disabledof() {this.g3d.enablepostprocessing(dof, false); // 关闭景深}
其中，enablepostprocessing('dof', true)表示开启景深效果；aperture表示孔径，代表中间空白区域的大小，取值范围是 0 ~ 1，0 代表没有景深效果，1 代表景深效果最明显；image表示景深使用的贴图。
背景音乐
背景音乐不属于3d可视化的范围。不过既然有了直升机和相关场景，增加一个直升机飞行的声音可以让场景更加逼真。
/*** 初始化螺旋桨旋转声音** @memberof index3d*/initaudio() {this._audio = new audio(./assets/helicopter.mp3);this._audio.loop = true; // 循环播放}
要播放音乐可以使用audio。这里我们只需要找到一个螺旋桨的音频，然后对audio进行初始化及简单配置，就可以在场景加载后循环播放直升机的声音。
需要注意的是，目前浏览器对于音频自动播放有限制，即不允许在用户没有交互的情况下自动播放音频文件。如果我们执行了playaudio()，在console里面会遇到这个错误：
uncaught (in promise) domexception: play() failed because the user didn't interact with the document first.
要解决这个问题，我们可以在系统中增加一个监听函数，监听到某些事件后进行音频播放。常见的事件有如：
触摸事件：touchstart、touchmove、touchend、touchcancel
鼠标事件：mousedown、mouseup、click、dblclick、mousemove、mouseenter、mouseleave、mouseover、mouseout
键盘事件：keydown、keyup、keypress
/*** 监听document事件并播放音乐** @memberof index3d*/addeventmonitor() {document.addeventlistener(click, (event) = > {this._audio.play();});document.addeventlistener(keydown, (event) = > {this._audio.play();});}
总结
作为一款国产自研图形渲染引擎，ht for web对3d场景的各自效果支持还是非常强大的。在3d场景(graph3dview)中，可以通过设置天空球、雾化、辉光和景深等特效来增强场景的逼真度和美观度。其中，天空球可以通过设置ht.node类型的节点来实现，雾化可以通过设置场景的雾化属性来实现，辉光可以使用g3d.enablepostprocessing()方法来实现，景深可以使用特殊的贴图来模拟。此外，为了让场景更加逼真，还可以根据需要添加背景音乐。
不同的雷达目标生成器的构架、设计要求和准则
物联网控制系统智能一体化灌溉泵站
rfid如何改善医药冷链物流的现状
单片机控制步进电机的原理
光学传递函数的发展及其应用
HT for Web (Hightopo) 3D场景环境配置（天空球，雾化，辉光，景深）
电磁干扰(EMI)如何减轻PCB上的电磁干扰
FPGA和单片机的串行通信接口设计
如何利用地址来查询比特币交易
凌力尔特推出新款DC/DC控制器LTC3838
智能耳穿戴--全新的巨量的市场即将拉开大幕
谷歌云人工智能为机器学习提供帮助分析
三星否认正布局OLED电视
自架电子邮件系统收发不正常的几种原因
选择光纤线需知道的基础知识
【机器视觉】欢创播报 | 英伟达拿下全球90%的AI芯片市场
单片机自学笔记 51单片机自学好找工作吗
物联网产品变化快速 催动PCB设计技术更上一层
两款千元机正面较量，坚果Pro“硬”还是魅蓝Note6“美”？我选小米MIX2
LED照明标准光组件：实现LED产业链式标准化
天空球
雾化
辉光
景深
这是最终效果：
天空球：
天空球（skybox）简单来说，就是用来在3d场景中模拟蓝天白云的效果。它是一个球形网格，完全包围3d场景，并填充了一张环形纹理作为天空背景。纹理通常是一个天空的全景图（例如星空、日落、云层等），通过在球形网格的表面上将纹理映射，呈现出一个连续的、无缝的天空效果。
在 ht for web中，天空球可以通过g3d.setskybox(node)来实现。需要注意的是，这里的node是ht.node类型的节点，该节点当作天空球来用时，不会出现在datamodel列表当中。
/*** 设置天空球** @memberof index3d*/addskybox() {const node = this.skybox = new ht.node();node.s({shape3d: sphere,shape3d.image: ./assets/skybox.jpg,});this.g3d.setskybox(node);}
下面两张图片分别是设置天空球与未设置天空球的效果：
当然，我们也可以将蓝天白云换成夜间图片：
this.skybox.setstyle(shape3d.image, ./assets/skybox_dark.jpg);
雾化：
雾化是一种常用的 3d 场景效果，可以让场景中的物体在远离摄像机的距离时变得模糊，像有一层白雾遮挡，从而增加深度感和真实感。在 ht 中，雾化效果可以通过设置场景的雾化属性来实现，代码如下：
/*** 雾化** @memberof index3d*/addfog() {this.g3d.setfogdisabled(false);this.g3d.setfogmode('linear'); // 线性模式this.g3d.setfogfar(30000);// this.g3d.setfogmode('exp2'); // 标准模式// this.g3d.setfogdensity(0.00007); // 浓度this.g3d.setfogcolor('green'); // 设置雾的颜色}
雾化分为两种模式：线性模式和标准模式。
[线性模式]
线性模式下支持设置近端距离和远端距离，
近端距离：默认为1，代表从该距离起物体开始受雾效果影响，可通过setfognear设置雾化近端距离、getfognear获取雾化近端距离。
远端距离：默认为2000，代表从该距离之后物体完全看不清, 可通过setfogfar设置雾化远端距离、getfogfar获取雾化远端距离。
[标准模式]
标准模式下雾化效果则会自动调整雾化效果，在该模式下，可通过setfogdensity设置雾化强度来调整雾化的效果， getfogdensity可以获取到雾化强度。
另外，我们还可通过g3d.setfogcolor(color)设置雾化效果的颜色:
辉光：
辉光是一种用于增强场景中元素外观和吸引力的视觉效果，其主要实现的是让各个模型进行自发光。常用于如夜景中灯光、道路流光等元素。
在ht中，可通过 g3d.enablepostprocessing('bloom', true/false) 开启/关闭整个场景的辉光效果：
/*** 开启辉光** @memberof index3d*/enablebloom() {const {g3d} = this;g3d.enablepostprocessing(bloom, true); // 开启辉光const module = this.bloom = g3d.getpostprocessingmodule(bloom);module.strength = 0.4; // 强度module.threshold = 0.33; // 阈值module.radius = 0.08; //范围g3d.setpostprocessingvalue('bloom', 'selective', true); // 开启辉光过滤g3d.iv(); // 刷新拓扑}disablebloom() {this.g3d.enablepostprocessing(bloom, false); // 关闭辉光}// 为直升机单独使用辉光效果this.helicopternode.s('bloom', true);
this.propellernode.s('bloom', true);
其中，enablepostprocessing('bloom', true)表示开启 bloom 效果；strength表示自发光亮度的强弱；threshold表示决定哪些颜色会发光；radius表示发光的范围。在代码的后半段，我们单独为直升机和螺旋桨开启了辉光效果。
景深：
景深（depth of field）可以用来突出画面中的主体元素。我们用单反相机或手机进行拍摄时，利用景深原理，通过聚焦到某一物体，可以使周围环境变得模糊，从而突出主要元素。就像下图一样：
如果要对于一个3d场景设置景深效果，在 ht 中，景深效果是使用特殊的贴图来模拟的。景深贴图一般使用黑色的透明png贴图实现，黑色部分为受景深影响的范围，透明部分不受景深影响。通过使用不同的景深贴图及参数，可以模拟出与现实一样的景深效果。
具体开启和配置景深的代码如下：
/*** 开启景深** @memberof index3d*/enabledof() {const {g3d} = this;g3d.enablepostprocessing(dof, true); // 开启景深const module = this.dof = g3d.getpostprocessingmodule(dof);module.aperture = 0.01; // 景深阀值module.image = ./assets/dof_all.png; // 景深贴图g3d.iv(); // 刷新拓扑}disabledof() {this.g3d.enablepostprocessing(dof, false); // 关闭景深}
其中，enablepostprocessing('dof', true)表示开启景深效果；aperture表示孔径，代表中间空白区域的大小，取值范围是 0 ~ 1，0 代表没有景深效果，1 代表景深效果最明显；image表示景深使用的贴图。
背景音乐
背景音乐不属于3d可视化的范围。不过既然有了直升机和相关场景，增加一个直升机飞行的声音可以让场景更加逼真。
/*** 初始化螺旋桨旋转声音** @memberof index3d*/initaudio() {this._audio = new audio(./assets/helicopter.mp3);this._audio.loop = true; // 循环播放}
要播放音乐可以使用audio。这里我们只需要找到一个螺旋桨的音频，然后对audio进行初始化及简单配置，就可以在场景加载后循环播放直升机的声音。
需要注意的是，目前浏览器对于音频自动播放有限制，即不允许在用户没有交互的情况下自动播放音频文件。如果我们执行了playaudio()，在console里面会遇到这个错误：
uncaught (in promise) domexception: play() failed because the user didn't interact with the document first.
要解决这个问题，我们可以在系统中增加一个监听函数，监听到某些事件后进行音频播放。常见的事件有如：
触摸事件：touchstart、touchmove、touchend、touchcancel
鼠标事件：mousedown、mouseup、click、dblclick、mousemove、mouseenter、mouseleave、mouseover、mouseout
键盘事件：keydown、keyup、keypress
/*** 监听document事件并播放音乐** @memberof index3d*/addeventmonitor() {document.addeventlistener(click, (event) = > {this._audio.play();});document.addeventlistener(keydown, (event) = > {this._audio.play();});}
总结
作为一款国产自研图形渲染引擎，ht for web对3d场景的各自效果支持还是非常强大的。在3d场景(graph3dview)中，可以通过设置天空球、雾化、辉光和景深等特效来增强场景的逼真度和美观度。其中，天空球可以通过设置ht.node类型的节点来实现，雾化可以通过设置场景的雾化属性来实现，辉光可以使用g3d.enablepostprocessing()方法来实现，景深可以使用特殊的贴图来模拟。此外，为了让场景更加逼真，还可以根据需要添加背景音乐。
不同的雷达目标生成器的构架、设计要求和准则
物联网控制系统智能一体化灌溉泵站
rfid如何改善医药冷链物流的现状
单片机控制步进电机的原理
光学传递函数的发展及其应用
HT for Web (Hightopo) 3D场景环境配置（天空球，雾化，辉光，景深）
电磁干扰(EMI)如何减轻PCB上的电磁干扰
FPGA和单片机的串行通信接口设计
如何利用地址来查询比特币交易
凌力尔特推出新款DC/DC控制器LTC3838
智能耳穿戴--全新的巨量的市场即将拉开大幕
谷歌云人工智能为机器学习提供帮助分析
三星否认正布局OLED电视
自架电子邮件系统收发不正常的几种原因
选择光纤线需知道的基础知识
【机器视觉】欢创播报 | 英伟达拿下全球90%的AI芯片市场
单片机自学笔记 51单片机自学好找工作吗
物联网产品变化快速 催动PCB设计技术更上一层
两款千元机正面较量，坚果Pro“硬”还是魅蓝Note6“美”？我选小米MIX2
LED照明标准光组件：实现LED产业链式标准化