2020年09月_ThingJS_小锘

原创 ThingJS：3D开发基于js就可以实现change表单事件啦

改变能改变的,接受不能改变的。Change事件也是如此，它只能识别组件数据，ThingJS新功能出炉！3D开发基于js就可以实现change表单事件啦！Change有“改变”的意思，当元素的值发生改变时，会触发 change 事件。如何结合2D图形面板和js语法来做3D开发？ThingJS做个好示范，教你着手开发不同物体的温度、雾效和iframe页面。官方新推出change事件的功能，对应各种3D效果元素的值的变化，方便在GUI（图形界面）手动操作，直接生成js代码。Change事件指代一系列用于改变

2020-09-30 19:54:54 215

原创 ThingJS加入聚光灯功能，开发更轻松

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

2020-09-29 18:40:03 1074

原创 ThingJS有4种方法来完成对象拾取

拾取，所谓拾取就是判断一个三维场景中哪个对象被点击。ThingJS有4种方法来完成对象拾取。物联网应用中 3D 场景中的模型会越来越多，这时我们不可避免需要一些交互效果，比如当点击某一个模型的时候做出反馈动作，这需要我们能够通过鼠标的点击位置推导出点击到的模型，这种技术实现称为 3D 拾取。Picker（选择器/拾取器/选取器）是指提供多个选项集合供用户选择其中一项的控件，在ThingJS在线开发平台，Picker是thingjs中为拾取制作的一个类，主要是用于拾取物体，同时也有框选拾取的功能。在3

2020-09-28 20:48:50 567

原创第一人称让交互更加真实，ThingJS内置控件新功能

在故事中，用第一人称的好处是使小说情境显得更为真切,作者与读者的距离缩小了，在3D可视场景中也一样，第一人称让交互更加真实，ThingJS用内置控件就简单实现啦。目前 ThingJS 内置了「第一人称行走」控件，实现第一人称人物动作：走、跑、跳、移动视角，可供开发者使用。“第一人称行走”交互模式会让人想到游戏射击游戏，给玩家一定的空间来让他们来真正感受处于每个位置的感觉。而实现人物动画，例如行走步伐，就需要一定的交互，包括周围的环境、重力或撞击影响。ThingJS实现第一人称控制移动，主要通过js脚本

2020-09-27 23:15:11 1155

原创 ThingJS：如何把关键组件变身为可视化点击操作对象

城市数据，在可视化设计中属于比较复杂、抽象、不宜展示的，如何通过可视化的形式来展示它们之间的关系和规律是所考虑的重点问题。ThingJS基于二十年城市可视化项目经验，把关键组件变身为可视化点击操作对象，轻松普惠3D城市制作技术。智慧城市指的是运用信息和通信技术手段，实现精细化和动态管理，并提升城市管理成效和改善市民生活质量。城市大屏应用通过可视化的形式营造感知氛围，把数据背后的故事生动描绘，调动受众的情绪与感知，传达本地文化背后的商业价值。ThingJS支持通过编辑界面可视化的点击方式来快速使用搭建地

2020-09-25 19:23:54 1192

原创 ThingJS让你更聪明实现“热力图”可视化

热力图是用不同颜色的区块叠加在地图上实时描述人群分布、密度和变化趋势的一个技术。ThingJS让你更聪明实现数据可视化，3D不来试一试？热力图是地理位置可视化的一种表现方式，能够使得比平均发生概率更高的区域能够浮现出来，例如高犯罪区、高交通事故区、高仓库区域。百度地图和高德地图的JavaScript API都提供了热力图的绘制方法，都是将热力图作为新的图层，叠加到地图上。注意热力图数据源的格式与FeatureLayer（要素图层）相同，都是json数据格式。首先引用地图组件脚本，创建TileLayer

2020-09-24 20:59:48 1643

原创 ThingJS天空盒技术更适合物联网场合哦

