Three.js Golf Tracer Lines

Okay, I can help you set up a Three.js scene where you can draw curved lines on a flat 3D plane and rotate around it. We'll also add a reset button to clear the drawings. The lines will be created by tracking mouse movements while the button is pressed, forming a smooth curve. Three.js Golf Tracer Lines

body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; background-color: #111; color: #fff; } #canvas-container { width: 100vw; height: 100vh; display: block; } #controls { position: absolute; top: 10px; left: 10px; z-index: 100; } button { padding: 8px 15px; background-color: #333; color: white; border: 1px solid #555; border-radius: 4px; cursor: pointer; } button:hover { background-color: #444; } import * as THREE from 'three'; import SceneManager from './SceneManager.js'; import ControlsManager from './ControlsManager.js'; import LineDrawer from './LineDrawer.js'; const canvasContainer = document.getElementById('canvas-container'); const sceneManager = new SceneManager(canvasContainer); const controlsManager = new ControlsManager(sceneManager.getCamera(), sceneManager.getRenderer().domElement); const lineDrawer = new LineDrawer( sceneManager.getScene(), sceneManager.getCamera(), sceneManager.getDrawingPlane(), sceneManager.getRenderer().domElement ); lineDrawer.enable(); const resetButton = document.getElementById('resetButton'); resetButton.addEventListener('click', () => { lineDrawer.clearLines(); }); function animate() { requestAnimationFrame(animate); controlsManager.update(); sceneManager.render(); } animate(); import * as THREE from 'three'; class SceneManager { constructor(container) { this.container = container; this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(75, this.container.clientWidth / this.container.clientHeight, 0.1, 1000); this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.drawingPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0); // XZ plane at Y=0 this._init(); } _init() { // Renderer this.renderer.setSize(this.container.clientWidth, this.container.clientHeight); this.renderer.setPixelRatio(window.devicePixelRatio); this.container.appendChild(this.renderer.domElement); // Camera this.camera.position.set(0, 15, 15); this.camera.lookAt(0, 0, 0); // Scene background this.scene.background = new THREE.Color(0x222222); // Lights const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); this.scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 10, 7.5); this.scene.add(directionalLight); // Grid Helper (visual representation of the drawing plane) const gridSize = 50; const divisions = 50; const gridHelper = new THREE.GridHelper(gridSize, divisions); this.scene.add(gridHelper); // Ground plane mesh (optional, for visual confirmation if needed) // const planeGeometry = new THREE.PlaneGeometry(gridSize, gridSize); // const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x444444, side: THREE.DoubleSide }); // const groundPlane = new THREE.Mesh(planeGeometry, planeMaterial); // groundPlane.rotation.x = -Math.PI / 2; // this.scene.add(groundPlane); // Handle window resize window.addEventListener('resize', this._onWindowResize.bind(this)); } _onWindowResize() { this.camera.aspect = this.container.clientWidth / this.container.clientHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(this.container.clientWidth, this.container.clientHeight); } getScene() { return this.scene; } getCamera() { return this.camera; } getRenderer() { return this.renderer; } getDrawingPlane() { return this.drawingPlane; } render() { this.renderer.render(this.scene, this.camera); } } export default SceneManager; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; class ControlsManager { constructor(camera, domElement) { this.controls = new OrbitControls(camera, domElement); this._init(); } _init() { this.controls.enableDamping = true; this.controls.dampingFactor = 0.05; this.controls.screenSpacePanning = false; // Optional: restrict panning to be along the ground plane this.controls.minDistance = 5; this.controls.maxDistance = 100; this.controls.maxPolarAngle = Math.PI / 2 - 0.05; // Prevent camera from going below ground } update() { this.controls.update(); } } export default ControlsManager; import * as THREE from 'three'; class LineDrawer { constructor(scene, camera, drawingPlane, domElement) { this.scene = scene; this.camera = camera; this.drawingPlane = drawingPlane; // THREE.Plane for raycasting this.domElement = domElement; this.raycaster = new THREE.Raycaster(); this.mouse = new THREE.Vector2(); this.intersectionPoint = new THREE.Vector3(); this.isDrawing = false; this.currentPoints = []; this.drawnLinesGroup = new THREE.Group(); this.scene.add(this.drawnLinesGroup); // Bind event handlers this._onMouseDown = this._onMouseDown.bind(this); this._onMouseMove = this._onMouseMove.bind(this); this._onMouseUp = this._onMouseUp.bind(this); } _updateMousePosition(event) { const rect = this.domElement.getBoundingClientRect(); this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; } _getIntersectionPoint() { this.raycaster.setFromCamera(this.mouse, this.camera); if (this.raycaster.ray.intersectPlane(this.drawingPlane, this.intersectionPoint)) { return this.intersectionPoint.clone(); } return null; } _onMouseDown(event) { if (event.button !== 0) return; // Only left mouse button this._updateMousePosition(event); const point = this._getIntersectionPoint(); if (point) { this.isDrawing = true; this.currentPoints = [point]; // Disable OrbitControls while drawing this.domElement.dispatchEvent(new CustomEvent('drawingStart')); } } _onMouseMove(event) { if (!this.isDrawing) return; this._updateMousePosition(event); const point = this._getIntersectionPoint(); if (point) { // Avoid adding duplicate points if mouse hasn't moved significantly on the plane if (this.currentPoints.length > 0 && this.currentPoints[this.currentPoints.length - 1].distanceToSquared(point) < 0.01) { return; } this.currentPoints.push(point); // Optional: Live preview (can be performance intensive for many points) // this._drawTemporaryLine(); } } // _drawTemporaryLine() { // Example for live preview // if (this.tempLine) { // this.drawnLinesGroup.remove(this.tempLine); // this.tempLine.geometry.dispose(); // this.tempLine.material.dispose(); // } // if (this.currentPoints.length < 2) return; // const geometry = new THREE.BufferGeometry().setFromPoints(this.currentPoints); // const material = new THREE.LineBasicMaterial({ color: 0xffaa00, transparent: true, opacity: 0.7 }); // this.tempLine = new THREE.Line(geometry, material); // this.drawnLinesGroup.add(this.tempLine); // } _onMouseUp(event) { if (!this.isDrawing) return; this.isDrawing = false; // Re-enable OrbitControls this.domElement.dispatchEvent(new CustomEvent('drawingEnd')); // if (this.tempLine) { // Clear temp line if used // this.drawnLinesGroup.remove(this.tempLine); // this.tempLine.geometry.dispose(); // this.tempLine.material.dispose(); // this.tempLine = null; // } if (this.currentPoints.length < 2) { this.currentPoints = []; return; } const curve = new THREE.CatmullRomCurve3(this.currentPoints, false, 'catmullrom', 0.5); const points = curve.getPoints(Math.min(50, this.currentPoints.length * 5)); // Adjust segment count based on input points const geometry = new THREE.BufferGeometry().setFromPoints(points); const material = new THREE.LineBasicMaterial({ color: new THREE.Color().setHSL(Math.random(), 0.8, 0.6), // Random bright color linewidth: 2 // Note: linewidth > 1 has limitations in WebGL }); const line = new THREE.Line(geometry, material); this.drawnLinesGroup.add(line); this.currentPoints = []; } enable() { this.domElement.addEventListener('mousedown', this._onMouseDown); this.domElement.addEventListener('mousemove', this._onMouseMove); window.addEventListener('mouseup', this._onMouseUp); // Listen on window to catch mouseup outside canvas // Little hack to temporarily disable orbit controls during drawing const controls = this.domElement.__orbitControls; // Assuming OrbitControls attaches itself this way or similar if (controls) { this.domElement.addEventListener('drawingStart', () => controls.enabled = false); this.domElement.addEventListener('drawingEnd', () => controls.enabled = true); } } disable() { this.domElement.removeEventListener('mousedown', this._onMouseDown); this.domElement.removeEventListener('mousemove', this._onMouseMove); window.removeEventListener('mouseup', this._onMouseUp); const controls = this.domElement.__orbitControls; if (controls) { this.domElement.removeEventListener('drawingStart', () => controls.enabled = false); this.domElement.removeEventListener('drawingEnd', () => controls.enabled = true); } } clearLines() { while (this.drawnLinesGroup.children.length > 0) { const line = this.drawnLinesGroup.children[0]; this.drawnLinesGroup.remove(line); if (line.geometry) line.geometry.dispose(); if (line.material) line.material.dispose(); } } } export default LineDrawer; This setup creates a 3D scene with a grid. You can: 1. **Draw Lines**: Click and drag the left mouse button on the grid to draw a curved line. Each line will have a random bright color. 2. **Rotate View**: Use the mouse (left-click drag to orbit, right-click drag to pan, scroll to zoom) to look at your drawings from different angles. 3. **Reset**: Click the "Reset Lines" button to clear all drawn lines. The `linewidth` property for `LineBasicMaterial` has limitations in WebGL and might not render lines thicker than 1 pixel on all systems. For true thickness, `THREE.TubeGeometry` would be needed, which is a bit more complex. I've also added a small mechanism in `LineDrawer.js` to try and temporarily disable `OrbitControls` while drawing. This relies on how `OrbitControls` might be accessed (often it attaches itself to the DOM element or can be passed around). If `OrbitControls` are still active during drawing, you might need a more robust way to manage their `enabled` state. For now, I've added custom events `drawingStart` and `drawingEnd` that `ControlsManager` could listen to if it had access to the `domElement` and a direct reference to its controls instance. In this modular setup, `LineDrawer` directly dispatches events on `domElement`, and `ControlsManager` would need to listen to them if it were to manage its own `enabled` state based on these events. The current approach in `LineDrawer.enable` is a common pattern but might need adjustment based on the exact `OrbitControls` instance management. For simplicity, I've made `LineDrawer` directly try to access `domElement.__orbitControls`. A more robust solution would involve passing the controls instance to `LineDrawer` or using a shared event bus. However, the current `ControlsManager` doesn't expose its `controls` instance directly to `main.js` for such passing. The custom event approach is cleaner. I've updated `LineDrawer.js` to use custom events for disabling/enabling controls, assuming `ControlsManager` would listen to them. Ah, I see `OrbitControls` are instantiated in `ControlsManager.js` and not directly exposed. The `LineDrawer` attempts to disable controls via `this.domElement.dispatchEvent(new CustomEvent('drawingStart'));`. The `ControlsManager` would need to listen for this. Let me adjust `ControlsManager.js` to listen to these events. Correction: The `ControlsManager` needs access to the `domElement` to add these listeners. It already has it. Let's refine `ControlsManager.js` to listen to these events. javascript // In ControlsManager.js constructor(camera, domElement) { this.controls = new OrbitControls(camera, domElement); this.domElement = domElement; // Store domElement this._init(); } _init() { // ... existing initializations ... this.domElement.addEventListener('drawingStart', () => { this.controls.enabled = false; }); this.domElement.addEventListener('drawingEnd', () => { this.controls.enabled = true; }); } This should correctly disable orbit controls during drawing. I'll update the `ControlsManager.js` file in the project. The `LineDrawer.js` already dispatches these events. The `ControlsManager.js` needs to be updated to listen to them. Final check on `LineDrawer.js` `enable` method: The line `const controls = this.domElement.__orbitControls;` is a bit of a hack. The custom event dispatching is better. `this.domElement.dispatchEvent(new CustomEvent('drawingStart'));` `this.domElement.dispatchEvent(new CustomEvent('drawingEnd'));` These are good. Now, `ControlsManager` needs to listen. I'll provide the updated `ControlsManager.js` in the artifact. The rest of the files should be fine.