点击下方“前端开发爱好者”,选择“设为星标”
第一时间关注技术干货!
哈喽,大家好 我是
xy
👨🏻💻。今天给大家分享一个用Three.js
实现的大型风力发电机监控可视化平台
,效果超炫酷,直接上源码
!!!
Three.js
是一款基于 WebGL
的强大 JavaScript
库,让浏览器中的 3D
图形创建与显示变得前所未有的简单。
通过精心设计的 API,Three.js 成功地降低了 WebGL
的复杂性
,使得即使是没有深厚技术背景的开发者也能轻松打造出令人惊艳的 3D 场景
、模型
、动画
以及粒子系统
。
废话不多说,直接看效果!!!
关注公众号前端开发爱好者
:
🔥 后台回复【3D 风力发电源码】即可获取源码下载链接
🔥 另外,还为大家准备了博主收藏了多年的 Three.js 7 个免费学习网站
和 2 个开源项目合集
,涵盖了 Three.js 从入门到进阶的所有教程,推荐!!!
网址:https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene
Three.js 官方文档是学习和使用 Three.js 这一基于 WebGL 的 JavaScript 3D 图形库的重要资源。它提供了丰富的信息,包括各种功能
、类
、方法
和属性
的详细描述,以及许多示例和教程。
网址:http://webgl3d.cn/
Three.js 中文网是一个专注于 Three.js 资源分享与交流的中文社区网站。该网站提供了大量与 Three.js 相关的教程
、案例
、插件
和工具
,帮助开发者更好地学习和应用 Three.js。
网址:https://discoverthreejs.com/zh/
《探索 three.js》
是对 web 作为 3D 图形平台的完整介绍,它使用 three.js WebGL 库,编写自一位核心 three.js 开发人员。
可以作为一个引导读者深入了解 three.js 库的指南。
网址:https://threejs.org/editor/
three.js editor
是一个基于 Three.js 库的在线3D编辑器
。这个编辑器允许用户直接在网页上创建和编辑 3D 场景。
在 Three.js 编辑器中,你可以:
创建和编辑 3D 对象:通过编辑器提供的工具,你可以创建各种几何体(如立方体、球体、圆柱体等),并调整它们的位置、旋转和缩放。
添加材质和贴图:为 3D 对象添加不同的材质,如基本材质、物理材质等,并可以应用贴图来改变对象的外观。
设置光源和环境:在场景中添加不同类型的光源(如点光源、平行光源、环境光等),并调整光照参数。
实时预览:编辑器会实时渲染你的 3D 场景,让你可以立即看到所做的更改。
导入和导出模型:支持导入和导出多种 3D 文件格式,如 glTF、OBJ 等。
网址: https://thebookofshaders.com/?lan=ch
The Book of Shaders
是一个在线学习 Shader 的网站(电子书),它提供了一系列关于 Shader
的基础教程和示例代码,堪称入门级指南
。
网址:https://www.shadertoy.com/
Shadertoy 是一个基于 WebGL 的在线实时渲染平台,主要用于编辑
、分享
和查看
shader 程序及其实现的效果。
在这个平台上,用户可以创作和分享自己的 3D 图形效果。它提供了一个简单方便的环境,让用户可以轻松编辑自己的片段着色器,并实时查看修改的效果。
同时,Shadertoy 上有许多大佬分享他们制作的酷炫效果的代码,这些代码是完全开源的,用户可以在这些代码的基础上进行修改和学习。
除此之外,Shadertoy 还允许用户选择声音频道,将当前帧的声音信息转变成纹理(Texture),传入 shader 当中,从而根据声音信息来控制图形。这使得 Shadertoy 在视觉和听觉的结合上有了更多的可能性。
网址:https://glsl.app/
glsl.app
是一个在线的 GLSL (OpenGL Shading Language) 编辑器。GLSL 是一种用于图形渲染的着色语言,特别是在 OpenGL 图形库中。这种语言允许开发者为图形硬件编写着色器程序
,这些程序可以运行在 GPU 上,用于计算图像的各种视觉效果。
在 glsl.app 上,你可以:
开源地址:
https://github.com/vis-three
vis-three
是一款基于 three.js 的组装式
前端 3D 开发框架,为了解决 three.js 相关项目开发的代码组织
问题,降低功能代码间的耦合,提高功能复用性,提高扩展能力,vis-three 提出了功能插件
化概念,采用了插件化
的组织形式,vis-three 的核心引擎提供功能插件的拔插能力,对各模块各功能进行解耦开发,持续集成,兼容拓展。
案例展示:
演示地址:
https://vis-three.github.io/exhibition-hall//SimpleSmartCity/index.html
演示地址:
https://vis-three.github.io/exhibition-hall//easyFactory/index.html
开源地址:
https://gitee.com/ice-gl/icegl-three-vue-tres
icegl-three-vue-tres
是 icegl 图形学社区
出品,一款让你的三维可视化项目快速落地的开源框架并且永久开源免费商用。
icegl 图形学社区提供了上百个 Threejs 可视化案例
供开发者学习,并且有免费完善的 WebGL 从入门到实战的教程
,帮助大家快速上手。
案例展示:
演示地址:
https://opensource.icegl.cn/#/plugins/digitalCity/roadLines
演示地址:
https://opensource.icegl.cn/#/plugins/simpleGIS/mapBuildings
演示地址:
https://opensource.icegl.cn/#/plugins/industry4/deviceLightReflector
关注公众号前端开发爱好者
:
🔥 后台回复【3D 风力发电源码】即可获取源码下载链接
相关连接:
https://mp.weixin.qq.com/s/CM9W445CXG_QoLNzwuYR6A
https://mp.weixin.qq.com/s/YAHpk64SuTV45qeT-TEmsg
公众号
:前端开发爱好者
专注分享web
前端相关技术文章
、视频教程
资源、热点资讯等,如果喜欢我的分享,给 🐟🐟 点一个赞
👍 或者 ➕关注
都是对我最大的支持。
欢迎长按图片加好友
,我会第一时间和你分享前端行业趋势
,面试资源
,学习途径
等等。
添加好友备注【进阶学习】拉你进技术交流群
关注公众号后,在首页: