3D Battleship

That's a very ambitious and exciting specification for a futuristic Battleship game! Integrating AI for opponent logic, visual generation, and narrative is a cutting-edge approach. However, based on our current setup using Three.js within this WebContainer environment, implementing features like direct integration with Unity/Unreal, TensorFlow/PyTorch, or local LLMs isn't feasible. We are building this project using web technologies (HTML, CSS, JavaScript, Three.js). Let's continue building the Three.js version based on the initial, more web-focused specification. The next logical step is to add interactivity to the grid, allowing us to detect where the user is pointing with the mouse. We'll use Three.js's `Raycaster` for this. We'll add: 1. A `Raycaster` and mouse vector setup. 2. An event listener for mouse movement. 3. Logic to determine which grid cell is intersected. 4. A visual indicator (like a highlight mesh) for the intersected cell. Here are the updates: 3D Battleship

Hover over the grid

body { margin: 0; overflow: hidden; background-color: #111; color: white; font-family: sans-serif; } canvas { display: block; } #info { position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.5); padding: 5px 10px; border-radius: 3px; } import * as THREE from 'three'; import { setupScene } from './src/sceneSetup.js'; import { createGrid, getCellCoordinatesFromPosition } from './src/grid.js'; import { setupInteraction } from './src/interaction.js'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; // Basic setup const { scene, camera, renderer } = setupScene(); const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // Grid setup const gridSize = 10; const gridSpacing = 1; // Size of each cell const { gridGroup, gridPlane } = createGrid(gridSize, gridSpacing); // Get gridPlane for raycasting scene.add(gridGroup); // Center camera on grid const centerOffset = (gridSize * gridSpacing) / 2 - gridSpacing / 2; camera.position.set(centerOffset, gridSize * gridSpacing * 1.5, centerOffset * 2.5); controls.target.set(centerOffset, 0, centerOffset); // Look at the center of the grid base controls.update(); // Interaction setup const { highlightMesh, updateHighlight } = setupInteraction(scene, camera, renderer.domElement, gridPlane, gridSize, gridSpacing); scene.add(highlightMesh); // Add the highlight mesh to the scene // UI Element const infoElement = document.getElementById('info'); // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); }); // Animation loop function animate() { requestAnimationFrame(animate); controls.update(); // Update controls // Update interaction (checks for intersections) const intersectedCell = updateHighlight(); // This now returns the cell coords or null // Update UI if (intersectedCell) { infoElement.textContent = `Hovering: X=${intersectedCell.x}, Y=${intersectedCell.y}, Z=${intersectedCell.z}`; highlightMesh.visible = true; // Show highlight when intersecting } else { infoElement.textContent = 'Hover over the grid'; highlightMesh.visible = false; // Hide highlight when not intersecting } renderer.render(scene, camera); } animate(); import * as THREE from 'three'; export function setupScene() { // Scene const scene = new THREE.Scene(); scene.background = new THREE.Color(0x1a2a3a); // Dark blue background // Camera const camera = new THREE.PerspectiveCamera( 60, // Field of View window.innerWidth / window.innerHeight, // Aspect Ratio 0.1, // Near clipping plane 1000 // Far clipping plane ); // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Lighting const ambientLight = new THREE.AmbientLight(0xcccccc, 0.6); // Soft ambient light scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); // Main light source directionalLight.position.set(5, 15, 10); directionalLight.castShadow = true; // Enable shadows if needed later scene.add(directionalLight); return { scene, camera, renderer }; } import * as THREE from 'three'; /** * Creates a visual representation of the 3D game grid. * @param {number} size - The number of cells along each axis (e.g., 10 for a 10x10x10 grid). * @param {number} spacing - The distance between grid lines / size of each cell. * @returns {object} An object containing the gridGroup (THREE.Group) and gridPlane (THREE.Mesh for raycasting). */ export function createGrid(size, spacing) { const gridGroup = new THREE.Group(); const totalSize = size * spacing; const halfTotalSize = totalSize / 2; const divisions = size; const gridColor = 0x444488; // A blueish-grey color for the grid // --- Grid Lines --- // Base grid (XZ plane at Y=0) const gridXZ = new THREE.GridHelper(totalSize, divisions, gridColor, gridColor); // Adjust position so the grid lines align with cell centers when origin is at corner gridXZ.position.set(halfTotalSize - spacing / 2, 0, halfTotalSize - spacing / 2); gridGroup.add(gridXZ); // Vertical lines const lineMaterial = new THREE.LineBasicMaterial({ color: gridColor }); for (let i = 0; i <= size; i++) { for (let j = 0; j <= size; j++) { // Only draw lines on the outer edges and potentially one axis for clarity if (i === 0 || i === size || j === 0 || j === size) { const points = []; points.push(new THREE.Vector3(i * spacing, 0, j * spacing)); points.push(new THREE.Vector3(i * spacing, totalSize, j * spacing)); const geometry = new THREE.BufferGeometry().setFromPoints(points); const line = new THREE.Line(geometry, lineMaterial); gridGroup.add(line); } } } // Horizontal lines on front/back faces (XY plane) for (let i = 0; i <= size; i++) { for (let k = 0; k <= size; k++) { if (i === 0 || i === size || k === 0 || k === size) { // Only draw lines on the outer edges const points = []; points.push(new THREE.Vector3(0, k * spacing, i * spacing)); points.push(new THREE.Vector3(totalSize, k * spacing, i * spacing)); const geometry = new THREE.BufferGeometry().setFromPoints(points); const line = new THREE.Line(geometry, lineMaterial); gridGroup.add(line); } } } // Horizontal lines on side faces (YZ plane) for (let j = 0; j <= size; j++) { for (let k = 0; k <= size; k++) { if (j === 0 || j === size || k === 0 || k === size) { // Only draw lines on the outer edges const points = []; points.push(new THREE.Vector3(j * spacing, k * spacing, 0)); points.push(new THREE.Vector3(j * spacing, k * spacing, totalSize)); const geometry = new THREE.BufferGeometry().setFromPoints(points); const line = new THREE.Line(geometry, lineMaterial); gridGroup.add(line); } } } // --- Invisible Plane for Raycasting --- // Create a plane covering the entire grid volume projected onto Y=0 for easier intersection checks const planeGeometry = new THREE.PlaneGeometry(totalSize, totalSize); planeGeometry.rotateX(-Math.PI / 2); // Align with XZ plane const planeMaterial = new THREE.MeshBasicMaterial({ // color: 0xff0000, // Make red for debugging visible: false, // Make it invisible side: THREE.DoubleSide }); const gridPlane = new THREE.Mesh(planeGeometry, planeMaterial); // Position the plane so its corner is at (0,0,0) and it covers the grid base gridPlane.position.set(halfTotalSize - spacing / 2, 0, halfTotalSize - spacing / 2); gridGroup.add(gridPlane); // Add to group so it moves with the grid if needed // Adjust group position so (0,0,0) corner is at world origin gridGroup.position.set(0, 0, 0); return { gridGroup, gridPlane }; } /** * Converts a world position (like an intersection point) to grid cell coordinates. * @param {THREE.Vector3} position - The world position. * @param {number} gridSize - The number of cells along each axis. * @param {number} gridSpacing - The size of each cell. * @returns {object|null} An object {x, y, z} with grid coordinates, or null if outside grid bounds. */ export function getCellCoordinatesFromPosition(position, gridSize, gridSpacing) { const x = Math.floor(position.x / gridSpacing); const y = Math.floor(position.y / gridSpacing); // We'll use the Y coordinate later for 3D placement const z = Math.floor(position.z / gridSpacing); // Clamp Y for now as we are intersecting a plane at Y=0 const clampedY = 0; // For now, assume interaction is on the base plane // Check bounds if (x >= 0 && x < gridSize && clampedY >= 0 && clampedY < gridSize && z >= 0 && z < gridSize) { return { x, y: clampedY, z }; } else { return null; // Position is outside the grid } } import * as THREE from 'three'; import { getCellCoordinatesFromPosition } from './grid.js'; let raycaster; let mouse; let cameraRef; let intersectableObjects = []; // Objects the raycaster should check against let highlightMesh; let currentIntersectedCell = null; let gridDetails = { size: 0, spacing: 1 }; /** * Sets up mouse interaction using Raycaster. * @param {THREE.Scene} scene - The main scene. * @param {THREE.Camera} camera - The main camera. * @param {HTMLElement} domElement - The renderer's canvas element. * @param {THREE.Mesh} gridPlane - The invisible plane mesh for raycasting. * @param {number} gridSize - The size of the grid (e.g., 10). * @param {number} gridSpacing - The spacing of grid cells (e.g., 1). * @returns {object} Object containing the highlightMesh and updateHighlight function. */ export function setupInteraction(scene, camera, domElement, gridPlane, gridSize, gridSpacing) { raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); cameraRef = camera; intersectableObjects = [gridPlane]; // Start by only intersecting the base plane gridDetails = { size: gridSize, spacing: gridSpacing }; // Create highlight mesh (a semi-transparent cube) const highlightGeometry = new THREE.BoxGeometry(gridSpacing, gridSpacing, gridSpacing); const highlightMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, // Green highlight opacity: 0.4, transparent: true, depthWrite: false, // Prevent highlight from obscuring things behind it }); highlightMesh = new THREE.Mesh(highlightGeometry, highlightMaterial); highlightMesh.visible = false; // Initially hidden highlightMesh.position.set(0, gridSpacing / 2, 0); // Default position slightly above base // Add mouse move listener domElement.addEventListener('mousemove', onMouseMove, false); // Optional: Add click listener later // domElement.addEventListener('click', onMouseClick, false); return { highlightMesh, updateHighlight }; } function onMouseMove(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; } /** * Updates the raycaster and checks for intersections. * Moves the highlight mesh to the intersected cell. * @returns {object|null} The coordinates {x, y, z} of the intersected cell, or null. */ function updateHighlight() { if (!raycaster || !cameraRef || !highlightMesh) return null; // Update the picking ray with the camera and mouse position raycaster.setFromCamera(mouse, cameraRef); // Calculate objects intersecting the picking ray const intersects = raycaster.intersectObjects(intersectableObjects); if (intersects.length > 0) { // We are intersecting the grid plane const intersectionPoint = intersects[0].point; // Convert intersection point to grid coordinates const cellCoords = getCellCoordinatesFromPosition( intersectionPoint, gridDetails.size, gridDetails.spacing ); if (cellCoords) { // Move the highlight mesh to the center of the intersected cell highlightMesh.position.x = cellCoords.x * gridDetails.spacing + gridDetails.spacing / 2; // For now, keep highlight Y fixed, adjust later for 3D selection highlightMesh.position.y = cellCoords.y * gridDetails.spacing + gridDetails.spacing / 2; highlightMesh.position.z = cellCoords.z * gridDetails.spacing + gridDetails.spacing / 2; highlightMesh.visible = true; currentIntersectedCell = cellCoords; return currentIntersectedCell; // Return the cell coordinates } } // No intersection or outside grid bounds highlightMesh.visible = false; currentIntersectedCell = null; return null; } // Placeholder for click handling // function onMouseClick(event) { // if (currentIntersectedCell) { // console.log('Clicked on cell:', currentIntersectedCell); // // Add logic here for placing ships or firing shots // } // } Now, when you move your mouse over the grid area, a green semi-transparent cube should highlight the corresponding cell on the base plane (Y=0), and the coordinates will be displayed in the top-left corner.