Hello I am new to three js. This below is the function that create a free hand polygon on mouse click. Now I want to add a functionality that After the 1st mouse click I want to display a line that follows a mouse cursor until the 2nd mouse is clicked.
function pointerDown(event) {
const rect = event.target.getBoundingClientRect();
const mouse = new THREE.Vector2();
mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, orthoCamera);
const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
const intersection = new THREE.Vector3();
raycaster.ray.intersectPlane(plane, intersection);
if(intersection.length>0){
}
if (drawing) {
if (points.length > 1) {
const firstPoint = points[0];
const distanceToFirstPoint = firstPoint.distanceTo(intersection);
if (distanceToFirstPoint < proximityThreshold) {
// points.push(points[0].clone());
finalPoints = [...points];
drawing = false;
const newPoints = points.map(
(point) => new THREE.Vector3(point.x, point.y, point.z)
);
const shape = new THREE.Shape(
newPoints.map((point) => new THREE.Vector2(point.x, point.y))
);
const extrudeSettings = {
depth: 0,
bevelEnabled: false,
};
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const material = new THREE.MeshBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
});
mesh = new THREE.Mesh(geometry, material);
mesh.position.z = objectZCoordinate;
sceneCopy.add(mesh);
points = [];
}
}
if (drawing) {
const unprojectedPoint = intersection.clone();
unprojectedPoint.z = objectZCoordinate + 1;
points.push(unprojectedPoint);
const geometry = new THREE.CircleGeometry(3, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const circle = new THREE.Mesh(geometry, material);
circle.position.copy(unprojectedPoint);
sceneCopy.add(circle);
circles.push(circle);
if (points.length > 1) {
const lineGeometry = new THREE.BufferGeometry().setFromPoints(
points
);
const lineMaterial = new THREE.LineBasicMaterial({
color: 0xffa500,
linewidth: 15,
});
const line = new THREE.Line(lineGeometry, lineMaterial);
sceneCopy.add(line);
lines.push(line);
}
}
} else {
drawing = true;
const unprojectedPoint = intersection.clone();
unprojectedPoint.z = objectZCoordinate + 1;
const geometry = new THREE.CircleGeometry(3, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const circle = new THREE.Mesh(geometry, material);
circle.position.copy(unprojectedPoint);
sceneCopy.add(circle);
circles.push(circle);
points.push(unprojectedPoint.clone());
}
}