threejs射线拾取模型（vue3+ts）

国服第三切图仔

已于 2024-01-23 17:12:48 修改

阅读量489

点赞数 12

分类专栏： threejs JAVAWEB JS 文章标签： webgl js

于 2024-01-15 13:06:00 首次发布

本文链接：https://blog.csdn.net/m0_73495473/article/details/135597843

版权

JAVAWEB 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

threejs

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

文章详细介绍了如何在Three.js环境中通过设置射线caster并监听鼠标点击事件，确定点击位置，然后在3D场景中找到被选中的对象，主要涉及了全屏和非全屏情况下的坐标转换以及对象类型判断。

摘要由CSDN通过智能技术生成

基本步骤

1、引入threejs

import * as THREE from "three";

2、设置一个射线

const raycaster = new THREE.Raycaster();

3、确定鼠标的点击位置

这是在全屏显示时（其中window即为全屏背景）：

 var mouse = new Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

如果模型背景不是全屏，而是屏幕的部分区域，则需要修改此部分代码（其中container可以根据document.getElementById(“div的id”)获取）：

const container= document.getElementById("threejs3D") as HTMLElement

 var mouse = new Vector2();
	mouse.x = ((event.clientX - container.getBoundingClientRect().left) / container.offsetWidth) * 2 - 1;
	mouse.y = -((event.clientY - container.getBoundingClientRect().top) / container.offsetHeight) * 2 + 1;

4、设置射线方向

根据两点确定一条直线，鼠标和相机形成的线即可

 raycaster.setFromCamera(mouse, camera);

5、确定选中的物体

intersects 即为选中物体，以数组形式存储

var intersects = raycaster.intersectObjects(scene.children);

完整代码如下

const raycaster = new THREE.Raycaster();
window.addEventListener("click", (event) => {
  event.preventDefault();
  const mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  // 设置Raycaster的起点为相机位置，并通过鼠标位置计算射线的方向
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
   if (intersects[0].object.type === "Mesh") {
      		// 选中的模型模型
     		 console.log(intersects[0].object)
    	}
    }
  })