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

本文主要是介绍ThingJS，提升你的3D设计力！，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

如果一个设计中充斥着太多的内容，这个页面会显得杂乱无章，读者也无法从中很快看到所需的信息。ThingJS的3D开发也遵循同样的设计原则。

世界级设计师Robin Williams认为，复杂的设计原理不那么复杂，凝炼为亲密性、对齐、重复和对比4个基本原则。今天，来跟我了解什么是四大设计基本原则，并且基于概念来找出自己目前面临的“形象设计”问题，不管是你的邮件还是文档，结果一定会让你刮目相看。

ThingJS平台提供的是3D开发平台，有场景搭建工具，也有3D开发应用，这都离不开设计审美力。因为3D不仅仅实现了图像的立体化，同时加入了动画效果，是对真实世界的仿真，充满更大的想象空间。四大设计基本原则，是基础中的基础。即使是3D动画，也需要模型草图，只有把设计基础打好了，才能够在二维屏幕上实现三维图像的不违和展现。

1-对比

元素要做到截然不同，才能让页面引人注目。具体实现起来，也许要思量一下，这个对比是怎么做到的？因为同样的元素，比如字体，我们都会选择相似的类型，美其名曰过渡和融入。

2-重复

有些视觉要素的重复效果，能够增加条理性和统一性。

3-对齐

每个元素都应该与另一个页面有某种视觉联系。不懂设计的人看页面，会对摆放的位置摸不着头脑，但是对于设计师而言，这是有一定的构图要求，每个元素都不是随意摆放的。

4-亲密性

找到元素之间的相关性，进行归类，在视图上的表现就是靠在一块，形成一个统一的视觉单元，多个单元的组合也不会乱，给人一种清晰的设计结构。好的设计是不存在孤立元素的。

亲密性是四大原则之首，有了逻辑才能够谈更多优化，不然还是混乱的信息。有了组织性，信息才更加易读。同样地，亲密性原则能够帮助你关注空间，了解空间对于表达的重要性。在3D可视化开发中，空间是非常重要的一个概念，因为这是一个仿真的三维世界。每个图层数据都包含不同的元素组合，有了空间，才能让整体具有结构感，读取信息才有了逻辑性。

在这里插入图片描述

了解设计的人都知道，如果元素很多，就要进行分类，这里的亲密性原则，指的就是“将相关的项组织在一起”，先成组，后构图。这里有几个简单的步骤：1、把有关联的元素放在一起，2、在不同单元之间增加空间距离。真正的设计不是把东西都堆上去，而是要把有关联的元素汇合，设计不仅仅是感性的，也是理性的。因为要注意信息之间有逻辑上的关联性，哪些应该强调，哪些不用强调，而且通过元素分组、空白设计来表现。

注意，元素单元保持在3~5个就可以。归类的界限要清楚，不能含糊。

更加直观和准确，是设计的目标，让人们更加方便找到需要的信息，凸显设计的价值。3D和2D一样，都是把数据可视化，更清晰的展示在用户面前，物联网技术部署的最后一公里，就是可视化层面。3D动画有了更多的仿真增强，以前是需要学习3DMAX系统，具备专业的3D建模知识，随着物联网技术的生态扩展，不是一个供应商就能做好一个物联网方案的部署，它需要众多的合作，所以每个合作厂商只要把其中一个方面做到极致，就能够存活。ThingJS是3D可视化开发方面的佼佼者，为了更加快速推动物联网可视化技术，赶上物联网的大众创新浪潮，它利用JS封装3D库，并开发一系列3D地图及园区建模组件，把可视化开发步骤简化成了四步。

在CityBuilder或者CamBuilder场景搭建工具中，可以选择物体属性来内置模型动画，无缝集成到ThingJS平台上，就可以基于内置的模型动画运行JS代码，节省了大量的动效基础开发时间。

以下面的粮仓为例,在CamBuilder中我们可以通过选中该模型，查看模型是否带有动画，例如这个粮仓动画名为‘CloseRoof’和‘OpenRoof’，分别控制粮仓开盖关盖动画。
在这里插入图片描述

ThingJS使用 playAnimation 接口进行动画播放。

• 简单播放动画

obj.playAnimation("animation");

• 可以反向播放动画

obj.playAnimation({name: "animation",reverse: true//反转数组
});

• 可以循环播放动画，并且可以同 loopType ，来控制循环类型

obj.playAnimation({name: "open1",loopType: THING.LoopType.Repeat
});
•	还可以同时播放多个动画；
obj.playAnimation({name: ["open1", "open2"],loopType: THING.LoopType.PingPong,speed: 0.4
});