Three.js动态交互效果：使用 Raycaster 实现点击和拖拽功能

Three.js动态交互效果：使用 Raycaster 实现点击和拖拽功能

在 3D 场景中，为了让用户更自然地与对象交互，可以使用 Raycaster 来实现点击选择、拖拽移动等动态交互效果。Raycaster 是 Three.js 提供的射线投射工具，可以用来检测鼠标位置与场景中对象的碰撞。

本教程将一步步带你实现如下功能：

1. 点击 3D 对象进行选择。
2. 拖拽选中的对象移动。
3. 在 Vue2 项目中集成此功能。

---

一、Raycaster 的基础概念

Raycaster 的工作原理是从鼠标位置向场景发射一条射线，然后检测射线与场景中对象的交点。如果有交点，则表示鼠标点击了对象。

1. Raycaster 的主要方法

• raycaster.set(origin, direction)：设置射线的起点和方向。
• raycaster.intersectObject(object)：检测单个对象的碰撞。
• raycaster.intersectObjects(objects)：检测一组对象的碰撞。

2. 鼠标位置的计算

Three.js 使用的是归一化设备坐标（NDC），鼠标位置需要从屏幕坐标转换为 NDC 范围 [-1, 1]。

公式如下：

const mouse = {
   
  x: (event.clientX / window.innerWidth) * 2 - 1,
  y: -(event.clientY / window.innerHeight) * 2 + 1,
};

---

二、实现点击和拖拽功能

1. 环境初始化

以下代码初始化了一个包含场景、相机和渲染器的基本 Three.js 环境。

import * as THREE from 'three';

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.MeshStandardMaterial({
    color: 0x0077ff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

// 动画循环
function animate() {
   
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate()