• 欢迎访问佰阅部落,本站为优质开源程序分享站,所有自研项目均开源免费,可在Github查看源码。 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎积极参与讨论、反馈问题

ThreeJS:使用WebGL创建三维可视化动态图

游戏开发 佰阅部落 2个月前 (09-15) 405次浏览
文章目录[隐藏]

随着WEB技术的发展,3D图形化展示出现在越来越多的网站上,动态3D效果图可以迅速吸引眼球,使得传统HTML更加丰富。

0. 效果展示

1. ThreeJS简介

Three.js经常会和WebGL混淆, 但也并不总是,three.js其实是使用WebGL来绘制三维效果的。 WebGL是一个只能画点、线和三角形的非常底层的系统. 想要用WebGL来做一些实用的东西通常需要大量的代码, 这就是Three.js的用武之地。它封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能,让你不必要再从底层WebGL开始写起。

2. 案例展示

如开头的效果图一,真可谓惊艳至极,你可以动态调整灯光、白天或黑夜、还可以控制咖啡的挥发速度等等,具体可从这里体验。该项目已开源,可以从这里观摩学习https://github.com/brunosimon/my-room-in-3d

效果图二,是由OUIGO开发的三维弹珠类游戏,操作简单,乐趣却不少,足足玩半小时都没啥问题。虽然没有PC端那么酷炫真实的风格,但是这个游戏展示效果还是非常令人惊艳的,渲染时GPU消耗20%左右,灯光、场景动态、背景音乐和游戏关卡都很优秀。
在线游玩地址:http://letsplay.ouigo.com/


上图则是zen.ly的官网页面,动效十足,非常吸引人。

类似的,还有如下的动态地图应用,树木随风微动,房子不动。看来只有想象力不足能限制我们大展拳脚了。参观地址:https://chartogne-taillet.com

3. 相关网站

  • 官网:https://threejs.org/

佰阅部落 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:ThreeJS:使用WebGL创建三维可视化动态图
喜欢 (1)
佰阅部落
关于作者:
爱折腾,爱学习,用心分享各种实用搭建教程,让优质web程序脱颖而出,欢迎订阅!