Three.js connects the mouse click position

//首先要有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);
    }
});

Guess you like

Origin blog.csdn.net/weixin_39423672/article/details/124702629