ThingJS,提升你的3D设计力!

  • Post author:
  • Post category:其他


如果一个设计中充斥着太多的内容,这个页面会显得杂乱无章,读者也无法从中很快看到所需的信息。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
});

ThingJS让你的3D设计能力更加容易实现!



版权声明:本文为ThingJS原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。