b-智慧城市
条评论示例效果
这是3D可视化教程系列的文章,如果第一次阅读请先阅读《3D可视化教程导读》,这里展示的项目效果可访问b-city 展示网址:
源码及3D项目文件
源码及工程项目都放到github上。
源码:threejs-example。
导入城市模型
最好的城市模型效果应该是由设计师根据需求来亲自建模,然而我比较懒(程序员通病),找有没有办法能快速导入城市模型,效果差一些也没所谓。这个项目例子的城市模型是如何导入的,请参考blender导入城市建筑(.rdc)。
导入模型后,自行编辑后,再次导出时特别注意,不要带材质,因为rdc文件自带的照片贴图会很大,可能就多占用几十M的空间(因为我们也不需要这些图片,所以也没必要带上白白占用大量空间)。
为了让城市模型变得更科技感一些,我们改变了它的材质,偏暗蓝且带透明:
1 | const basicMat = new THREE.MeshBasicMaterial({ |
光轨效果
光轨效果是构建科技感的最重要最常见的效果,另开了一篇文章单独讲这个:3-光线痕迹
与该文章不同的是,这个项目光轨的模型不是通过JS生成的,而是在3D建模软件里建模的管道,JS给这些管道添加光流动的效果。在blender构建管道的例子:
制作曲线时你会发现,这曲线到底要怎么调?大家可以通过The Bezier Game这个在线学习网站学习练习一下,PS的钢笔工具。
动画(animate)
在第一个演示项目里(a-模型拆解效果),演示的是电器烟爆炸拆开的效果,里面的物体移动是通过JS来实现的。而在这里是通过在3D建模软件里制作动画,然后导出时带有动画数据,加载到three.js里运行即可。在这个项目里,电梯的上下移动就是通过动画导出实现的。动画的教程对应:4-动画。
为了让电梯的模型更突出,更有科技感,我给电梯模型添加了透明与浅蓝的边框:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26function change2LightBox(object3d) {
const group = new THREE.Group();
const lineMaterial = new THREE.LineBasicMaterial({color: 0x00FFFF});
const boxMaterial = new THREE.MeshBasicMaterial({
opacity: 0.1 ,
color:0x00cccc,
side: THREE.BackSide,
transparent: true,
});
const geo = new THREE.EdgesGeometry(object3d.geometry);
const line = new THREE.LineSegments( geo , lineMaterial);
const box = new THREE.Mesh(object3d.geometry, boxMaterial);
group
.add(line)
.add(box);
group.position.set(object3d.position.x,object3d.position.y,object3d.position.z);
group.rotation.set(object3d.rotation.x,object3d.rotation.y,object3d.rotation.z);
group.scale.set(object3d.scale.x,object3d.scale.y,object3d.scale.z);
object3d.parent.add(group);
object3d.visible = false;
return group;
}
告警图标
在界面中,要想显示图标有两种方案,一种是在3D场景里画一个平板,贴上图片,这种的特点就是遵守“近大远小”的规则。另一种是使用HTML元素,让HTML元素跟踪指定的3D物体,特点是不会受限于“近大远小”,通过HTML、CSS实现起来、修改起来、绑定事件也比较方便。两种都有各自的使用场景,像告警图标的显示,一般都使用第二种方案。
要想计算3D物体对应2D平面的坐标,一般就是投射的计算即可,然后计算出来的坐标改变HTML元素的坐标即可,这个计算在6-屏幕坐标转换里讨论。
1 | <style> |
1 |
|
打赏支持
请博主喝个饮料: