three.js实现点击事件（vue）

three.js 实现点击事件

1.加载模型（通过点击模型触发事件）

2.通过射线获取到事件源 (new THREE.Raycaster()和new THREE.Vector2()）

3.通过点击到该模型使用名字匹配 clickedObject.name==“xx”

简单示例：

addEventListener监听事件触发

window.addEventListener("click",this.onClick,false);

创建 Raycaster和Vector2

const raycaster =newTHREE.Raycaster();const mouse =newTHREE.Vector2();

计算鼠标或触摸点的位置 （这里的event是通过事件监听获取）

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

更新射线

raycaster.setFromCamera( mouse,this.camera );

计算与所有对象的交点 得到一个数组

const intersects = raycaster.intersectObjects(this.scene.children,true);

判断交点数组的长度 （如果事件触发了会把监听到的数据放到该数组中）

if( intersects.length >0){// intersects[0] 包含了第一个交点  在这里处理事件const clickedObject = intersects[0].object;if(clickedObject.name===clickedObject.name){this.constructor(false)
      console.log("获取的当前模型信息:", clickedObject);alert(clickedObject.name)}}

下面是完整代码：

//监听点击事件
window.addEventListener("click",this.onClick,false);//事件函数methods:{onClick(event){const raycaster =newTHREE.Raycaster();const mouse =newTHREE.Vector2();// 计算鼠标或触摸点的位置
      mouse.x =(event.clientX / window.innerWidth)*2-1;
      mouse.y =-(event.clientY / window.innerHeight)*2+1;// 更新射线   注意——> this.camera 是相机   定义到data里的 
      raycaster.setFromCamera(mouse,this.camera);// 计算与所有对象的交点const intersects = raycaster.intersectObjects(this.scene.children,true);if(intersects.length >0){// 处理点击事件// intersects[0] 包含了第一个交点const clickedObject = intersects[0].object;//通过点击到该模型用名字匹配if(clickedObject.name === clickedObject.name){
          console.log("获取的当前模型信息:", clickedObject);alert(clickedObject.name);}}}}

下面是运行效果：

• 实现效果

以上是three.js的点击事件实现