很多网友反应“这也太可爱了吧”，连摩纳哥亲王也想带回去两个给自己的龙凤胎，请求工作人员再为自己制作一个冰墩墩，不然回去也就“不好交代”了。
在Three.js中，一个可见的物体是由几何体和材料构成的。在这个教程中，我们将学习如何从头开始创建新的网格几何体，研究Three.js为处理几何对象和材质所提供的相关支持。
本文主要介绍了WebGL和Three.js的渲染流程，从加载模型到生成纹理和片元着色器，再到进行矩阵计算和坐标转换，最终完成3D渲染。
今后的几篇郭先生主要说说three.js骨骼动画。three.js骨骼动画十分有意思，但是对于初学者来说，学起来要稍微困难一些，官方文档比较少，网上除了用圆柱体的例子就是引用外部模型的，想要熟练使用骨骼动画就需要不断地探索和练习。这篇是初探three.js骨骼动画，也不深入讲解，先说说它的实现和原理，然后一点一点解读官网案例，骨骼动画官网案例
在这个分步指南中，我们将使用一个基于 WebGL 的 3D 图形的框架 three.js， 创建一个 3D 版本的 Treehouse 徽标。你可以通过点击或者拖拽鼠标使相机旋转！你也可以使用鼠标滚轮进行缩放。
随着人们对用户体验越来越重视，Web开发已经不满足于2D效果的实现，而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库，它的出现让3D应用开发更简单，本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。
前面一节我们初步了解了BufferGeometry，它可以自定义任何几何形状，它的数据存储在BufferAttribute中。我们也使用BufferGeometry创建了一个自定义的mesh物体，但是，如果你跟着步骤创建了这个物体，用鼠标反转你会发现，这个物体只有一个面可以看到，反转后是看不到任何物体的，这是因为在Threejs中，空间中一个三角形是有正反两面的，在Three.js中规则你的眼睛(相机)对着三角形的一个面，如果三个顶点的顺序是逆时针方向，该面视为正面，如果三个顶点的顺序是顺时针方向，该面视为反面。 我们可以在创建材质的时候配置side属性来设置物体的正反面是否可见。 1. 三角面的正反面 Three.js的材质默认正面可见，反面不可见。
随着前两天冬奥会序幕的正式拉开，也成功带火了本次吉祥物冰墩墩。憨厚可爱的熊猫形象，让冰墩墩的实体公仔、钥匙扣都被一抢而空，众多网友呼吁现在真的是「一墩难求」！
睁开您的眼睛，看看你的周围，它是一个多么美妙的3D世界啊。3D世界由什么组成，除了上帝，还有谁能够回答呢？
本文首发于政采云前端团队博客：WebGL 概念和基础入门 https://www.zoo.team/article/webglabout
通读完上一篇博文中提及的教程，觉得应该搞个大作业巩固一下所学的知识，想起刚上映的漫威宇宙第三阶段收官之作《蜘蛛侠·英雄远征》，于是决定仿一个MARVEL的片头动画作为three.js的课后练习，使用的版本是R104版本。本节先来解决视频贴图的问题。
透视相机模拟的效果与人眼看到的景象最接近，在3D场景中也使用得最普遍，这种相机最大的特点就是近大远小，同样大小的物体离相机近的在画面上显得大，离相机远的物体在画面上显得小。 PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
webGL是基于OpenGL的Web3D图形规范，是一套JavaScript的API。简单来说，可以把它看成是3D版的canvas。恩，你会这样引入canvas对吧：
在最初的六天，我创造了天与地 webGL是基于OpenGL的Web3D图形规范，是一套JavaScript的API。简单来说，可以把它看成是3D版的canvas。恩，你会这样引入canvas对吧：
前段时间做了一个基于 CPU 和 GPU 对比的粒子效果丢在学习 WebGL 的 RTX 群里，技术上没有多作讲解，有同学反馈看不太懂 GPU 版本，干脆开一篇文章，重点讲解基于 GPU 开发的版本。
只需一个浏览器，就能驾车从森林、海滩，“无缝切换”到广袤的沙漠甚至平原。甚至还可以选择春夏秋冬或者白天黑夜的环境风格。
粒子特效是为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块，原理是将无数的单个粒子组合使其呈现出固定形态，借由控制器、脚本来控制其整体或单个的运动，模拟出现真实的效果。three.js是用JavaScript编写的WebGL的第三方库，three.js提供了丰富的API帮助我们去实现3D动效，本文主要介绍如何使用three.js实现粒子过渡效果，以及基本的鼠标交互操作。（注：本文使用的关于three.js的API都是基于版本r98的。）
本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。 学习
粒子是指原子、分子等组成物体的最小单位。在 2D 中，这种最小单位是像素，在 3D 中，最小单位是顶点。
今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关， 因此，如果您决定使用不同的渲染器，不必重写材质。
自 Three.js 2010 年成立以来， 一直是在 Web 上构建 3D 视觉效果的标准。 多年来，基于这个库构建了很多抽象库，它们整合了 Three.js 的特性，可以帮助开发者创建快速、令人惊叹和高性能的 Web 应用程序。
本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。
本文将从各个角度来对动画整个体系进行分类，并且介绍各种前端动画的实现方法，最后我们将总结在实际开发中的各个场景的动画选择方案。
我习惯使用 vs code 编写前端代码，如果是用原生三件套学习，我还会使用 Live Server 插件辅助开发。
以上demo总结来说，使用了 Three.js 库创建了一个简单的绿色立方体模型，并实现了旋转动画效果。 总结一下它的步骤：
前言 设计师需求中3D视觉平移到互动H5中的项目越来越多，three.js和PBR工作流的结合却一直没有被系统化地整理。 和各位前端神仙一起做项目，也一起磕磕碰碰出了爱与痛的领悟。小小总结，希望3D去往H5的道路天堑变通途。 本手册主要分为两大部分： Part 1 理论篇：主要让设计师了解计算机到底是如何理解和实时渲染我们设计的3D项目，以及three.js材质和预期材质的对应关系。 Part 2 实践篇：基于three.js的实现性，提供场景、材质贴图的制作思路、以及gltf工作流，并动态讨论项目常
WebGL是一种在网页浏览器中渲染3D图形的 JavaScript API，无需加装插件，只需编写网页代码即可实现3D图形的展示。WebGL技术相较于传统的Web3D技术有两大优点：第一，通过JavaScript脚本语言实现网络交互式三维动画制作，无需依赖任何浏览器插件；第二，WebGL基于底层的 OpenGL接口实现，具有底层图形硬件(GPU)加速功能。
说起three.js，着色器材质总是绕不过的话题，今天郭先生就说一说什么是着色器材质。着色器材质是很需要灵感和数学知识的，可以用简短的代码和绘制出十分丰富的图像，可以说着色器材质是脱离three.js的另一块知识，因此它十分难讲，我们只能在一个一个案例中逐渐掌握着色器语言的使用技巧。
本文 gihtub 地址: https://github.com/hua1995116/Fly-Three.js
一个鼓舞人心的演示，用three.js探索3D空间中的粒子动画。 这种类型的动画可能非常适合页面加载器。
首先明确最终web三维智慧城市的形态，在最近的项目中，我们接触到了一个县级城市的web三维城市可视化。
纯前端实现的量子纠缠效果视频在网络上迅速传播开来。视频中，作者在两个窗口中打开了相同的网页，然后在两个窗口中同时移动鼠标。
在学习 Three.js 时，很多知识点其实记住几个重要的步骤就能实现相应的效果。
今天郭先生说一说如何在three.js着色器中添加纹理，先看看今天要完成的效果，在线案例请点击着色器纹理。
效果分析： 要实现上述效果，我们需要两张图片，作为纹理贴图，使其图案产生明暗效果；然后通过定义ShaderMaterial对象通过自定义Shader实现上述效果；后面代码中会进行详细分析； 这里我们先介绍下基础知识
在日常开发和学习中，坐标轴能粗略的帮我们定位元素位置和关系。所以我使用 Three.js 学习和开发时基本都会打开坐标轴。
上一节我们介绍了Threejs中二维图形相关的类，这一节我们来聊一聊如何通过创建的二维图形来生成三维图形
三维可视化的主要作用是通过三维方式去更好的表达世界，在所有三维可视化中，漫游功能是最具视觉表现力的。
在Three.js的赋能下，WEB网页效果逐渐丰富起来，今天我们就来运用之前学习的Three.js基础知识，实现一个旋转的几何体-球体。
在THREEjs中，渲染一个3d世界的必要因素是场景（scene）、相机（camera）、渲染器（renderer）。渲染出一个3d世界后，可以往里面增加各种各样的物体、光源等，形成一个3d世界：
在阅读本文前，我希望你对 Three.js 有一个初步的理解。如果你不清楚 Three.js 是什么，我推荐你先阅读 『Three.js』起飞！
Vue 被一个健康的插件和包的生态系统所加强，使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择的框架，所以有一个不断增长的插件和包库，你可以在项目中使用。本文列举了用于Vue 2和Vue 3的 15个 流行的 Vue 插件。
后置处理通常是指应用到2D图像上的某种特效或者是滤镜。在ThreeJs的场景中，我们有由很多网格(mesh)构成的场景(scene)渲染成的2D图像。一般来说，图像被直接渲染成canvas，然后在浏览器中展示，然而在结果被输出到canvas之前，我们也可以通过另外的一个render target并应用一些后置效果。这被称为Post Processing，因为它发生在主场景渲染过程之后。
OpenGL 是一套规范，不是接口，学习这套规范，就可以在支持 OpenGL 的机器上正常使用这些规范，在显示器上看到绘制的结果。
Vue 被一个健康的插件和包的生态系统所加强，使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择的框架，所以有一个不断增长的插件和包库，你可以在项目中使用。
为现代网络开发令人兴奋的事情之一是底层平台的快速发展。 WebAssembly、WebGL、WebGPU、Web Worker 等正在解锁以前典型 Web 产品无法想象的体验。 在过去的几年里，我们看到像 Figma 这样的产品利用这一点创造了极具吸引力的业务和产品。
领取专属 10元无门槛券
手把手带您无忧上云
