随笔分类 - three
摘要：three@126 InstanceMesh实例模拟普通模型颜色算法 如果instanceColor为默认值则计算结果为贴图颜色*inscaneColor*材质color如果不为默认值则混合结果为贴图颜色*inscaneColor 如果没有贴图的情况下，如果instanceColor不为默认值则取i
阅读全文
摘要：一、假设一个真实场景 假设你有： 100 个物体（房间里很多模型） 20 个光源（灯、屏幕、角色光等） 屏幕分辨率：1920 × 1080 也就是： 屏幕像素 = 1920 × 1080 ≈ 200万像素 二、前向渲染计算量 前向渲染逻辑： 每个物体 × 每个光源 计算量： 100 个物体 × 20
阅读全文
摘要：一、先说结论：Three.js 实现 Deferred 需要 3 步 在 Three.js 中实现 Deferred Rendering： ① 创建 GBuffer（MRT）② Geometry Pass（写入 GBuffer）③ Lighting Pass（计算光照） 我们一步一步来 👇 二、S
阅读全文
摘要：const timer = new THREE.Timer(); timer.connect( document );是什么意思 这两行代码是 three.js 里 THREE.Timer 的用法，用来创建一个与页面时间同步的计时器，常用于动画或时间控制。 我们一行一行解释 👇 第一行 const
阅读全文
摘要：export function isObjectInHierarchy(child, parent) { if (!child || !parent) return false; let o = child; while (o) { if (o parent) return true; o = o.
阅读全文
摘要：背景：大坐标情况下，实例化模型抖动问题处理： 背景：为什么 instancedMesh + 大坐标会抖？ 你应该已经踩过这个坑了 👇 world 坐标：(100000.123456, 0, 0) GPU 用的是 32-bit float float 在 10⁵ 量级时： 最小可区分单位 ≈ 0.0
阅读全文
摘要：技术咨询 官方文档 🧩 安装到本地 最简单的方法是把它放到你项目里的 .claude/skills 目录下（这是 Claude Code 的习惯目录）： git clone https://github.com/CloudAI-X/threejs-skills 或者你也可以手动把里面的 skill
阅读全文
摘要：1.普通模型：贴图颜色*材质颜色 2.实例化模型：贴图颜色*材质颜色*单例颜色 如果想要在实例化模型中还原普通模型的颜色混合效果，则需要把材质颜色始终设置为（1，1，1）使其在着色器颜色混合时不生效，这样下来 贴图*单例颜色 就与 普通模型的颜色混合效果一致了 方案核心点： 1.首先需要清除实例材质
阅读全文
摘要：文章链接：https://threejs.org/manual/#zh/indexed-textures 案例：https://threejs.org/manual/examples/picking-gpu.html 这是因为 JavaScript 无法通过简单的查看纹理和材质，就推测出你的对象是否
阅读全文
摘要：🧱 一、SelectionBox 是什么？ SelectionBox 是 Three.js 示例库中的一个工具类（examples/jsm/interactive/SelectionBox.js），用于通过定义一个**三维空间包围盒（Box3）**来选中视野内的物体。 换句话说： 它根据相机、鼠标
阅读全文
摘要：角度通常用 弧度（radian）表示，所以你要做的就是把任意弧度值「归一化」到 [0, 2π) 之间。 弧度归一 normalizeAngle(angle) { const twoPI = Math.PI * 2; return ((angle % twoPI) + twoPI) % twoPI;
阅读全文
摘要：常用方案三进行模型控制 方案 1：直接用 lookAt 如果你的方向向量是从 A → B，那么可以用 lookAt： const dir = p2.clone().sub(p1).normalize(); // 世界方向向量 const target = p1.clone().add(dir); /
阅读全文
摘要：expandByObject与setFromObject的区别： 作用：把当前 Box3 扩大，直到能包住传入 object（以及它所有子节点）的世界空间范围。 签名：box.expandByObject(object: THREE.Object3D): this 特点：是累加（并集），不是覆盖。多
阅读全文
摘要：📘 three-mesh-bvh 简介 three-mesh-bvh 是一个基于 包围体层次结构（BVH，Bounding Volume Hierarchy） 的加速库，用于提升 three.js 中网格（Mesh）几何体在执行 射线检测（Raycasting） 和 空间查询（碰撞检测、可见性测试
阅读全文
摘要：场景：three中方向向量运算后相同数值可能会在高精度时有误差，用向量的equals会导致误判，因此可引入容差对比，来规避此问题 function almostEquals(v1, v2, epsilon = 1e-6) { return ( Math.abs(v1.x - v2.x) < epsi
阅读全文
摘要：方法一： curve.getPointAt(0.5) 曲线方法获取长度为中间时的点位 方法二: 通过点位数据，计算出点位 //计算模型线中点位置 const getModelLineCenterToLabel = () => { let _count = 0; // // 总长度 const _le
阅读全文
摘要：this.simoonModel.matrixWorld.copy(matrix); // 更新位置、旋转、缩放；更新本地矩阵 this.simoonModel.matrixWorld.decompose(this.simoonModel.position, this.simoonModel.rot
阅读全文
摘要：使用getWorldQuaternion获取模型世界旋转四元数并转化为erluer角时，x、y、z分量可能皆不为0，这种情况下如果只取某个分量的值来进行旋转无法达到目标效果， 原因：欧拉角的x、y、z三个分量相互影响，且容易出现万象锁问题，因此获取世界旋转值时应慎重使用 普通用法：获取模型世界四元数
阅读全文
摘要：Math.atan2(y, x) 是 JavaScript 提供的一种数学函数，用于计算点 (x, y) 相对于原点 (0, 0) 的极坐标角度（以弧度为单位）。 它特别适合处理在所有象限内的角度计算，避免了使用 Math.atan(y / x) 所需手动处理正负象限的问题。 注意，方向向量不可直接
阅读全文
摘要：注意：屏幕空间中的顺时针与逆时针与我们看向屏幕的方向是相反的 小技巧：因此，我们可以理解为，我们看到的顺时针为正面，逆时针为反面 如果绘制的平面正反面反了，则调整三角形绘制方向，一般情况下为逆时针方向 a -- b | / | c -- d 三角形 1: (a, b, c) 三角形 2: (c, b
阅读全文
浙公网安备 33010602011771号