随着人们对用户体验越来越重视，Web开发已经不满足于2D效果的实现，而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库，它的出现让3D应用开发更简单，本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。
在 three.js 里以向右的方向为 x 轴，向上的方向为 y 轴，向前的方向为 z 轴：
最近听了一首很好听的歌《一路生花》，于是就想用 Three.js 做个音乐频谱的可视化，最终效果是这样的：
玩家从一个方块跳到下一个方块，如果没跳过去就算失败，跳过去了就会再出现下一个方块。
现在什么都是3D，看电影3D，打游戏3D，估计3D打车，很快就会面世。那么作为前端开发的标准语言，JS和3D能不能也搞出点大新闻呢？刚好最近在做一个活动时，就遇到了需要播放3D全景视频的需求，顺便就研
官方文档中的新手示例过于简单，所以本节对Three.js中的概念进行一些补充描述：
之前说过网格（Mesh） = 几何体（Geometry） + 材质（Material），也就是一个物体是有它的形状和材质来决定。几何体（Geometry）类似于前端的HTML而材质（Material）类似于前端的CSS，今天我们看一下材质相关的内容。
以上demo总结来说，使用了 Three.js 库创建了一个简单的绿色立方体模型，并实现了旋转动画效果。 总结一下它的步骤：
场景（Scene）相当于是一个容器，可以在它上面添加光线，物体等，最后Three.js把它和相机一起渲染到DOM中。
在Three.js中，三维空间指的是具有三个独立轴的空间，通常称为X、Y和Z轴。这种空间用于描述和定位3D对象的位置、旋转和缩放。
本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。 学习
在 《Three.js 基础纹理贴图》 里介绍了如何给图形贴图，贴图前需要先把纹理加载好。我们基于这篇文章继续讲解如何监听材质加载成功或者失败。
我习惯使用 vs code 编写前端代码，如果是用原生三件套学习，我还会使用 Live Server 插件辅助开发。
在Three.js中，一个可见的物体是由几何体和材料构成的。在这个教程中，我们将学习如何从头开始创建新的网格几何体，研究Three.js为处理几何对象和材质所提供的相关支持。
本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。
这是我们开始使用Three.js的第一个小节，我们回顾一下用Web开发最经典的方式来使用它，一个<script>标签。
本文主要介绍了WebGL和Three.js的渲染流程，从加载模型到生成纹理和片元着色器，再到进行矩阵计算和坐标转换，最终完成3D渲染。
作为整天和 UI 打交道的前端工程师，是否想在他（她）生日的时候用代码送上一份惊喜呢？
在学习 Three.js 时，很多知识点其实记住几个重要的步骤就能实现相应的效果。
github地址：https://github.com/hua1995116/Fly-Three.js
一些有WebGL体验的页面，浏览者有种在一个带有材质的隧道中穿梭的感受。这有赖于Three.js以及由fornasetti.com带来的灵感。
最近看了看threeJS的文档，对它初步有了一个新的认识。整理了上上面的图片，有需要的可以保存一下。
自 Three.js 2010 年成立以来， 一直是在 Web 上构建 3D 视觉效果的标准。 多年来，基于这个库构建了很多抽象库，它们整合了 Three.js 的特性，可以帮助开发者创建快速、令人惊叹和高性能的 Web 应用程序。
在阅读本文前，我希望你对 Three.js 有一个初步的理解。如果你不清楚 Three.js 是什么，我推荐你先阅读 『Three.js』起飞！
睁开您的眼睛，看看你的周围，它是一个多么美妙的3D世界啊。3D世界由什么组成，除了上帝，还有谁能够回答呢？
webGL是基于OpenGL的Web3D图形规范，是一套JavaScript的API。简单来说，可以把它看成是3D版的canvas。恩，你会这样引入canvas对吧：
在最初的六天，我创造了天与地 webGL是基于OpenGL的Web3D图形规范，是一套JavaScript的API。简单来说，可以把它看成是3D版的canvas。恩，你会这样引入canvas对吧：
尽管 Three.js 文档已经比较详细了，但对于刚接触 Three.js 的工友来说，最麻烦的还是不懂如何组合。Three.js 的功能实在太多了，初学者很容易被大量的新概念冲晕。
前言 设计师需求中3D视觉平移到互动H5中的项目越来越多，three.js和PBR工作流的结合却一直没有被系统化地整理。 和各位前端神仙一起做项目，也一起磕磕碰碰出了爱与痛的领悟。小小总结，希望3D去往H5的道路天堑变通途。 本手册主要分为两大部分： Part 1 理论篇：主要让设计师了解计算机到底是如何理解和实时渲染我们设计的3D项目，以及three.js材质和预期材质的对应关系。 Part 2 实践篇：基于three.js的实现性，提供场景、材质贴图的制作思路、以及gltf工作流，并动态讨论项目常
很多网友反应“这也太可爱了吧”，连摩纳哥亲王也想带回去两个给自己的龙凤胎，请求工作人员再为自己制作一个冰墩墩，不然回去也就“不好交代”了。
我也是个初学者，大家就当这是我的笔记看，如果理解不正确请大家指正。首先推荐大家一个学习网站Tress.js中文网。 首先我们需要先引入tree.js
今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关， 因此，如果您决定使用不同的渲染器，不必重写材质。
浮雕模型，简单地说就是在木板上刻字时所形成的效果，如果把字的部分都剔除掉，就得到一个凹浮雕模型，如果把字以外的部分都剔除掉，就得到一个凸浮雕模型。本文分别对利用Three.js在Web环境中生成凹浮雕模型时的几种策略进行讲解。
一个鼓舞人心的演示，用three.js探索3D空间中的粒子动画。 这种类型的动画可能非常适合页面加载器。
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。 Three.js的核心五步就是： 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器 三维空间里的物体映射到二维平面的
WebGL（Web Graphics Library）是一种 JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形，不需要插件，即专门处理计算或处理3D图像的JS API。
如果对上面的代码还不太理解，可以先看看 《『Three.js』起飞！》 ，坐标轴方面可以看看 《『Three.js』辅助坐标轴》 。
前面一节我们初步了解了BufferGeometry，它可以自定义任何几何形状，它的数据存储在BufferAttribute中。我们也使用BufferGeometry创建了一个自定义的mesh物体，但是，如果你跟着步骤创建了这个物体，用鼠标反转你会发现，这个物体只有一个面可以看到，反转后是看不到任何物体的，这是因为在Threejs中，空间中一个三角形是有正反两面的，在Three.js中规则你的眼睛(相机)对着三角形的一个面，如果三个顶点的顺序是逆时针方向，该面视为正面，如果三个顶点的顺序是顺时针方向，该面视为反面。 我们可以在创建材质的时候配置side属性来设置物体的正反面是否可见。 1. 三角面的正反面 Three.js的材质默认正面可见，反面不可见。
前段时间做了一个基于 CPU 和 GPU 对比的粒子效果丢在学习 WebGL 的 RTX 群里，技术上没有多作讲解，有同学反馈看不太懂 GPU 版本，干脆开一篇文章，重点讲解基于 GPU 开发的版本。
一开始我准备用html+css去写，后来感觉使用html和css写就太low了，没有一点点心意。就打算用three.js写一个3d版本的。
这两天用 Three.js 画了一个 3D 的房子，放了一个床进去，可以用鼠标和键盘控制移动，有种 3D 游戏的即视感。
Three.js的作用就是做3D效果，一说到3D就绕不过一个话题，那就是阴影。而要出现阴影的效果，那么就要涉及光源。本章介绍Three.js中光源相关的知识。
经过上一小节，我们学会了如何使用各种类型的灯光。既然有了光，那还得有阴影，这样看起来才会更加真实。
说到动画，第一个联想到的概念就是“帧”。这是用来衡量和描述动画是否流畅的一个单位。
在Three.js的赋能下，WEB网页效果逐渐丰富起来，今天我们就来运用之前学习的Three.js基础知识，实现一个旋转的几何体-球体。
说起three.js，着色器材质总是绕不过的话题，今天郭先生就说一说什么是着色器材质。着色器材质是很需要灵感和数学知识的，可以用简短的代码和绘制出十分丰富的图像，可以说着色器材质是脱离three.js的另一块知识，因此它十分难讲，我们只能在一个一个案例中逐渐掌握着色器语言的使用技巧。
📷 Three.js实现脸书元宇宙3D动态Logo 背景 Facebook 近期将其母公司改名为 Meta，宣布正式开始进军 元宇宙 🪐领域。本文主要讲述通过 Three.js + Blender 技术栈，实现 Meta 公司炫酷的 3D 动态 Logo，内容包括基础模型圆环、环面扭结、管道及模型生成、模型加载、添加动画、添加点击事件、更换材质等。 什么是元宇宙 元宇宙 Metaverse 一词源于 1992 年尼尔·斯蒂芬森的 《雪崩》，该书描述了一个平行于现实世界的虚拟世界 Metaverse，所有现实
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景。 Three.js学习之前，我们需要了解他的三个关键对象： 1. 场景（场景对象是所有不同对象的容器，也就是说该对象保存所有物体、光源、摄像机以及渲染所需的其他对象） 2. 相机（Camera相当于人的眼睛，从坐标的那个视点去观察目标，相当于投影出立体感。） 3. 渲染器（渲染器可以视为是canvas标签，相机可以视为画布。注意画布和canvas标签不是同一个东西，canvas标签是画布的容器。画布就好比一张图片，而canvas标签就像img标签）
上一节我们创建了一个三维的立方体，将其放在了浏览器窗口中，但是目前来讲它只是一个静态的图片，我们并不能通过鼠标控制其旋转、缩放和移动，这一节我们来实现用鼠标控制物体的运动。 首先我们要了解一个概念，在三维场景中，我们要控制物体旋转，实际上不是物体在旋转，而是我们的相机（还记得上一节中说的相机吗）在围绕物体旋转，就像电影中的镜头拉近一样，是相机在动，不是物体在动，所以，在Threejs中要想让我们的物探动起来，我们需要引入一个轨道控制器(OrbitControls),它可以使得相机围绕目标进行轨道运动，下面我们来实现下 1.导入轨道控制器OrbitControls OrbitControls是ThreeJS的一个扩展库，其本身不在threejs的基础库里面，其位于threejs—examples—jsm—controls文件夹下面，我们在上一节引入threeJS的下面添加如下代码进行引入
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
