3D灯光教程仅需三个步骤,用ThingJS体验极速开发!

ThingJS加入聚光灯功能,开发更轻松 聚光灯是最常使用的光源之一,特别是如果我们想要使用阴影的话。ThingJS场景效果加入聚光灯的功能,封装开发更轻松。 光源 (Lights) 是每个场景的重要组成部分。网格和纹理决定了场景的形状和外观,而光源则决定了三维环境的颜色和氛围。您可能会在每个场景中使用多个光源。让它们一起工作需要一些实践,但结果却相当惊人。 ThingJS 提供一个模拟手电筒、车灯、等线性光照效果的光源—聚光灯,从一个点向锥形范围内发射光线,官方类型是spotlight。 聚光灯是3D世界中的一种光源类型,其灯光从一点发出,沿着 阅读详情

人生苦短,3D灯光教程仅需三个步骤,用ThingJS体验极速开发!
灯光有助于表达一种情感,或引导观众的目光看向具体的位置。灯光能够反映一种基调,对整个图像的外观至关重要。下面教你关于打灯光的技巧,以及轻便的开发方法。
ThingJS提供一套操作简便的灯光配置项,只要配置结束后,记得点击生成代码块并执行,一套完整的初级灯光效果就出来了。
1.jpg

主灯光

主灯光对象是对主光源的控制代码,可设置的变量包括阴影、颜色、强度和打灯角度。主光源通常放在四分之三的位置上,位置是从物体的正面转45度,并从中心线向上转45度。夜晚的场景很适用于单一的主光源,没有其他的自然光,其他的地方黑得不见五指,这正符合单一条件的主光源效果。

环境光

在主灯光对象之前,还有对环境光、半球光照的配置。这两种光源均是天然漫反射的光线,在自然环境中这是一种自然的光亮,不至于让整个环境置于黑箱之中。环境光能够提高整个场景的亮度。半球光照特地用来补充地面或建筑角落里的光线,柔化阴影或减少阴影区域,符合物联网可视化场景的需求。

背景光

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

