Raycaster.setFromCamera()

方法描述

在three.js中，Raycaster.setFromCamera()方法用于将一个相对于鼠标位置的向量转换为沿着相机到指定位置的射线。该方法需要两个参数，即一个屏幕坐标和一个相机对象，在使用射线进行物体选择和交互时非常有用。

语法

setFromCamera(mouse: Vector2, camera: Camera): void

参数

• mouse: Vector2 - 一个屏幕坐标向量
• camera: Camera - 一个相机对象

示例

在这个例子中，我们想要通过点击某个物体来进行交互。为了实现这个目标，我们可以监听鼠标点击事件，并在事件触发时使用Raycaster来检测物体是否被点击或悬停在其上。

// 添加场景、相机和物体
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0xff0000});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 设置相机位置
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 5;

// 创建射线
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// 创建渲染器和添加场景
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 监听鼠标点击事件
document.addEventListener('mousedown', onDocumentMouseDown, false);

// 绘制场景
function render() {
  renderer.render(scene, camera);
}

function onDocumentMouseDown(event) {
  event.preventDefault();

  // 计算鼠标位置
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 将射线从相机位置映射到鼠标位置
  raycaster.setFromCamera(mouse, camera);

  // 获取与射线相交的物体
  const intersects = raycaster.intersectObjects(scene.children);

  // 如果有物体在射线路径上，则发生交互事件
  if (intersects.length > 0) {
    console.log('点击了物体');
  }
}

// 窗口大小调整时重新计算相机和渲染器尺寸
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onWindowResize, false);

// 渲染场景
function animate() {
  requestAnimationFrame(animate);

  // 旋转物体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  render();
}

animate();

通过调用raycaster.setFromCamera()方法并将其传递给鼠标位置和相机对象，可以使射线从相机位置朝向鼠标位置。然后，我们可以使用raycaster.intersectObjects()方法来查找与射线相交的物体。如果有物体在射线路径上，则intersects数组的长度将大于0，此时我们就可以进行相应的交互操作。