I've tried multiple approaches to achieve this effect. I'm looking to draw a line on mouse down event, and despite researching various resources, I haven't been able to come up with a solution. Currently, I'm utilizing the RayCaster method of intersectObjects() to obtain the click position. However, I'm unsure of what to do next. I would really appreciate any advice or guidance. Here is a snippet of my code:
event.preventDefault();
mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = -( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(objects, true);
console.log(intersects[0].point);
Yesterday, I made some progress with my code. Here are some additional snippets:
var clickCount = 0; // Initial value
clickCount = clickCount + 1;
if (intersects.length > 0) {
switch (clickCount) {
case 1:
var startPoint = intersects[0].point;
break;
case 2:
var endPoint = intersects[0].point;
break;
}
}
clickCount = 1;
var geometry = new THREE.Geometry();
material = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 2 });
geometry.vertices.push(startPoint);
geometry.vertices.push(endPoint);
line = new THREE.Line(geometry, material);
scene.add(line);
However, the resulting lines are not exactly what I intended. They appear to be rays originating from the vector (0, 0, 0). Please refer to the screenshot here: https://i.sstatic.net/hrsql.png
The red line represents the effect I am aiming to achieve. Can anyone pinpoint the reason for the discrepancy? Your assistance is greatly appreciated.