谁有适用于unity的18种不同的大自然天空盒？开玩笑，ThingJS天空盒技术更适合物联网场合哦！引用地图组件脚本之后地球相机参数就改变，需要校正天空盒。为什么偏偏是天空盒呢？这就得问一下，天空盒的原理是什么？OpenGL中天空盒的思想就是绘制一个大的立方体，然后将观察者放在立方体的中心，当相机移动时，这个立方体也跟着相机一起移动，这样相机就永远不会运动到场景的边缘。所以在实时渲染中，因为照相机随着物体一起移动，在肉眼看来，物体大小几乎是没什么变化的，这种就是天空盒技术玩的把戏。为了保持视角一致，需

2020-09-23 20:12:58 996

原创又学到啦！ThingJS支持引用js,css库的官方加载

React 在 JavaScript 里面实现了对 HTML 和 CSS 的封装，我们通过封装去操作 HTML 和 CSS。也就是说，网页的结构和样式都通过 JavaScript 操作。又学到啦，ThingJS支持js纯语法开发哦！HTML绘制平面图形可以采用canvas标签，但是功能上只能呈现2D图形，想要呈现3D图像需要特殊上下文，于是引入了webGL技术。如果想看它的场景演示，可以访问谷歌团队Data Arts出品的基于webGL的3D场景库，前端技术圈也视它为一个蓝海技术，3D开发应用普及指日可待

2020-09-22 12:21:27 1606

原创 ThingJS与高德地图合作，会发生什么化学反应？

地图在我们日常的数据可视化分析中是很常见的一种展示手段，不仅美观而且很大气。ThingJS教你结合高德路径规划来开发动态地图！CMap 是基于 ThingJS 实现的地图组件库，我们与高德地图导航服务合作开发导航功能，用到其中的路径规划服务，这里的web服务API对所有用户开放，可以轻松开发。按照高德的路径规划结果，使用GCJ02坐标系的谷歌影像，导航支持驾车、骑行与步行等交通方式，当然您可以自行开发更多的出行方式，记得使用API前先获取key：https://lbs.amap.com/api/we

2020-09-21 21:44:24 1460

原创 ThingJS：让你远程操控城市大屏，管理更高效

如今，城市生活的面貌已与十年之前大不相同——未来十年可能迎来更惊人的飞跃。经过多年探索，城市变得越来越“有智慧”。ThingJS提供智慧3D可视化技术工具，让你远程操控城市大屏，管理更高效。第二十三届中国北京国际科技产业博览会，简称科博会，昨天在北京的中国国际展览中心开展了，这一次优锘科技也上了线上展播的头条，在数字化城市领域占得一席。欢迎扫一扫二维码查看ThingJS智慧城市项目，感受一下优锘ThingJS团队的技术创新能力。有必要再介绍一遍，ThingJS主要是为js开发者提供一套3D开发组件，

2020-09-18 18:47:38 1263

原创 ThingJS不仅实现矩形、多边形的创建，也能够开发控制圆形

