从初学者到专家:Three.js 学习之路的 6 个免费资源!!!

哈喽,大家好 我是 xy👨🏻‍💻。今天给大家分享 6 个免费学习 Three.js 的最佳平台 !!!

Three.js 官方文档

网址:https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene

Three.js 官方文档是学习和使用 Three.js 这一基于 WebGL 的 JavaScript 3D 图形库的重要资源。它提供了丰富的信息,包括各种功能、类、方法和属性的详细描述,以及许多示例和教程。

Three.js 中文网

网址:http://webgl3d.cn/

Three.js 中文网是一个专注于 Three.js 资源分享与交流的中文社区网站。该网站提供了大量与 Three.js 相关的教程、案例、插件和工具,帮助开发者更好地学习和应用 Three.js。

探索 three.js

网址:https://discoverthreejs.com/zh/

《探索 three.js》是对 web 作为 3D 图形平台的完整介绍,它使用 three.js WebGL 库,编写自一位核心 three.js 开发人员。

可以作为一个引导读者深入了解 three.js 库的指南。

three.js 在线编辑器

网址:https://threejs.org/editor/

three.js editor 是一个基于 Three.js 库的在线3D编辑器。这个编辑器允许用户直接在网页上创建和编辑 3D 场景。

在 Three.js 编辑器中,你可以:

  • 创建和编辑 3D 对象:通过编辑器提供的工具,你可以创建各种几何体(如立方体、球体、圆柱体等),并调整它们的位置、旋转和缩放。

  • 添加材质和贴图:为 3D 对象添加不同的材质,如基本材质、物理材质等,并可以应用贴图来改变对象的外观。

  • 设置光源和环境:在场景中添加不同类型的光源(如点光源、平行光源、环境光等),并调整光照参数。

  • 实时预览:编辑器会实时渲染你的 3D 场景,让你可以立即看到所做的更改。

  • 导入和导出模型:支持导入和导出多种 3D 文件格式,如 glTF、OBJ 等。

Shadertoy

网址:https://www.shadertoy.com/

Shadertoy 是一个基于 WebGL 的在线实时渲染平台,主要用于编辑、分享和查看 shader 程序及其实现的效果。

在这个平台上,用户可以创作和分享自己的 3D 图形效果。它提供了一个简单方便的环境,让用户可以轻松编辑自己的片段着色器,并实时查看修改的效果。

同时,Shadertoy 上有许多大佬分享他们制作的酷炫效果的代码,这些代码是完全开源的,用户可以在这些代码的基础上进行修改和学习。

除此之外,Shadertoy 还允许用户选择声音频道,将当前帧的声音信息转变成纹理(Texture),传入 shader 当中,从而根据声音信息来控制图形。这使得 Shadertoy 在视觉和听觉的结合上有了更多的可能性。

glsl.app

网址:https://glsl.app/

glsl.app 是一个在线的 GLSL (OpenGL Shading Language) 编辑器。GLSL 是一种用于图形渲染的着色语言,特别是在 OpenGL 图形库中。这种语言允许开发者为图形硬件编写着色器程序,这些程序可以运行在 GPU 上,用于计算图像的各种视觉效果。

在 glsl.app 上,你可以:

  • 编写和编辑着色器代码:直接在网页上编写顶点着色器、片元着色器等。
  • 实时预览:当你编写或修改着色器代码时,可以立即在右侧的预览窗口中看到效果。
  • 分享你的作品:完成你的着色器后,你可以获得一个链接,通过这个链接与其他人分享你的作品。
  • 学习:如果你是初学者,该网站还提供了很多示例和教程,帮助你了解如何编写各种着色器效果。

写在最后

公众号:前端开发爱好者 专注分享 web 前端相关技术文章、视频教程资源、热点资讯等,如果喜欢我的分享,给 🐟🐟 点一个赞 👍 或者 ➕关注 都是对我最大的支持。

WX: xuxuxu_yyy

添加好友备注【进阶学习】拉你进技术交流群

关注公众号后,在首页:

  • 回复面试题,获取最新大厂面试资料。
  • 回复简历,获取 3200 套 简历模板。
  • 回复React实战,获取 React 最新实战教程。
  • 回复Vue实战,获取 Vue 最新实战教程。
  • 回复ts,获取 TypeScript 精讲课程。
  • 回复vite,获取 Vite 精讲课程。
  • 回复uniapp,获取 uniapp 精讲课程。
  • 回复js书籍,获取 js 进阶 必看书籍。
  • 回复Node,获取 Nodejs+koa2 实战教程。
  • 回复数据结构算法,获取数据结构算法教程。
  • 回复架构师,获取 架构师学习资源教程。
  • 更多教程资源应有尽有,欢迎关注获取
相关推荐
卸任5 小时前
Vibe coding工具使用心得
前端·ai编程
brien95 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance6 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M6 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写6 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李6 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易6 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
清晨Coding6 小时前
删了 Cookie 还能自动登录?Google系网站登录态自动恢复的原理分析
javascript
风骏时光牛马6 小时前
前沿视界
前端
kyriewen6 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员