three自帶的框選工具SelectionBox、SelectionHelper

?? 一、`SelectionBox` 是什么？

SelectionBox 是 Three.js 示例庫中的一個工具類（examples/jsm/interactive/SelectionBox.js），
用于通過定義一個**三維空間包圍盒（Box3）**來選中視野內的物體。

換句話說：

它根據相機、鼠標拖拽時的起點和終點，在 3D 世界中計算出被框選區域（視錐體內）的所有對象。

?? 典型用法

camera：用于確定視野。
scene：搜索物體的根節點。
拖拽時更新起點/終點，再調用 selectionBox.select() 獲取選中的對象列表。

?? 常用屬性/方法

屬性 / 方法	說明
`startPoint`	拖拽起點（NDC 坐標，即 -1~1）
`endPoint`	拖拽終點（NDC 坐標）
`collection`	當前選中的對象數組
`select()`	執行選擇邏輯，返回選中的對象數組
`updateFrustum()`	更新內部視錐體，用于優化性能

?? 二、`SelectionHelper` 是什么？

SelectionHelper 是用于輔助顯示的一個小類（examples/jsm/interactive/SelectionHelper.js）。

它的作用是：在屏幕上畫出一個矩形框（通過 <div> 疊加），顯示鼠標框選范圍。

它不參與 3D 計算，只負責 UI 層面的可視化。

?? 用法示例

import { SelectionHelper } from 'three/examples/jsm/interactive/SelectionHelper.js';

const helper = new SelectionHelper(renderer, 'selectBox');

renderer：Three.js 渲染器，用來確定附著的 DOM。
第二個參數 'selectBox' 是 CSS 類名（可用于自定義樣式）。

SelectionHelper 會自動創建一個 <div class="selectBox">，
并根據鼠標拖拽動態調整其位置和大小。

?? 三、完整示例 — 鼠標框選物體

下面是一個完整、可運行的代碼例子，展示如何結合兩者實現框選高亮：

import * as THREE from 'three';
import { SelectionBox } from 'three/examples/jsm/interactive/SelectionBox.js';
import { SelectionHelper } from 'three/examples/jsm/interactive/SelectionHelper.js';

// 場景基礎配置
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 5);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加地面與立方體
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x0088ff });
for (let i = 0; i < 20; i++) {
  const cube = new THREE.Mesh(geometry, material.clone());
  cube.position.set(Math.random() * 8 - 4, 0.5, Math.random() * 8 - 4);
  scene.add(cube);
}

// 初始化 SelectionBox 與 Helper
const selectionBox = new SelectionBox(camera, scene);
const helper = new SelectionHelper(renderer, 'selectBox');

let selectedObjects = [];

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

// 鼠標事件
function getNormalizedPosition(event) {
  return new THREE.Vector2(
    (event.clientX / window.innerWidth) * 2 - 1,
    -(event.clientY / window.innerHeight) * 2 + 1
  );
}

window.addEventListener('pointerdown', (event) => {
  for (const obj of selectedObjects) obj.material.color.set(0x0088ff); // 重置顏色
  selectedObjects = [];

  selectionBox.startPoint = getNormalizedPosition(event);
  selectionBox.endPoint = getNormalizedPosition(event);
});

window.addEventListener('pointermove', (event) => {
  if (helper.isDown) {
    selectionBox.endPoint = getNormalizedPosition(event);
    selectionBox.select(); // 實時更新選中
  }
});

window.addEventListener('pointerup', (event) => {
  selectionBox.endPoint = getNormalizedPosition(event);
  const allSelected = selectionBox.select();
  selectedObjects = allSelected;
  for (const obj of selectedObjects) obj.material.color.set(0xff8800);
});

?? CSS 樣式（用于框選矩形）

?? 四、交互邏輯總結

操作	功能
`mousedown`	記錄起點、清空舊選中
`mousemove`	更新終點，更新 `SelectionHelper` 框
`mouseup`	獲取選中對象、更新高亮

? 五、擴展建議

可以在 pointerup 事件中配合 OutlinePass 做選中高亮；
或在場景中為選中對象添加包圍框；
若對象很多，建議限制參與檢測的層級（例如僅檢測 scene.children）。

posted @ 2025-10-17 10:38 SimoonJia 閱讀(15) 評論(0) 收藏舉報

刷新頁面返回頂部

Simoon

three自帶的框選工具SelectionBox、SelectionHelper

?? 一、SelectionBox 是什么？