Prompt: Isometric 3D Farming Simulator (Three.js)

Core Technical Stack

1. Library: Three.js (r128+)
2. Loader: GLTFLoader for external assets.
3. Camera: OrthographicCamera for a true isometric view.
4. Position: (20, 20, 20) looking at (0, 0, 0).
5. View frustum: d = 10.

Scene Setup

1. Background: Solid color #a3d5ff.
2. Lighting: - AmbientLight (Intensity: 0.7).
3. DirectionalLight (Intensity: 0.9) at (10, 20, 10) with shadow casting enabled.
4. Environment:
5. Ground: A 15x1x15 BoxGeometry colored #7cfc00 (Grass), positioned at y = -0.51.
6. Pond: A CylinderGeometry (radius 2, height 0.4) colored #00a8ff. Position: (-4, 0.01, -4). Add a subtle sine-wave animation to the y position to simulate water movement.

Asset Handling: Farming Plot

1. Model URL: https://cloudxlr.com/resources/models/farmingplot.glb
2. Transformation Rules:
3. Scale: 0.6 for all axes.
4. Rotation: Must be rotated Math.PI / 2 (90 degrees) on the Y-axis to align with the isometric grid.
5. Positions: Place three plots at the following coordinates:
6. (3, 0, 4)
7. (3, 0, 0)
8. (3, 0, -4)
9. Color Logic:
10. On initialization, traverse the model and store the original material colors in node.userData.originalColor.
11. When watered, lerp the material color towards black by 0.4 to represent wet soil.
12. On harvest, restore the exact originalColor.

Interaction & UI Logic

1. Raycasting: Use a Raycaster to detect clicks.
2. The Bucket System:
3. Clicking the Pond makes a bucket (CylinderGeometry) appear.
4. Critical Rule: Set bucket.raycast = function() {}; so the bucket does not block the Raycaster from hitting the plots or ground.
5. The bucket must follow the mouse cursor projected onto the ground plane.
6. States:
7. EMPTY: Default state. Clicking with a bucket transitions to GROWING.
8. GROWING: Procedural plants (stem + leaves) scale from 0.1 to 1.5 over 5 seconds.
9. READY: Plant turns bright green. A Golden Outline appears.
10. Golden Outline Effect:
11. Do not use a box helper.
12. Traverse the plot model and create duplicates of its meshes.
13. Set the duplicate material to THREE.MeshBasicMaterial with color: 0xffd700 and side: THREE.BackSide.
14. Scale the duplicate slightly larger (multiplyScalar(1.06)).
15. Animate material.opacity with a sine wave for a pulsing glow.
16. Harvesting:
17. Clicking a READY plot opens a custom HTML modal.
18. Closing the modal increments the score, clears the plant, and removes the golden outline.

Performance & UX

1. Handle window resizing by updating the OrthographicCamera frustum.
2. Instructions overlay at the bottom: "Click Pond to get Water • Click Plot to Plant • Click Grown Crop to Harvest".