//首先要有raycaster控制器
mouse.x = (e.clientX / width) * 2 - 1;
mouse.y = -(e.clientY / height) * 2 + 1;
let raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
let intersects = raycaster.intersectObjects(scene.children);
if(intersects.length > 0) {
return intersects[0].point; // point 即点击坐标
}
let flag = true; //开启连线事件
let lineArr = []; //连线数组
let mouseGroup; //连线线段group
//鼠标点击事件 左击连线 右键取消
【场景】.addEventListener("CLICK", (e) => {
if (e.mouse == "left" && flag) {
scene.remove(mouseGroup);
mouseGroup = new Three.Group();
mouseGroup.name = "mouseGroup";
let pos = e.event[0].point;
lineArr.push([pos.x, pos.y, pos.z]);
for (var i = 1; i < lineArr.length; i++) {
// 创建线段简写
// 点1:[lineArr[i - 1][0], lineArr[i - 1][1], lineArr[i - 1][2]]
// 点2:[lineArr[i][0], lineArr[i][1], lineArr[i][2]]
var a = new THREE.Line(lineGeometry, lineMaterial)
mouseGroup.add(a);
}
scene.add(mouseGroup);
} else {
//右键关闭连线事件
flag = false;
}
});
let aaGroup; //鼠标移动辅助线段
// 鼠标移动事件
【场景】.addEventListener("MOUSEOVER", (e) => {
if (lineArr.length > 0 && flag) {
scene.remove(aaGroup);
aaGroup = new Three.Group();
aaGroup.name = "aaGroup";
var len = lineArr.length;
let pos = e.event[0].point;
// 创建线段简写
// 点1:[lineArr[len - 1][0], lineArr[len - 1][1], lineArr[len - 1][2]]
// 点2:[pos.x, pos.y, pos.z]
aaGroup.add(new THREE.Line(lineGeometry, lineMaterial));
scene.add(aaGroup);
}
});
Three.js connects the mouse click position
Guess you like
Origin blog.csdn.net/weixin_39423672/article/details/124702629
Ranking