webgl以及three.js学习记录

前言 今天我们将深入学习 WebGL 的渲染管线。通过这一过程，你将了解图形从数据到最终呈现的完整路径。话不多说，直接开始吧！ 渲染管线的流程 1. 顶点处理 这一步主要做了两件事：几何变换和数据传递

前言 动态绘制多个点，相对于绘制单个点而言,只是多了个监听事件而已。下面，我们来看看，对于绘制多个点，我们是如何使用 webgl 来处理的。 方法展示 初始化 webgl，和初始化 shader 的方

前言 对于 webgl 的学习，我打算从头开始。从简到繁，希望可以扎实的过一遍。现在我们就从最简单的绘制单个点入手，文中涉及到的 API,我会给大家列出重点，以及在线文档地址。 步骤 引入 glMat

前言 今天主要是想学习下三种色彩映射方式是什么以及它们之间的区别。文字内容较多，关键部分会用高亮标注。 是什么 线性（Linear） :这种方式不会对图像的颜色进行任何修改，只是简单地将颜色的亮度缩放

前言 今天我们来介绍下3D中的世界坐标系和局部坐标系的区别。 是什么？ 任何一个模型都有自己的坐标,它的坐标又分为局部坐标和世界坐标。 什么是局部坐标？ 模型自身的坐标 什么是世界坐标？ 模型自身.p

前言 最近学threeJs的时候踩到的坑，当我导入glsl文件时，一直在报语法错误，类似于 想着vec3,vec4不是系统内部定义的嘛，非常的懵逼。 解决方式 原因是vite，只需要在导入的时候，加上

前言 在使用THREE.js处理物体的碰撞和变形效果时，通常需要借助物理引擎来实现，以使得碰撞等效果更加逼真。其中，我们常用的物理引擎为CANNON。接下来，让我们来学习一下如何在THREE.js中使

前言 在3D场景中，阴影扮演着至关重要的角色。如果没有阴影，整个场景看起来会非常不真实。因此，阴影是营造出真实感和深度感的关键因素之一。 在本文中，我们就来看看，在THREE.JS 中如何实现阴影效果

前言 本文将介绍 Three.js 中的 UV 映射，包括 UV 映射的概念、与顶点位置的关系和区别，以及如何在 Geometry 中设置 UV 坐标。 uv映射 什么是UV映射？ UV映射是一种将二

前言 在网页开发中，我们通常使用 DOM 事件来操作 DOM 元素。但是在 canvas 画布中，如何监听用户对画布内容的 DOM 操作呢？除了常规的事件监听器外，在 three.js 中，我们还可以

前言 本文主要介绍各种贴图在 THREE.JS 中的搭配使用，并通过完成一个小 demo 来加深理解。 在 THREE.JS 中，贴图、透明度贴图、环境贴图和高光贴图等不同类型的纹理可以配合使用，以实

前言 在日常开发中，有许多情况需要为不同的面设置不同的材质。例如，在构建游戏场景时，我们可能需要为地面、墙壁和天花板设置不同的材质，以实现更真实的效果。同样，在建筑可视化和产品展示方面，为不同的面设置

在vue项目开发中，我们除了可以通过wowjs来给页面增加动画效果外，也可以通过使用gsap补间动画来让页面元素动起来。 安装依赖 使用 设置动画 从上往下动画 通过gsap实现让div从上往下移动效

整体思路 利用 CatmullRomCurve3 创建一个三维样条曲线 在三位样条曲线上等间距的取一系列点 相机位置按照第二步所取的点移动。 实现步骤 三位样条曲线 效果： 调整相机位置，让相机看向管

本质 相机动画的本质是改变相机位置！ 案例 实现相机水平移动，达到一个漫游效果 核心代码 在render方法中改变相机位置: 效果： 圆周运动，实现一种盘旋效果 核心代码 效果： 总结 相机动画的本质

涉及到的知识点 平面填充几何体ShapeGeometry 包围盒Box3 正投影相机OrthographicCamera 目标效果 实现步骤 准备好地图数据 1. 将地图每个坐标数据包装成二维向量，并

什么是包围盒（Box3） 就是一个长方体空间，将模型所有顶点包围起来的最小长方体空间。 描述一个长方体包围盒需要通过xyz坐标来表示，X范围[Xmin,Xmax],Y范围[Ymin,Ymax],Z范围

场景 当浏览器尺寸动态变化时，canvas画布尺寸跟着变化。 要解决的问题： 如下图所示：当页面尺寸变化了，canvas渲染画布尺寸没有跟着变化，需要重新刷新。 如何解决 效果： 可以看到，canva

正投影相机与透视投影相机的不同 API 正投影相机（OrthographicCamera） 参数说明： 图说明： 透视投影相机（PerspectiveCamera） 参数说明： 图说明： 使用场景不同