<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[wangmujia的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/wangmujia</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; wangmujia]]></copyright><item><title><![CDATA[相机动画总结-相机直线运动动画、相机圆周运动动画]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/155846032</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/155846032</guid><author>wangmujia</author><pubDate>Fri, 12 Dec 2025 10:27:28 +0800</pubDate><description><![CDATA[相机动画主要通过控制相机对象的.position属性和.lookAt()]]></description><category></category></item><item><title><![CDATA[Three.js 顶点射线碰撞检测实现步骤详解]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/155845470</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/155845470</guid><author>wangmujia</author><pubDate>Fri, 12 Dec 2025 10:18:14 +0800</pubDate><description><![CDATA[function 顶点射线碰撞检测(几何体A, 几何体B):// Step 1: 获取顶点顶点数组A = 获取世界坐标顶点(几何体A)顶点数组B = 获取世界坐标顶点(几何体B)// Step 2: 计算中心中心A = 计算世界中心(几何体A)中心B = 计算世界中心(几何体B)// Step 3-4: 检测A的顶点射线for 每个顶点V in 顶点数组A:方向 = 归一化(中心A - 顶点V)射线 = 创建射线(顶点V, 方向)交点 = 射线.检测相交(几何体B)]]></description><category></category></item><item><title><![CDATA[Three.js 点模型、线模型、精灵模型拾取实现]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/155818312</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/155818312</guid><author>wangmujia</author><pubDate>Thu, 11 Dec 2025 14:22:59 +0800</pubDate><description><![CDATA[关键点说明：

：控制点的大小
：设置点拾取的敏感度
：获取选中点的索引
：获取选中点的具体位置


二、线模型（Line）拾取实现
实现步骤：

创建线模型：使用  或 
Raycaster配置：设置  的拾取阈值
提高拾取精度：通过辅助方法增加拾取成功率
处理拾取结果：获取线段信息

完整案例：

关键点说明：

：控制线拾取的敏感度
线宽限制：WebGL中大多不支持大于1的
：获取选中线段的索引
使用辅助标记：通过添加标记点显示拾取位置


三、精灵模型（Sprite）拾取实现
实现步骤：

创建精灵]]></description><category></category></item><item><title><![CDATA[Raycaster(鼠标点击选中模型)]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/155811119</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/155811119</guid><author>wangmujia</author><pubDate>Thu, 11 Dec 2025 11:11:40 +0800</pubDate><description><![CDATA[Raycaster（射线投射器）是Three.js中用于实现**鼠标拾取（3D对象选择）**的核心类。它通过从相机位置发射一条射线，检测与哪些3D对象相交，从而实现点击选中功能。]]></description><category></category></item><item><title><![CDATA[THREE.JS后处理 EffectComposer 实现步骤]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/155698281</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/155698281</guid><author>wangmujia</author><pubDate>Mon, 08 Dec 2025 11:18:23 +0800</pubDate><description><![CDATA[根据代码内容和截图中的步骤，以下是完整的三.js 后处理。]]></description><category></category></item><item><title><![CDATA[Three.js 材质系统总结笔记]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/155575027</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/155575027</guid><author>wangmujia</author><pubDate>Thu, 04 Dec 2025 16:53:08 +0800</pubDate><description><![CDATA[金属度+粗糙度是PBR渲染的核心参数环境贴图显著提升真实感物理材质适合高质量渲染但消耗性能根据实际需求平衡效果与性能合理使用清漆、反射率等高级特性通过合理组合这些参数，可以创建从简单到高度真实的各类材质效果。]]></description><category></category></item><item><title><![CDATA[Three.js 模型树结构与节点查询学习笔记]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/155225186</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/155225186</guid><author>wangmujia</author><pubDate>Tue, 25 Nov 2025 09:30:28 +0800</pubDate><description><![CDATA[是强大的递归遍历工具适合精确查询单个对象组合使用这些方法可以实现复杂的场景管理理解场景树结构是掌握Three.js的关键这些技能在游戏开发、3D编辑器、数据可视化等场景中都非常有用！<template>// 创建3D场景对象Scene// 实例化一个透视投影相机对象// 实例化一个WebGL渲染器// 设置Canvas画布尺寸// 创建第一组楼群group1.name = '一号楼群';i < 5;i++) {// 宽度, 高度, 深度});]]></description><category></category></item><item><title><![CDATA[创建自定义几何体----顶点索引数据]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/155066747</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/155066747</guid><author>wangmujia</author><pubDate>Thu, 20 Nov 2025 15:10:09 +0800</pubDate><description><![CDATA[顶点3(0,10) ────────── 顶点2(10,10)│ ││ ││ ││ │顶点0(0,0) ────────── 顶点1(10,0)]]></description><category></category></item><item><title><![CDATA[Three.js 线模型学习笔记]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/154990721</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/154990721</guid><author>wangmujia</author><pubDate>Tue, 18 Nov 2025 15:12:26 +0800</pubDate><description><![CDATA[Three.js的线模型提供了灵活的线条绘制能力，通过BufferGeometry高效管理顶点数据，三种线模型类型满足不同场景需求。掌握顶点连接规则和材质配置是使用线模型的关键。理解三种线模型的连接方式差异熟练使用BufferGeometry设置顶点数据根据需求选择合适的线模型类型注意性能优化和浏览器兼容性通过合理运用线模型，可以创建出丰富的数据可视化效果、几何图形轮廓和各种线性元素。本文代码基于Three.js r155版本，不同版本API可能有所差异<template>]]></description><category></category></item><item><title><![CDATA[Three.js Points 几何体创建方式]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/154985899</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/154985899</guid><author>wangmujia</author><pubDate>Tue, 18 Nov 2025 12:09:41 +0800</pubDate><description><![CDATA[点模型可以使用任何继承自 BufferGeometry 的几何体自定义 BufferGeometryBoxGeometry, SphereGeometry 等内置几何体从外部加载的几何体其他第三方几何体BufferGeometry 只是其中一种创建方式，但因其高性能和灵活性，在处理自定义点云时成为首选。]]></description><category></category></item><item><title><![CDATA[Three.js 3D标签实现方法全面总结]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/154352293</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/154352293</guid><author>wangmujia</author><pubDate>Mon, 03 Nov 2025 16:00:03 +0800</pubDate><description><![CDATA[起步阶段：从3D平面几何体标签或CSS2DRenderer开始性能优化：大量标签时使用Sprite或Canvas纹理专业需求：复杂文本用Troika，高质量渲染用SDF混合方案：根据标签类型使用不同技术组合渐进升级：从简单方法开始，根据需要逐步优化您当前使用的3D平面几何体纹理标签方法是一个非常实用的选择，特别适合需要标签深度集成到3D场景中的项目。它平衡了性能、效果和实现复杂度，是游戏开发、工业可视化和交互式3D应用的理想选择。]]></description><category></category></item><item><title><![CDATA[Three.js标签实现方法全面总结]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/154351924</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/154351924</guid><author>wangmujia</author><pubDate>Mon, 03 Nov 2025 15:59:05 +0800</pubDate><description><![CDATA[/ 手动控制缩放// 在动画循环中调用// ... 其他动画逻辑简单UI：使用HTML DOM或CSS2DRenderer（固定大小）真实感场景：使用3D平面标签或Canvas纹理（自然缩放）灵活需求：使用Sprite或Troika（可配置缩放）性能优先：Sprite在大量标签时性能最佳质量优先：SDF字体在高质量文本渲染时最优您当前使用的3D平面几何体纹理标签默认采用自然缩放，这很适合需要真实3D感的场景。]]></description><category></category></item><item><title><![CDATA[ThreeG + BIM + Vue]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/154175791</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/154175791</guid><author>wangmujia</author><pubDate>Fri, 31 Oct 2025 10:49:45 +0800</pubDate><description><![CDATA[下面我为你详细讲解的完整使用指南，从安装到实战应用。]]></description><category></category></item><item><title><![CDATA[让立方体紧挨地面的解决方案]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/154175198</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/154175198</guid><author>wangmujia</author><pubDate>Fri, 31 Oct 2025 10:40:00 +0800</pubDate><description><![CDATA[要让立方体紧挨地面，最直接的方法是将立方体的 Y 坐标设置为其高度的一半。这是因为 Three.js 中物体的默认中心点在几何中心。]]></description><category></category></item><item><title><![CDATA[窗口resize与事件监听]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/153624115</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/153624115</guid><author>wangmujia</author><pubDate>Mon, 20 Oct 2025 11:11:10 +0800</pubDate><description><![CDATA[【代码】窗口resize与事件监听。]]></description><category></category></item><item><title><![CDATA[Three.js相机类型与应用详解（ 这介详解是根据我自己的代码来的）]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/153620464</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/153620464</guid><author>wangmujia</author><pubDate>Mon, 20 Oct 2025 09:47:16 +0800</pubDate><description><![CDATA[Z-Fighting（深度冲突）是指当两个或多个表面在深度缓冲区（Z-Buffer）中具有相同或非常接近的深度值时，出现的闪烁或交替显示的现象。相机类型选择：根据项目需求选择合适的相机类型参数更新：修改相机参数后一定要调用zoom 属性：在两种相机中都有效，但行为略有不同控制器冲突：程序化相机动画与 OrbitControls 会冲突，需要适当处理深度冲突：注意 Z-Fighting 问题，合理设置物体间距或使用多边形偏移性能优化：合理设置近平面和远平面，避免过大比例影响深度精度响应式设计。]]></description><category></category></item><item><title><![CDATA[Three.js阴影实现与注意事项(基础版)]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/153406269</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/153406269</guid><author>wangmujia</author><pubDate>Thu, 16 Oct 2025 15:11:31 +0800</pubDate><description><![CDATA[注意事项：必须同时满足三个条件才能显示阴影：1.渲染器启用阴影 2.光源启用投射 3.物体设置接收/投射属性。补充说明：“分辨率越高性能消耗越大，建议根据设备性能调整”]]></description><category></category></item><item><title><![CDATA[各种light详解]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/153329479</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/153329479</guid><author>wangmujia</author><pubDate>Wed, 15 Oct 2025 16:27:02 +0800</pubDate><description><![CDATA[distance - 光的照射距离，超过此距离光线衰减为0。我本来想把每种光辅助线截图的，可是我太累了，有时间再弄吧。angle - 光锥的角度（弧度制），60度转换为弧度。penumbra - 光锥边缘的模糊程度（0-1）target - 光线指向的目标点（默认指向原点）✅ 迎着光亮，背对阴影：产生明确的亮面和暗面。intensity - 光的强度（0-1）✅ 可以产生阴影：平行光可以投射清晰的阴影。平行光在现实中不存在，是计算机图形学的近似。distance - 光的最大照射距离。]]></description><category></category></item><item><title><![CDATA[Three中基本材质（material）的介绍]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/153200005</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/153200005</guid><author>wangmujia</author><pubDate>Mon, 13 Oct 2025 16:52:07 +0800</pubDate><description><![CDATA[Three.js 的材质系统决定了3D物体的外观表现，而灯光系统则提供了必要的照明环境。两者紧密配合，共同创造出逼真的3D场景。标准材质  粗糙： roughness:0.2, 金属性：metalness:0。]]></description><category></category></item><item><title><![CDATA[three中dat.GUI 的完整引用和使用方法]]></title><link>https://blog.youkuaiyun.com/wangmujia/article/details/153195193</link><guid>https://blog.youkuaiyun.com/wangmujia/article/details/153195193</guid><author>wangmujia</author><pubDate>Mon, 13 Oct 2025 14:47:57 +0800</pubDate><description><![CDATA[我再放一个最开始写的不带下拉的简单版本的，比较清晰。]]></description><category></category></item></channel></rss>