我用的的示例类发方式来初始化场景。
类里面定义点击方法。
initMouse(fun) {
window.addEventListener("click", (event) => {
this.clickObject(event, fun);
});
}
// 鼠标事件
clickObject(event, fun) {
// 计算点击位置的归一化设备坐标
const mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
// 创建射线投射器
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, this.camera);
// 获取与射线相交的物体数组
const intersects = raycaster.intersectObjects(this.scene.children, true);
if (intersects.length > 0) {
// intersects[0].object 是与射线相交的第一个物体
const clickedObject = intersects[0].object;
// 这里可以进一步处理点击的物体
fun(intersects[0].object);
// clickedObject.material.color.set(0xff0000); // 设置点击物体的颜色为红色
}
}
使用时调用initMouse传入回调函数。
ffThree.initMouse(callBack);
function callBack(obje) {
console.log("obje为选中的物体 下面写对选中物体做的事情");
obje.material.color.set(0xff0000);
}