我要评论vue3+three.js为模型添加点击事件
监听鼠标点击事件
使用const mouse = new three.vector2();鼠标位置；
使用raycaster射线投射器，光线的位置。
// 射线投射器
const raycaster = new three.raycaster();
const mouse = new three.vector2();
const onmouseclick =(event) => {
// 计算鼠标点击位置
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, true);
if (intersects.length > 0) {
// 点击到模型时的处理
const selectedobject = intersects[0].object;
// 检查点击的对象是否为模型
if (selectedobject.name) {
if (selectedobject.parent.position.z === 0) {
selectedobject.parent.position.z += 10
}else {
selectedobject.parent.position.z -= 10
}
}
}
}
// 鼠标点击事件监听器
window.addeventlistener('click', onmouseclick, false);通过鼠标的位置与光线的位置重合
来获取模型信息
if (intersects.length > 0) 成立的条件下，处理点击事件。
此处是将选中的模型组进行沿z轴平移10个单位。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论