- 博客(33)
- 收藏
- 关注
RSS订阅原创 Three.js 顶点射线碰撞检测实现步骤详解
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)
2025-12-12 10:18:14
762
原创 Three.js 点模型、线模型、精灵模型拾取实现
关键点说明：：控制点的大小：设置点拾取的敏感度：获取选中点的索引：获取选中点的具体位置二、线模型（Line）拾取实现实现步骤：创建线模型：使用 或 Raycaster配置：设置 的拾取阈值提高拾取精度：通过辅助方法增加拾取成功率处理拾取结果：获取线段信息完整案例：关键点说明：：控制线拾取的敏感度线宽限制：WebGL中大多不支持大于1的：获取选中线段的索引使用辅助标记：通过添加标记点显示拾取位置三、精灵模型（Sprite）拾取实现实现步骤：创建精灵
2025-12-11 14:22:59
871
原创 Raycaster(鼠标点击选中模型)
Raycaster（射线投射器）是Three.js中用于实现**鼠标拾取（3D对象选择）**的核心类。它通过从相机位置发射一条射线，检测与哪些3D对象相交，从而实现点击选中功能。
2025-12-11 11:11:40
495
原创 Three.js 材质系统总结笔记
金属度+粗糙度是PBR渲染的核心参数环境贴图显著提升真实感物理材质适合高质量渲染但消耗性能根据实际需求平衡效果与性能合理使用清漆、反射率等高级特性通过合理组合这些参数，可以创建从简单到高度真实的各类材质效果。
2025-12-04 16:53:08
576
原创 Three.js 模型树结构与节点查询学习笔记
是强大的递归遍历工具适合精确查询单个对象组合使用这些方法可以实现复杂的场景管理理解场景树结构是掌握Three.js的关键这些技能在游戏开发、3D编辑器、数据可视化等场景中都非常有用！<template>// 创建3D场景对象Scene// 实例化一个透视投影相机对象// 实例化一个WebGL渲染器// 设置Canvas画布尺寸// 创建第一组楼群group1.name = '一号楼群';i < 5;i++) {// 宽度, 高度, 深度});
2025-11-25 09:30:28
417
原创 创建自定义几何体----顶点索引数据
顶点3(0,10) ────────── 顶点2(10,10)│ ││ ││ ││ │顶点0(0,0) ────────── 顶点1(10,0)
2025-11-20 15:10:09
196
原创 Three.js 线模型学习笔记
Three.js的线模型提供了灵活的线条绘制能力，通过BufferGeometry高效管理顶点数据，三种线模型类型满足不同场景需求。掌握顶点连接规则和材质配置是使用线模型的关键。理解三种线模型的连接方式差异熟练使用BufferGeometry设置顶点数据根据需求选择合适的线模型类型注意性能优化和浏览器兼容性通过合理运用线模型，可以创建出丰富的数据可视化效果、几何图形轮廓和各种线性元素。本文代码基于Three.js r155版本，不同版本API可能有所差异<template>
2025-11-18 15:12:26
421
原创 Three.js Points 几何体创建方式
点模型可以使用任何继承自 BufferGeometry 的几何体自定义 BufferGeometryBoxGeometry, SphereGeometry 等内置几何体从外部加载的几何体其他第三方几何体BufferGeometry 只是其中一种创建方式，但因其高性能和灵活性，在处理自定义点云时成为首选。
2025-11-18 12:09:41
446
原创 Three.js 3D标签实现方法全面总结
起步阶段：从3D平面几何体标签或CSS2DRenderer开始性能优化：大量标签时使用Sprite或Canvas纹理专业需求：复杂文本用Troika，高质量渲染用SDF混合方案：根据标签类型使用不同技术组合渐进升级：从简单方法开始，根据需要逐步优化您当前使用的3D平面几何体纹理标签方法是一个非常实用的选择，特别适合需要标签深度集成到3D场景中的项目。它平衡了性能、效果和实现复杂度，是游戏开发、工业可视化和交互式3D应用的理想选择。
2025-11-03 16:00:03
960
原创 Three.js标签实现方法全面总结
/ 手动控制缩放// 在动画循环中调用// ... 其他动画逻辑简单UI：使用HTML DOM或CSS2DRenderer（固定大小）真实感场景：使用3D平面标签或Canvas纹理（自然缩放）灵活需求：使用Sprite或Troika（可配置缩放）性能优先：Sprite在大量标签时性能最佳质量优先：SDF字体在高质量文本渲染时最优您当前使用的3D平面几何体纹理标签默认采用自然缩放，这很适合需要真实3D感的场景。
2025-11-03 15:59:05
672
原创 让立方体紧挨地面的解决方案
要让立方体紧挨地面，最直接的方法是将立方体的 Y 坐标设置为其高度的一半。这是因为 Three.js 中物体的默认中心点在几何中心。
2025-10-31 10:40:00
145
原创 Three.js相机类型与应用详解（ 这介详解是根据我自己的代码来的）
Z-Fighting（深度冲突）是指当两个或多个表面在深度缓冲区（Z-Buffer）中具有相同或非常接近的深度值时，出现的闪烁或交替显示的现象。相机类型选择：根据项目需求选择合适的相机类型参数更新：修改相机参数后一定要调用zoom 属性：在两种相机中都有效，但行为略有不同控制器冲突：程序化相机动画与 OrbitControls 会冲突，需要适当处理深度冲突：注意 Z-Fighting 问题，合理设置物体间距或使用多边形偏移性能优化：合理设置近平面和远平面，避免过大比例影响深度精度响应式设计。
2025-10-20 09:47:16
861
原创 Three.js阴影实现与注意事项(基础版)
注意事项：必须同时满足三个条件才能显示阴影：1.渲染器启用阴影 2.光源启用投射 3.物体设置接收/投射属性。补充说明：“分辨率越高性能消耗越大，建议根据设备性能调整”
2025-10-16 15:11:31
144
原创 各种light详解
distance - 光的照射距离，超过此距离光线衰减为0。我本来想把每种光辅助线截图的，可是我太累了，有时间再弄吧。angle - 光锥的角度（弧度制），60度转换为弧度。penumbra - 光锥边缘的模糊程度（0-1）target - 光线指向的目标点（默认指向原点）✅ 迎着光亮，背对阴影：产生明确的亮面和暗面。intensity - 光的强度（0-1）✅ 可以产生阴影：平行光可以投射清晰的阴影。平行光在现实中不存在，是计算机图形学的近似。distance - 光的最大照射距离。
2025-10-15 16:27:02
842
原创 Three中基本材质（material）的介绍
Three.js 的材质系统决定了3D物体的外观表现，而灯光系统则提供了必要的照明环境。两者紧密配合，共同创造出逼真的3D场景。标准材质 粗糙： roughness:0.2, 金属性：metalness:0。
2025-10-13 16:52:07
580
原创 基本geometry
所有我们下面要讲的基础几何体，都是 BufferGeometry 的实例。它们帮你生成了这些复杂的顶点、法线等数据，你无需手动计算。创建几何体只是第一步，你需要将其与材质(Material)结合，形成一个网格(Mesh)，然后添加到场景(Scene)中才能被渲染。position：顶点坐标。在深入具体几何体之前，你必须了解 Three.js 的核心数据结构：BufferGeometry。它是一个高效、底层的类，用于表示3D模型（网格、点、线）的几何信息。我们来逐一讲解最常用的一些几何体，并附上代码示例。
2025-10-11 15:54:35
357
原创 Django REST Framework序列化器详解
这段代码定义了一个 Django REST Framework (DRF) 的序列化器 MerchantSerializer，用于处理商家数据的序列化、验证和数据库操作。让我为你详细解析：这个序列化器主要承担三个核心功能：**序列化：**将 Merchant 模型实例或查询集转换为 JSON 格式**验证：**验证传入的表单数据是否符合要求**数据操作：**创建和更新数据库记录字段定义详解全新的 KaTeX数学公式 语法；增加了支持甘特图的mermaid语法1 功能；增加了 多屏幕编辑 Markdown文章
2025-09-10 11:51:53
426
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人