ThingJS让3D灯光管理更容易!

简介: 场景中的灯光与真正的灯光不同,它需要在渲染时间上多花功夫

场景中的灯光与真正的灯光不同,它需要在渲染时间上多花功夫,灯光设置越复杂,渲染所花费的时间越多,ThingJS让灯光管理变简单。
灯光有助于表达一种情感,或引导观众的目光看向具体的位置。灯光能够反映一种基调,对整个图像的外观至关重要。下面教你关于打灯光的技巧,以及轻便的开发方法。
ThingJS提供一套操作简便的灯光配置项,只要配置结束后,记得点击生成代码块并执行,一套完整的初级灯光效果就出来了。
1.jpg

主灯光

主灯光对象是对主光源的控制代码,可设置的变量包括阴影、颜色、强度和打灯角度。主光源通常放在四分之三的位置上,位置是从物体的正面转45度,并从中心线向上转45度。夜晚的场景很适用于单一的主光源,没有其他的自然光,其他的地方黑得不见五指,这正符合单一条件的主光源效果。
### 环境光
在主灯光对象之前,还有对环境光、半球光照的配置。这两种光源均是天然漫反射的光线,在自然环境中这是一种自然的光亮,不至于让整个环境置于黑箱之中。环境光能够提高整个场景的亮度。半球光照特地用来补充地面或建筑角落里的光线,柔化阴影或减少阴影区域,符合物联网可视化场景的需求。

背景光

第二光源对象也需要设置具体的位置和发光对象的颜色,作为主光源的一种补充光源,感觉会更加逼真。事实上,自然的光线很少只有一种光线照明,而是多种颜色的灯光组合,提供一种景深的感觉。
在3DMAX中打灯是一个复杂的技巧,真正学会操作很费时间,相对来说ThingJS就轻量很多,通过提供场景灯光的配置选项,再生成代码块,方便开发人员迅速掌握,层次效果更丰富。
场景灯光通过app.lighting属性设置,难度一星,代码示例如下。

var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/chinesehouse'
});

app.on('load', function (ev) {
    app.camera.position = [18.217000353088125, 16.96513529990897, 11.90387798709408];
    app.camera.target = [-0.92, 2.1, 2.7];
})

// 环境光对象
var ambientLight = {
    intensity: 0.4,
    color: '#FFFFFF',
};
// 半球光照
var hemisphereLight = {
    intensity: 0.5,
    color: '#FFFFFF',
    groundColor: '#202020',
};
// 主灯光对象
var mainLight = {
    shadow: true,
    intensity: 0.6,
    color: '#FFFFFF',
    alpha: 120,
    beta: 0,
};
// 第二光源对象
var secondaryLight = {
    shadow: false,
    intensity: 0,
    color: '#FFFFFF',
    alpha: 0,
    beta: 0,
};
// 全局配置
var config = {
    ambientLight,
    hemisphereLight,
    mainLight,
    secondaryLight
}

new THING.widget.Button('调整场景灯光', function () {
    // 设置灯光
    app.lighting = config;
})

ThingJS把js代码封装形成简单的配置项,让3D开发更简单。

相关文章
|
前端开发 JavaScript 数据安全/隐私保护
推荐6款超级好看的开源中后台前端框架
推荐6款超级好看的开源中后台前端框架
3123 0
|
API Android开发 开发者
Android 12 适配指南——SplashScreen
Android 12(API 31)引入了 SplashScreen 相关API,用于开发Android应用的启动页。 SplashScreen相关API的引入影响在Andorid 12设备上运行的所有应用。若开发者未进行SplashScreen的适配工作,在应用冷启动和温启动时,可能会呈现两个启动页先后出现的情况(Android SplashScreen启动页 + Android应用自定义开发的启动页或引导页)。
3189 0
Android 12 适配指南——SplashScreen
|
Linux API 内存技术
Linux Kernel中AEP的现状和发展
AEP简介AEP是Intel推出的一种新型的非易失Optane Memory设备,又被称作Apache Pass,所以一般习惯称作AEP。在这之前也有类似的设备称作NVDIMM或PMEM,目前Linux创建的AEP设备节点也是叫做pmem(如/dev/pmem0),所以本文中NVDIMM或PMEM都指AEP。
5297 0
|
7月前
|
编解码 人工智能 API
HappyHorse(快乐小马)介绍指南:150亿参数量、Transformer单流架构,生成视频定价最低0.9元/秒
HappyHorse(快乐小马)是阿里ATH创新事业部研发的原生多模态AI视频生成大模型,2026年4月登顶全球Video Arena双榜。采用40层单流Transformer架构,首创音画联合生成技术,15B参数,支持1080P/3–15秒视频生成,单H100卡38秒出片,中文理解与人物一致性突出,已通过阿里云百炼、官网及千问App开放灰度测试。
5126 8
|
传感器 算法 机器人
【IMU数据与GPS融合的预积分方法】基于流形的IMU预积分,用于高效的视觉惯性最大后验估计、SE3姿势区分为IMU(Matlab代码实现)
【IMU数据与GPS融合的预积分方法】基于流形的IMU预积分,用于高效的视觉惯性最大后验估计、SE3姿势区分为IMU(Matlab代码实现)
447 4
|
存储 安全 Shell
vulnhub靶机实战_DC-4
本文介绍了DC-4靶机渗透测试的完整过程,包括靶机下载、环境搭建、信息扫描、漏洞利用、提权以及最终获取flag的详细步骤。通过使用工具如nmap、Hydra进行端口扫描与密码爆破,结合反向Shell与teehee命令实现权限提升,最终成功获取系统flag。内容详实,适合网络安全学习与实践。
1804 0
vulnhub靶机实战_DC-4
|
11月前
|
机器学习/深度学习 人工智能 运维
构建AI智能体:六十二、金融风控系统:基于信息熵和KL散度的异常交易检测
本文介绍了一种基于信息论的智能金融风控系统,通过KL散度、信息增益和熵等核心概念构建欺诈检测框架。系统首先生成模拟金融交易数据,区分正常与欺诈交易;然后计算各特征的数据熵和KL散度,量化分布差异;再训练随机森林模型进行预测,并创新性地结合概率和不确定性计算风险得分。实验表明,设备风险是最强欺诈指标,系统AUC达1.0,能有效识别典型欺诈模式(大额、深夜、高频交易)。该方法将抽象信息论转化为实用解决方案,在保持高性能的同时增强了模型可解释性,为智能风控提供了量化分析框架。
897 3
敏捷开发 小程序 API
3026 0
|
运维 网络协议
网络工程师:BGP命令大全
【7月更文挑战第5天】
786 0
网络工程师:BGP命令大全
|
存储 安全 数据管理
磁盘分区全解:快速搞定硬盘分区
本文介绍了磁盘分区的重要性和好处,如数据管理、性能提升和安全增强,并为初学者提供了Windows系统下的磁盘分区指南。文章提到了三种磁盘分区工具:磁盘管理器、Diskpart命令行工具和第三方软件DiskGenius。同时,详细阐述了如何在磁盘管理器中创建新分区、使用DiskGenius一键重新分区、拆分现有分区以及通过Diskpart命令创建分区的步骤。最后,文章强调了磁盘分区在数据管理和系统优化中的价值。