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开发更简单。

相关文章
|
6月前
|
监控 前端开发 JavaScript
楼层导视软件
楼层导视软件通过直观的3D地图和精准的实时定位功能,帮助用户快速找到目的地,大大节省了时间和精力。
86 0
楼层导视软件
|
6月前
|
人工智能 自然语言处理 搜索推荐
博物馆地图导览系统:GIS与蓝牙定位技术实现地图导览与语音解说功能
维小帮博物馆地图导览系统结合GIS地图、蓝牙定位及智能语音解说,为访客提供沉浸式导览。系统采用自研地图引擎,精准构建三维模型,支持路径规划与个性化定制。蓝牙技术实现高精度室内定位及自动触发语音解说功能,无需手动操作。系统还支持多语言解说与AI语音生成,提升参观体验。目前已在多个博物馆应用并获好评。期待与您共同推进文化科技的融合发展!
170 3
|
8月前
|
数据可视化 搜索推荐 物联网
室内定位新突破:基于3D可视化与iBeacon技术的商场导航营销系统
**维小帮商场导航系统利用3D GIS、iBeacon定位、VR及物联网技术,提供3D导航、AR实景指引、设施查找及位置分享功能,提升顾客体验,增强商场品牌,推动经济效益增长。通过精准路径规划和沉浸式导航,用户能轻松找店,商场则塑造了智能形象,促进了交易量。**
175 1
室内定位新突破:基于3D可视化与iBeacon技术的商场导航营销系统
|
9月前
|
人工智能 前端开发 JavaScript
家居智能灯光窗帘控制器的设计与制作
家居智能灯光窗帘控制器的设计与制作
121 0
五款炫酷精美动态登录页面,彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
五款炫酷精美动态登录页面,彩虹气泡动态云层深海灯光水母炫酷星空蛛网HTMLCSS源码
204 0
|
物联网 芯片 智能硬件
客厅智能化控制升级:如何实现客厅灯光智能化精准调节?
应用速递栏目:应用速递是面向IoT厂商推荐芯片开放社区(OCC)上的典型应用案例,便于IoT厂商精准获取方案,快速实现产品落地。
313 0
客厅智能化控制升级:如何实现客厅灯光智能化精准调节?
|
开发工具 内存技术
启明云端分享:86盒智能新型开关面板UI设计
86 盒智能新型开关面板是基于公司 8ms GUI 平台开发的,用户新建工程后,在设计器实现 UI设计。针对86面板UI,启明云端在8ms开发工具平台上提供了丰富的素材,您可以一健克隆,快速出品产品DEMO。
409 0
启明云端分享:86盒智能新型开关面板UI设计
|
传感器 数据可视化 芯片
启明云端分享:可私人订制UI的86盒智能新型开关面板
今天给大家介绍的是86盒智能新型开关面板,86 盒智能新型开关面板是基于公司 8ms GUI 平台开发的,用户新建工程后,在设计器实现 UI 设计,在积木(Blockly)实现逻辑设计,代码编译成功后,通过烧录工具,将整个工程下载到 86 盒智能新型开关面板。
452 0
启明云端分享:可私人订制UI的86盒智能新型开关面板
|
数据可视化 物联网 5G
地铁站室内导航的新实践-实景化第一人称三维导航
地铁站、火车站、城市综合体、商业中心、政务办事中心等场所是人流汇集的重要节点,特别是一些换乘车站、地铁商业综合体等大型建筑,内部结构复杂,设施多样化,人流密集交织,如何让用户更方便的到达目的地,提升用户的体验,是运营者面临的一个重要课题。
887 0
地铁站室内导航的新实践-实景化第一人称三维导航
|
自然语言处理 数据可视化 JavaScript
基于WebGL的虚拟太阳系漫游技术实现 ThingJS 科幻片
3D可视化技术逐渐应用到现代多媒体的课堂教学中。虚拟太阳系是一款天文类的3D可视化应用,它借助3D在线浏览。
基于WebGL的虚拟太阳系漫游技术实现 ThingJS 科幻片