使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统——第四课(炫酷版一)

这节课我们主要讲解园区三维可视化炫酷感官技术方案

前言:

  当基础技术达到普及状态,应用就趋向于极致,在三维可视化领域也是这个道理。各大可视化公司都追求美观最大化,这时候美工的作用就不容忽视了。

  背景说明:

    A、经济背景:经济下行的大环境下,各大有社会责任的企业与部门开始拉动内需,扩大预算,向有技术有情怀的科技公司派送订单,保证科技公司活下来,下一个科技风口能够继续战斗,国民经济能够挺住下行压力。所以可视化,科技风,炫酷风成为扩大预算的一项重要指标。(有钱)

    B、技术背景:三维技术很早在游戏方面就有应用,但是局限于客户端庞大,电脑硬件要求高,所以在行业应用方面一直没有普及,而当前民众用的电脑基本都带有独立显卡,包括市面上的手机也基本都带有GPU处理器,这为三维技术普及与应用奠定了很好的基石。还有就是webgl技术的发明与普及,浏览器直接支持gpu加速,轻客户端机制把一切封装在浏览器沙盒中。用户只需要解决业务相关的问题就可以。(有技术方案)

    C、项目背景:与本项目相关的背景就是各大可视化厂家发力做出越来越炫酷的效果,作为webgl爱好者,不能放过一切前沿的技术应用。着手研究与实施出炫酷效果,对于个人而言也是刻不容缓。(有人)

    D、钱、技术、人都有了,just do it!!!

     技术交流 1203193731@qq.com

一、闲话少叙,先看效果图

1、外立面效果图加周遭环境特效。

 

2、单独楼层效果与过度动画

3、室内效果

二、难点重点说明

炫酷的效果最终在于技术的熟练应用与设计师的强大脑洞

这里再次强调美工不可忽视的作用,尊称设计师。

效果好坏以及工作量的多少全凭设计师前期的工作,专业的人干专业的事情,大部分程序猿没有审美能力,这时候就靠设计师想象出炸天的效果。程序猿这时候利用自己的知识能力实现设计师的设想。

至于难点技术有粒子效果、着色器语言、线性代数与图片的灵活应用、瓦片化加载等。

三、完成步骤

园区可视化方案的实施跟真实建筑楼宇的过程是一样的。从设计到地基到建筑,一步也不能少。一步也不能跳过

1、先设计模型

  1.1、先设计,这里设计师登场,首先设计师打开脑洞,想象出一款炫酷的设计,与风格方案,然后与程序猿交涉,输出程序猿需要的原图。

  1.2、开始“打地基”,根据设计师的设计,我们选的地基是科技虚幻话地基,就是科技网格

    效果:

    代码:

{"show":true,"uuid":"","name":"b1_back_1","objType":"cube2","length":40000,"width":40000,"height":1,"x":0,"y":0,"z":0,"style":{"skinColor":16777215,"skin":{"skin_up":{"skinColor":16777215,"side":1,"opacity":0.4,"imgurl":"../../img/3dImg/bg2.png","repeatx":true,"width":5,"repeaty":true,"height":5},"skin_down":{"skinColor":16777215,"side":1,"opacity":1,"imgurl":"../../img/3dImg/bg2.png"},"skin_fore":{"skinColor":16777215,"side":1,"opacity":1},"skin_behind":{"skinColor":16777215,"side":1,"opacity":1},"skin_left":{"skinColor":16777215,"side":1,"opacity":1},"skin_right":{"skinColor":16777215,"side":1,"opacity":1}}},"showSortNub":1,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":0.1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}