求上得中，求中得下

Three.js的Layers机制是控制对象可见性的高效解决方案。它通过32位掩码实现物体与相机的标签匹配，只有两者有交集时才会渲染。相比visible属性，Layers更侧重"谁能看到"而非"是否存在"，特别适合多相机场景、辅助线渲染和精确拾取控制。使用时需注意set方法会覆盖原有层级，建议用enable追加。该机制在渲染收集阶段生效，几乎无性能开销，是处理分层渲染的理想选择，但不适合单纯的对象显示开关或逻辑分组场景。

摘要：本文对比了正交相机和透视相机实现缩放效果的原理。正交相机通过调整zoom值直接缩放视体范围，而透视相机可通过移动相机位置或改变fov值实现缩放。正交相机的zoom值等比例缩放视体，保持近/远裁剪面距离不变；透视相机改变fov则调整视野角度，小fov产生放大效果。文章还指出sizeAttenuation属性控制点大小是否随距离变化，与相机类型无关。两种相机在缩放实现上各有特点，正交相机直接缩放视体，透视相机则通过位置或视野调整实现不同视觉效果。

本文介绍了使用三点法绘制圆弧的计算过程。首先通过p1-p2和p3-p2两个向量确定角平分线方向，计算圆心坐标需要确定夹角和半径。关键步骤包括：计算两向量夹角、圆心到交点距离L=R/sin(θ/2)、确定圆心位置。还涉及垂足计算、与x轴夹角修正，以及通过向量叉乘判断绘制方向（顺时针/逆时针）。最后指出多圆弧应用中需注意特殊情况处理，如直线情况（夹角0°或180°）无需绘制圆弧。整个过程基于向量运算和几何原理，适用于WebGL等图形系统。

透明模型嵌套渲染问题可通过调整深度测试或渲染顺序解决。当两个透明模型嵌套时，距离相机更近的内部模型可能因深度测试被舍弃。解决方案包括：禁用外部模型写入深度缓冲区、内部模型禁用深度测试，或通过three.js的renderOrder强制改变渲染顺序。透明模型默认从后向前渲染，而renderOrder可在组内自定义绘制顺序，确保正确显示嵌套的透明结构。实验表明，调整渲染顺序或深度测试能有效恢复内部模型的可见性。

文章摘要：介绍了坐标转换的三个关键步骤：从世界坐标到NDC标准设备坐标，再到屏幕坐标。重点讲解了.project方法如何将世界空间向量投影到相机的标准化设备坐标(NDC)空间，并提出了手动实现HTML元素定位到模型位置的方法，以达到模型标签效果，其原理与css2Render类似。（98字）

本文介绍了使用光线投射(Raycaster)检测3D物体碰撞的方法。核心思路是从物体A中心向其所有顶点发射射线，通过比较射线与物体B的交点距离和顶点到中心的距离来判断是否相交。具体实现步骤包括：获取物体中心坐标和顶点位置，计算射线方向向量并进行归一化处理，检测射线与目标物体的交点，最后通过比较交点距离与顶点距离确定碰撞状态。代码示例展示了如何遍历物体顶点、计算世界坐标、执行光线投射并返回碰撞检测结果。该方法适用于精确的3D物体碰撞检测场景。

从原生WebGL的角度阐述，就是渲染结果的RGBA像素值存储到了GPU一个自定义的帧缓冲区中，屏幕默认不会直接读取该缓冲区中的像素数据，通过WebGL的特定API可以获取，更多的信息可以百度WebGL或OpenGL离屏渲染

解析几何体对象，提取顶点数据，然后调用WebGL API创建顶点缓冲区，并把创提取的顶点数据传入创建的顶点缓冲区。解释Three.js渲染器是如何解析场景和渲染器对象的，也就是Threejs如何解析几何体并创建相应的顶点缓冲区。Three.js渲染器解析几何体对象，会从几何体对象提取顶点数据传入WebGL顶点缓冲区的时候，如果解析的是对象，直接访问属性提取顶点数据就可以，比如获得顶点位置数据，通过获得顶点数据。如果Three.js渲染器解析的几何体是Geometry对象，会先把Geometry对象转化为。

着色器代码文件目录是，shaders目录下有两个着色器代码的文件ShaderChunk和ShaderLib。ShaderChunk目录下的着色器代码文件.glsl都是具有特定功能的模块，ShaderLib目录下的着色器文件会通过#include <ShaderChunk中着色器文件名>调用ShaderChunk目录下特定功能的着色器代码块构建出来具有具有特定功能的顶点着色器文件和片元着色器文件。