var app = new THING.App({
   
   
    url: 'https://www.thingjs.com/static/models/chinesehouse'
}
ThingJS官方示例(三):3D标记“Marker”跳跃、闪烁和发光动画效果 物联网3D可视化场景中,经常用到标注元素作为线路标绘、业务区域标绘,比如定位物联网设备或危险源位置,进行安全作业或者路径导航规划,远程解决难题。 ThingJS的3D标记“Marker”,往往用于顶牌,有两个主要作用: 传入div, image或canvas写文字,展现在3D场景中或绑定在3D物体上; 添加一个图片放置到你希望的位置,作为孩子添加到对象身上,随着对象一同移动。 注意,标记Marker受距离远近影响,呈现近大远小的 3D 效果,也会在 3D 空间中实现前后遮挡。 功能列表更新Ma 阅读详情

相关推荐

官方示例之地球模块七:创建GeoLine

/** * 该示例展示了创建不同样式的 GeoLine */ var app = new THING.App(); app.background = [0, 0, 0] THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () { // 创建一个地图 var map = app.create({ type: 'Map', attribution: 'Google', style

ThingJS的博客 405

Unity3D灯光与渲染学习之(一):天空盒、灯光以及色彩空间

最近在学习Siki学院中的U3D渲染,将学习的笔记进行整理,方便日后查阅,也方便各位交流学习。课程大纲如下:先介绍灯光渲染的大致内容,灯光效果主要分为实时光照(RealTime) 和烘焙(Baked),实时光照根据场景中的运动信息,实时更新光照信息,比较耗费性能。而烘焙是将光照信息照射到静态物体上的影响生成光照贴图,之后便可保存灯光效果并删除灯光。接下来用几篇博客简要分析下其中的关键技术。传送门:...

s1314_JHC的博客 1万+

ThingsBoard源码分析 —— 调试环境搭建

摘要: 此文档安装系统为win7 64位,因为使用虚拟机,所以安装软件位置都为C盘,涉及到编译时会有权限问题,和造成电脑很卡,建议大家不要安装在C盘!!!! 1. 依赖工具 2. 源码调试 2.1 源码拉取 2.2 源码编译 2.3 IDE(编译器)导入 3. 数据源处理 4. 登录ThingBoard ​​​​​​1、依赖工具 —JDK ...

julyqian的博客 2万+

手把手教你实现聚光灯效果

聚光灯是一种特殊的点光源,它能够朝着一个方向投射光线。聚光灯投射出的是类似圆锥形的光线,这与我们现实中看到的聚光灯是一致的。其灯光从一点发出,沿着某一个方向照射出一个锥形光照范围。聚光灯近似于一个有夹角范围限定的点光源。聚光灯可用于数字孪生可视化场景中模拟舞台、汽车车头灯,手电筒,台灯等光源效果,可添加至3D容器、摄像机等对象下方,对其中所有对应的数字孪生可视化对象生效。 在数字孪生可视化场景中因为项目需要聚光灯是最常使用的光源之一,特别是如果我们想要使用阴影的话也需要用到聚光灯。ThingJS内的聚光灯

ThingJS的博客 3256

官方示例之地球模块六:创建GeoPoint

/** * 该示例展示了创建不同样式的 GeoPoint */ var app = new THING.App(); app.background = [0, 0, 0]; THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () { // 创建一个地图 var map = app.create({ type: 'Map', attribution: 'Google', sty

ThingJS的博客 575

官方示例之地球模块九:创建GeoPolygon

/** * 该示例展示了创建不同样式的 GeoPolygon */ var app = new THING.App(); app.background = [0, 0, 0] THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () { // 创建一个地图 var map = app.create({ type: 'Map', attribution: 'Google', st

ThingJS的博客 442

官方示例之地球模块五:ThingLayer

/** * 该示例展示了如何向 ThingLayer 中添加点、线、面数据 */ var app = new THING.App(); app.background = [0, 0, 0]; THING.Utils.dynamicLoad('https://www.thingjs.com/uearth/uearth.min.js', function () { // 创建一个地图 var map = app.create({ type: 'Map', attribution: 'Googl

ThingJS的博客 443

PostgreSQL和PostGIS安装、导入shp或gdb格式数据至数据库、使用QGIS测试上传PstGIS数据库操作和代码

本文详细介绍了postgresql和postgis安装步骤,并且使用postgis测试上传shp和gdb格式的矢量数据至数据库,包括步骤和代码,并使用qgis连接postgis数据查看数据库里的数据,数据依旧和本地数据一样可查看可编辑,方便后续数据底座开发和服务。

weixin_46456488的博客 1246

快速玩转 Llama2!机器学习 PAI 最佳实践(一)—低代码 Lora 微调及部署

本实践将采用阿里云机器学习平台PAI-快速开始模块针对 Llama-2-7b-chat 进行开发。PAI-快速开始支持基于开源模型的低代码训练、布署和推理全流程,适合想要快速开箱体验预训练模型的开发者。

阿里云云栖号 1767

Vivado实战:从零封装AXI-Lite接口的呼吸灯IP核

本文提供了一份详细的Vivado实战指南,手把手教你如何将Verilog编写的呼吸灯模块封装成带AXI-Lite接口的IP核。内容涵盖从创建IP框架、编写核心逻辑、连接AXI总线到在ZYNQ系统中调用并编写C程序进行软硬件协同测试的完整流程,是掌握FPGA软硬件协同设计的关键实践。

weixin_29233333的博客 598

KEPServerEX与三菱iQ-R系列PLC通讯

KEPServerEX与三菱iQ-R系列PLC通讯Mitsubishi Ethernet北京东方鼎晨科技有限公司目 录1. 前言2. 三菱PLC端相关设置3. Kepware端相关设置KEPServerEX是美国PTC Kepware公司生产的具有行业性的连接平台,KEPServerEX支持150多种通讯协议,用于向您的所有应用程序提供单一来源的工业自动化数据。该平台的设计使用户能够通过一个直观的用户界面来连接、管理、监视和控制不同的自动化设备和软件应用程序。KEPServerEX利用OPC(自动化产业的互

qq_28768521的博客 8097

hcaptcha无感验证码逆向实战:从接口分析到环境补全

本文详细解析了hcaptcha无感验证码的逆向实战过程。通过分析核心接口与加密逻辑,重点介绍了采用环境补全策略来模拟真实浏览器环境,从而绕过验证码检测。文章提供了从接口抓包、剖析hsw.js加密核心到使用Node.js搭建模拟环境的完整步骤,为自动化操作提供了一种稳健的解决方案。

weixin_29324401的博客 1156

【WRF数据准备】土地利用数据-MODIS MCD12Q1数据下载及制备

【WRF数据准备】MODIS静态地理数据下载及制备

WW、forever的博客 3413

【代码版本管理】SVN(Subversion)

认知有限,望大家多多包涵,有什么问题也希望能够与大家多交流,共同成长!本文先对SVN(Subversion)代码版本管理做个简单的介绍,具体内容后续再更,其他模块可以参考去我其他文章提示:以下是本篇文章正文内容。

qq_35635374的博客 668

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

上一篇: ThingJS,让小微团队也参与到数字孪生技术开发!
下一篇: ThingJS支持塌陷性能,加快3D渲染速度
ThingJS_小锘
博客等级 码龄6年 170粉丝 254原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值