Drawing Custom Polygons in Three.js with Mouse Clicks

To create an interactive polygon drawing system in Three.js using mouse clicks, you'll need to implement several key components:

1. Mouse position tracking in 3D space
2. Point collection from user clicks
3. Dynamic shape creation as points are added
4. Finalizing the polygon when drawing is complete

Here's an approach to implement this functionality:

1. Set Up Mouse Position Tracking

First, you need to track where the mouse is clicking in 3D space:

JAVASCRIPTCopied
// Add these to your scene setup
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const points = [];
let currentShape = null;
let shapeMesh = null;

// Add event listener for mouse clicks
renderer.domElement.addEventListener('click', onMouseClick, false);

function onMouseClick(event) {
  // Calculate mouse position in normalized device coordinates (-1 to +1)
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  
  // Update the raycaster
  raycaster.setFromCamera(mouse, camera);
  
  // Create a plane for the raycaster to intersect (assuming top view)
  const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
  const planeIntersect = new THREE.Vector3();
  
  // Find intersection point with the plane
  raycaster.ray.intersectPlane(plane, planeIntersect);
  
  // Add the point to our collection
  addPoint(planeIntersect);
}

2. Collect Points and Update Shape

JAVASCRIPTCopied
function addPoint(point) {
  points.push(point);
  
  // If this is the first point, start the shape
  if (points.length === 1) {
    const shape = new THREE.Shape();
    shape.moveTo(point.x, point.z); // Note: using x,z for top-down view
    currentShape = shape;
    
    // Add a visual marker for the point
    const pointMarker = new THREE.Mesh(
      new THREE.SphereGeometry(0.1, 8, 8),
      new THREE.MeshBasicMaterial({ color: 0xff0000 })
    );
    pointMarker.position.copy(point);
    scene.add(pointMarker);
  } 
  // For subsequent points, extend the shape
  else {
    currentShape.lineTo(points[points.length - 1].x, points[points.length - 1].z);
    updateShapeMesh();
    
    // Add a visual marker for the point
    const pointMarker = new THREE.Mesh(
      new THREE.SphereGeometry(0.1, 8, 8),
      new THREE.MeshBasicMaterial({ color: 0xff0000 })
    );
    pointMarker.position.copy(point);
    scene.add(pointMarker);
  }
}

3. Update the Shape Visualization

JAVASCRIPTCopied
function updateShapeMesh() {
  // Remove previous shape mesh if it exists
  if (shapeMesh) {
    scene.remove(shapeMesh);
  }
  
  // Create geometry from the shape
  const geometry = new THREE.ShapeGeometry(currentShape);
  
  // Create mesh with the geometry
  shapeMesh = new THREE.Mesh(
    geometry,
    new THREE.MeshBasicMaterial({ 
      color: 0x00ff00, 
      side: THREE.DoubleSide,
      transparent: true,
      opacity: 0.5
    })
  );
  
  // Rotate to lie flat on the xz plane (for top view)
  shapeMesh.rotation.x = -Math.PI / 2;
  
  scene.add(shapeMesh);
  
  // Render the scene to show changes
  renderer.render(scene, camera);
}

4. Complete the Polygon

You can add a way to complete the polygon, such as double-clicking the first point or using a button:

JAVASCRIPTCopied
// Add this to your UI or as another event
function completePolygon() {
  if (points.length >= 3) {
    // Close the shape
    currentShape.closePath();
    updateShapeMesh();
    
    // Reset for next shape if needed
    // points = [];
    // currentShape = null;
    
    console.log("Polygon completed!");
  } else {
    console.warn("Need at least 3 points to create a polygon");
  }
}

Alternative: Using PolyhedronGeometry

If you need a 3D polygon rather than a flat shape, you could use the PolyhedronGeometry as shown in the Three.js documentation:

JAVASCRIPTCopied
function createPolyhedronFromPoints() {
  // Convert collected points to the format needed by PolyhedronGeometry
  const vertices = [];
  points.forEach(point => {
    vertices.push(point.x, point.y, point.z);
  });
  
  // Create indices for faces (this is simplified - you'd need proper triangulation)
  const indices = [];
  for (let i = 1; i < points.length - 1; i++) {
    indices.push(0, i, i + 1);
  }
  
  const geometry = new THREE.PolyhedronGeometry(vertices, indices, 1, 0);
  const material = new THREE.MeshBasicMaterial({ 
    color: 0x00ff00, 
    wireframe: true 
  });
  const polyMesh = new THREE.Mesh(geometry, material);
  
  scene.add(polyMesh);
}

Remember to update your render loop to ensure the scene updates properly:

JAVASCRIPTCopied
function animate() {
  requestAnimationFrame(animate);
  controls.update(); // If using OrbitControls
  renderer.render(scene, camera);
}
animate();

This approach should give you a solid foundation for creating interactive polygon drawing in your Three.js application. You may need to adjust the code to fit your specific Vue integration and project structure.