包围盒是一种计算一系列顶点最优包围空间的算法，比如一个不规则几何体的所有顶点坐标都被包围在一个最小的长方体盒子中，需要一个算法来求解这个最小的长方体包围盒。Three.js封装与包围盒算法相关的三个API，分别是三维包围盒Box3、包围球Sphere、包围矩形Box2。

在使用 Three.js 创建 3D 场景时，后期处理（Post-Processing）是一个不可忽视的环节。它通过对渲染结果进行额外的处理，可以极大地提升场景的视觉效果，使画面更具吸引力和表现力。后期处理。

【代码】Threejs 自定义片元着色器 做UV动画。

【代码】Threejs中使用A*算法寻路导航。

通过stats.js库可以查看three.js当前的渲染性能，具体说就是计算three.js的渲染帧率(FPS),所谓渲染帧率(FPS)，简单说就是three.js每秒钟完成的渲染次数，一般渲染达到每秒钟60次为最佳状态。stats.js下载链接：https://github.com/mrdoob/stats.js。

场景中有大量的非连续线段，每条线段由大量的点构成（曲率较大），并且需要合并渲染，这时，一般考虑使用LineSegments画线，因为LineSegments底层是基于 gl.LINES 的WebGL标准进行绘制，v0 v1、 v1 v2、 v2 v3、 v3 v4.......但是，这种方法会有一定代价。

【代码】Threejs + Shader 字体扭曲效果。

instanceMesh是使用InstancedMesh类来创建实例化的几何体。它适用于当需要大量重复的几何体时，但是每个实例之间有不同的变换属性（如位置、旋转、缩放等）。场景：在InstanceMesh多实例创建后，动态修改某个实例的颜色。思路：InstanceMesh外层材质颜色置为白色，创建时调用setColorAt对每个实例设置color要创建后修改，需要为InstanceMesh添加一个数组，按序存放每个小实例的id，根据id检索数组，获取当前实例在多实例中

动态控制mergeBufferGeometries合并几何体中的单个geometry。方法：给每个几何体添加缓冲属性，存储 id和geometry顶点数量。merge合并后，每个geometry的自定义映射属性会同position一样push在一个数组中要单个控制时：通过id检索映射数组，可以得到当前geometry的顶点数量，从而得到这段顶点在merge的position中的位置根据当前geometry顶点坐标，通过onBeforeCompile，修改材质的着色代码

舍弗勒产品展示

在Three.js中，Raycaster是用于检测场景中物体相交的类。当我们使用Raycaster检测物体相交时，可能会出现准确性的问题，特别是当检测到的对象是点模型或线模型时。这是因为点、线段本身并没有任何厚度，所以它的碰撞面积很小，从而导致可能无法准确地检测到物体的相交

【代码】Three.js Glsl着色器打造飞线动画。

山楂树の / CarShowroom · GitCodeCarShowroom

加载模型文件，加载完成后，如果模型显示位置不符合要求，可以通过Threejs程序进行平移、缩放等操作。

创建两个重合的矩形平面Mesh，通过浏览器预览，当你旋转三维场景的时候，你会发现模型渲染的时候产生闪烁。这种现象，主要是两个Mesh重合，电脑GPU分不清谁在前谁在后，这种现象，可以称为深度冲突Z-fighting。

【代码】Three.js制作物体粒子爆炸特效，Shader实现。操作用于传递到每个物体的着色器材质ShaderMaterial中的顶点着色器配置信息，遍历物体顶点组，得到每个每个物体的顶点信息对象points，设置所有物体所有顶点的xyz移动范围为-10到10，将坐标信息设置到每个物体缓冲区对象中，由顶点着色器接收

SmartCity。

SmartCity。

GitHub - EricAndCindy/super-duper-winner: super-duper-winner

【代码】Three.js物理引擎与物体的相互作用——关联材质对摩擦力弹性影响、物体运动方式、作用力相关。

想要页面中物体具有物理世界的效果（有重力，有碰撞效果），那么就必须在物理世界再创造一个物体。普通小球是在：渲染引擎进行渲染，引擎只负责不断的画画，绘制出它该有的样子。物理世界小球是在：物理引擎就行计算其该有的物理效果，渲染引擎不断的从物理引擎中获取小球物理数据，然后进行绘制。设置完物理世界的物体后，记得将两个世界的小球进行关联，将真实世界小球位置坐标赋给所看到（普通小球）的小球坐标，详情下面render函数

Three.js打造3D全屏滚动官网，效果如下