只有封闭曲线才有"内部"与"外部"之别.例如,椭圆是封闭曲线,故有椭圆的内部与椭圆的外部的概念。ThingJS不仅实现矩形、多边形的创建，也能够开发控制圆形。矩形区域和圆形区域都很好画，大部分建模工具可直接拖拽生成，但多边形区域则需要确定多边形要经过的点，得出多边形的最终形状。ThingJS绘制多边形区域，以矩形和圆形为例，效果展示如下图。ThingJS在线平台通过获取多个点坐标来确定多边形的形状，例如矩形获取4个世界坐标系下的坐标组合，构成多边形或矩形的点。 var points = [[0,

2020-09-17 17:17:34 978

原创 ThingJS让物联网3D动效开发简化并加速渲染

UV动画主要用于序列帧，用来模拟无限重复的背景。ThingJS系列组件支持开发UV动画，轻松媲美游戏动画效果。UV是什么？通过改变纹理坐标，实现动态效果的纹理动画。在3D场景中，一些动态水面、流动的岩浆、跳动的火焰等等，都是通过操作UV做的动画。在CampusBuilder可以根据功能项的曲线属性设置动画效果，修改流动速度、线宽大小、贴图位移、贴图重复等样式。下载CamBuilder编辑器，免费注册账号，在右侧菜单栏找到“功能”一项。在CampusBuilder中，选择功能项下的曲线，手动添加一条曲

2020-09-16 20:05:59 1051

原创 ThingJS支持塌陷性能，加快3D渲染速度

在3D建模阶段，塌陷性能其实就是附加，材质也会合并会变成一种材质。加快渲染速度。ThingJS在导入塌陷后的模型后再进行轻量3D开发。今天来讲讲如何基于js语法来开发一个物体模型拆解展开的效果，专业名称叫“物体爆炸图”，标准ThingJS体系模型出于互动模型性能考虑，都要求在模型上传前做塌陷，这种建模细节对于提升3D开发效率很有必要，目的是减少模型对内存的占用。在3D开发之前，模型本身会重叠很多命令，占用很大一部分内存和CPU，拖慢电脑，所以针对模型进行塌陷后（指的是把很多个物体合并成一个，转换为一个.

2020-09-15 20:28:26 1163

原创 3D灯光教程仅需三个步骤，用ThingJS体验极速开发！

人生苦短，3D灯光教程仅需三个步骤，用ThingJS体验极速开发！灯光有助于表达一种情感，或引导观众的目光看向具体的位置。灯光能够反映一种基调，对整个图像的外观至关重要。下面教你关于打灯光的技巧，以及轻便的开发方法。ThingJS提供一套操作简便的灯光配置项，只要配置结束后，记得点击生成代码块并执行，一套完整的初级灯光效果就出来了。主灯光主灯光对象是对主光源的控制代码，可设置的变量包括阴影、颜色、强度和打灯角度。主光源通常放在四分之三的位置上，位置是从物体的正面转45度，并从中心线向上转45度。夜

2020-09-14 17:55:41 1275

原创 ThingJS，让小微团队也参与到数字孪生技术开发！

新基建中的“新”字，代表了其中任何领域都具有的高科技含量和高复杂度的特性，而数字孪生技术在新基建领域的成功使用，已经证明了它与新基建的良好融合性，ThingJS让小微团队也参与到数字孪生技术开发中来！数字孪生可视化是未来趋势，3D效果则成为追捧对象，2D是平面技术的一种，但是感官体验、空间感与3D截然不同。人的世界是三维视觉，所以3D技术被认为是高度仿真，3D功能增效包括光效、雨雾、动画等，力求逼真效果。优锘科技独立研发具有自主产权的数字孪生可视化平台和相应的解决方案，更是推出了史诗轻量级在线开发平台.

2020-09-11 18:12:35 1172

原创 ThingJS，提升你的3D设计力！

如果一个设计中充斥着太多的内容，这个页面会显得杂乱无章，读者也无法从中很快看到所需的信息。ThingJS的3D开发也遵循同样的设计原则。世界级设计师Robin Williams认为，复杂的设计原理不那么复杂，凝炼为亲密性、对齐、重复和对比4个基本原则。今天，来跟我了解什么是四大设计基本原则，并且基于概念来找出自己目前面临的“形象设计”问题，不管是你的邮件还是文档，结果一定会让你刮目相看。ThingJS平台提供的是3D开发平台，有场景搭建工具，也有3D开发应用，这都离不开设计审美力。因为3D不仅仅实现了

2020-09-10 17:03:18 1028

原创 ThingJS开发3D强，中国更强！

新型基础测绘最终目标：面向自然资源管理，构建全球统一网格、绘尽我国地理实体、赋予唯一空间身份，挂接社会经济信息，最终建成“实体中国”。用ThingJS开发3D动画，建设物联网技术环境下的3D仿真中国！ThingJS在线开发3D，如何创建文本模型动效？不同于HTML文本，这个是一种特殊的3D模型，它是可以像其他的3D模型一样，实现旋转等控制功能。这样的文字模型随处可见，比如logo指示牌，另外也可以进行人为的文本提示，超脱于仿真范畴之外，看第二张图。模型地址：https://www.thingjs.c

2020-09-09 18:56:23 887

原创 ThingJS降低3D开发门槛，展开一个立体的视角

3D可视化让我们可以由立体的视角去看这个立体的世界，不再只局限于平面，ThingJS让3D开发门槛降低！在ThingJS开发界面中，进行3D场景可视化的编辑区域，我们把它称之为3D容器，也就是展示3D图片的地方，如下图所示。ThingJS 3D开发工具主要提供 Marker 物体和 WebView 物体以支持 3D 空间界面。我们先来看看两者的区别。Marker：可以将图标、Canvas绘制的图片，展现在3D场景中或绑定在3D物体上。WebView：可以将页面嵌入到3D场景中，支持iframe元素

2020-09-08 15:41:55 975 1

原创 ThingJS：物联网可视化需要改进什么问题？

在数据分析工作中，数据可视化虽然只是最后一个步骤，但也是必不可少的一个步骤，ThingJS扛起了物联网最后一公里的大旗！3D可视化使用门槛需进一步降低ThingJS平台致力于提供低门槛、低成本的3D可视化能力，方便物联网及各行业更方便的获得3D可视化能力。目前来说，ThingJS 3D可视化平台是一个开发平台，面向网页前端开发人员。虽然平台已经在工具化、便捷性、API易用性方面做了很多事情，但还是需要不断提升的。ThingJS 3D可视化平台要做的主要有几方面：一是不断提升平台工具使用便捷性和功能，方

2020-09-07 20:50:40 878

原创轻松3D创业！ThingJS、Three.js和Unity 3D技术剖析帖

游戏开发Unity 3D是比较有名气的平台，脚本文档保留着与JS相关的资料，JS何去何从？ThingJS、Three.js和Unity 3D彻底来剖析一下。基于WebGL周边衍生了众多的第三方库，其中Three.js属于开发应用，做了一定的渲染细节封装，ThingJS则封装更多对模型的操作，力求让更多无3D开发经验的人员上手。以Unity 3D为代表的OpenGL出现更早，开发者可以在Unity 3D平台上构建各种AR和VR互动体验，同时可以发布WebGL版本。下面基于开发体验、场景资源和用户技能等三大维

2020-09-04 18:45:59 1753

原创百闻不如一见，ThingJS有哪些3D地图信息弹窗功能呢？

大家都有试过，在百度地图中选中一个地方后就会弹出该地信息的对话框。ThingJS的3D地图实景，有哪些信息弹窗功能呢？无论是2D地图还是3D地图，经常会有展示信息面板的需求，可以用来表示物体对象的位置，也可以实时展示某物体的状态。在ThingJS开发教程中，这些有地理位置的坐标，我们称之为“信息弹窗InfoWindow”。thingjs开发中支持使用layer来显示Web界面的信息弹窗。为了更加方便前端用户操作，我们使用THING.Utils.dynamicLoad引用layer的官方JS文件，可在场

2020-09-03 20:06:15 526

原创 3D开发建模怪需求难满足？ThingJS 场景市场来了

如今众多传统行业，如银行、保险和制造业都选择数字转型升级的战略，物联网的发展前景被资本看好，ThingJS走在一条上升的赛道。3D建模知识怎么进行培训？建模设计团队需要什么储备？找一个合格的建模设计师需要什么能力模型？想想都头大，ThingJS之CampusBuilder（模模搭）作为新晋的3D场景搭建工具，帮你解决这些难题！除了自己手动DIY之外，还提供一个marketplace分享和购买场景创意。如果你想更快速搭建自己的“园区级场景”，不妨参考别人的创意，多进入场景集市逛逛，说不定可以找到自己心目中

2020-09-02 19:46:03 207

原创 ThingJS：十万多个三维空间模型请参考

数字孪生体属于信息空间的产物，而ThingJS提供的是信息可视化应用开发，与数字化未来无缝融合。数字孪生体产品数字孪生体是指产品物理实体的工作状态和工作进展在信息空间的全要素重建及数字化映射，是一个集成的多物理、多尺度、超写实、动态概率仿真模型，可用来模拟、监控、诊断、预测、控制产品物理实体在现实环境中的形成过程、状态和行为。产品数字孪生体对应产品物理实体，一虚一实，我们称之为Thing（物）。ThingJS是一个3D可视化在线开发平台，开发的项目需连通物联网设备来收集感测数据，最终是以3D模型动画效

2020-09-01 19:23:45 653

ThingJS的博客