该示例是在3D场景中使用html绘制了一个立方体，立方体前后左右四面都是挂载展示视频。该示例实现起来并不复杂，但通过学习该示例，我们能比较熟练地在3D场景中灵活运用dom元素。

前言 Shader Toy 就是着色玩具的意思。 在Shader Toy的官网里，大家可以找到许许多多的炫酷案例。 Shader Toy 存在的意义，除了好玩、好看，还可以成为许多实战、创新项目的算法

最近看了《Three.js开发指南》，深刻地意识到光看不练跟没看差不多，所以就练习写了这个下雨小动画。

1-法向量矩阵的概念 先简单认识一下法线的作用。 在同样的光源下，入射光线和着色点法线的夹角，会影响着色点的受光程度。 由上图可知，光线I 和法线n的夹角越小，着色点的受光程度就越大。 在实际开发中，

threejs 基础知识点汇总 threejs 简介 Three.js是一个流行的JavaScript库，用于在浏览器中创建和显示3D图形。它基于WebGL，一个浏览器支持的3D图形API，使得开发者

前面我们渲染出来的物体跟现实生活中差距甚大，要想与现实物体靠齐就离不开纹理贴图。在学习纹理贴图之前，我们先了解一下UV坐标。

用Threejs+vite+vue3从零到一实现一套完整的数字孪生园区，内含源码以及threejs基础概念讲解

之前绘制了三角形，我们现在给它做一个变形操作。 对一个三角形进行变形，其实就是重新这个三角形的三个顶点的位置，计算完后再绘制出来，相比原来就发生了变形。 变形常见的有位移、选择、缩放。位移，其实就是给

后面的示例入口都是以这个html页面为样板。 其中 webgl-utils.js 、webgl-debug.js、cuon-utils.js 等，都是这本书配套的工具方法。 相关源码我自己做了收藏，可以再这里下载。《WebGL 编程指南》书中涉及的源码 可以直接使用 canva…