Three.js 之视锥体可视化

最新推荐文章于 2025-05-26 14:44:28 发布

放逐者-保持本心，方可放逐

最新推荐文章于 2025-05-26 14:44:28 发布

阅读量675

点赞数 30

CC 4.0 BY-SA版权

分类专栏： webgl 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_51244077/article/details/147724892

Three.js 实现视锥体可视化：从需求到实现

在三维可视化应用中，视锥体（Frustum） 是一个非常重要的概念。它描述了相机可见范围的边界，常用于可视区域检测、碰撞检测、遮挡剔除等场景。

本文以 [视锥最终效果.vue](file://h:\project_induce\24\project\vue3-demo\src\views\pages\index\视锥最终效果.vue) 为例，详细解析如何使用 Vue 3 + Three.js 构建一个可视化的视锥体，并展示其与高楼之间的空间关系。

一、需求分析

本项目的主要目标是：

在三维空间中构建一个由高楼组成的环境。
模拟一个瞭望点和一个目标点，表示观察者的视角。
可视化显示该视角的视锥体，帮助理解观察范围。
使用半透明网格填充视锥体，增强视觉表现力。

通过这个案例，可以应用于：

游戏开发中的视野判断
建筑设计中的视线通透分析
虚拟现实/增强现实中的可视区域检测

二、技术要点解析

1. 场景初始化

使用 Vue 3 的 Composition API，在 onMounted 生命周期中创建 Three.js 的基础场景：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(...);
const renderer = new THREE.WebGLRenderer();

并启用阴影映射功能：

renderer.shadowMap.enabled = true;

2. 创建建筑群

构建两排高楼作为障碍物：

for (let i = -5; i <= 5; i += 2) {
   
   
    const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
    building.position.set(i, 2.5, -5 or 5);
    building.castShadow = true;
    scene.add(building);
}

所有建筑加入 buildings 数组以便后续操作。

3. 光照系统

设置方向光与环境光，增强立体感和真实感：

const directionalLight = new THREE.DirectionalLight(...);
directionalLight.castShadow = true;

const ambientLight = new THREE.AmbientLight(...);

并配置光源的阴影相机参数：

directionalLight.shadow.camera.left = -20;
...
directionalLight.shadow.mapSize.width = 1024;

4. 视锥体计算与可视化

（1）定义观察点和目标点

const lookoutPoint = buildings[1].position.clone().setY(2.5);
const targetPoint = buildings[0].position.clone().setY(2.5);

（2）构建视锥体相机

const frustumCamera = new THREE.PerspectiveCamera(fov, aspect, near, far);
frustumCamera.position.copy(lookoutPoint);
frustumCamera.lookAt(targetPoint);

（3）生成视锥体辅助线

const frustumHelper = new THREE.CameraHelper(frustumCamera);
scene.add(frustumHelper);

（4）提取视锥体顶点并绘制填充几何体

const frustum = new THREE.Frustum();
frustum.setFromProjectionMatrix(cameraMatrix);

// 手动计算8个顶点
const frustumVertices = [];
for (let i = 0; i < 8; i++) {
   
    ... }

// 构建自定义几何体
const