Voxel Grid with Three.js

{"name":"JJ's THREE.js rewrite","description":"soon to be minecraft clone","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/xe3klbmonitybadnjcnh","view_count":6,"fork_count":0,"expires_at":null,"created_at":"2025-08-06T08:50:06.082420Z","updated_at":"2025-08-06T08:50:06.082421Z","user_id":246,"status":"DELETED","parent_id":4446,"id":4467,"user":{"photo":null,"email":"kristen@recess.gg","recess_id":"c4ad84f6-113d-480b-bc29-80549518b3ee","created_at":"2024-10-31T20:27:47.342142Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"chicothedog","id":246,"password_hash":"$2b$12$QgZsBBZ/7CFyOhVkfVhTNeoe4jAY.pIJOieTXeg0HWS23ZcCpiAeO","updated_at":"2024-10-31T20:27:47.342148Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// JavaScript global variables\nlet scene, camera, renderer, controls;\n\nlet voxelSize = 40;\n\nlet gridHeight = 10;\n\nlet voxelGrid = [];\n\nlet gridWidth = 10;\n\nlet gridDepth = 10;\n\n// Animation loop\nfunction animate() {\n requestAnimationFrame(animate);\n controls.update();\n renderer.render(scene, camera);\n}\n\n// Initialize the scene\ninit();\n\n// Initialize the Three.js scene\nfunction init() {\n scene = new THREE.Scene();\n\n // Set up the camera\n camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n camera.position.set(0, 100, 500);\n\n // Set up the renderer\n renderer = new THREE.WebGLRenderer();\n renderer.setSize(window.innerWidth, window.innerHeight);\n document.body.appendChild(renderer.domElement);\n\n // Set up orbit controls\n controls = new THREE.OrbitControls(camera, renderer.domElement);\n\n // Add directional light with increased intensity\n const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // Increased intensity\n directionalLight.position.set(0, 1, 0).normalize(); // Light coming from above\n scene.add(directionalLight);\n\n // Add ambient light with increased intensity\n const ambientLight = new THREE.AmbientLight(0x404040, 1); // Increased intensity\n scene.add(ambientLight);\n\n // Create the voxel grid\n createVoxelGrid();\n\n // Start the animation loop\n animate();\n}\n\n// Create the voxel grid\nfunction createVoxelGrid() {\n const geometry = new THREE.BoxGeometry(voxelSize, voxelSize, voxelSize);\n const material = new THREE.MeshLambertMaterial({ color: 0x9696ff });\n\n for (let x = 0; x < gridWidth; x++) {\n for (let z = 0; z < gridDepth; z++) {\n const voxel = new THREE.Mesh(geometry, material);\n voxel.position.set(\n (x - gridWidth / 2) * voxelSize,\n -voxelSize / 2, // Position on the ground\n (z - gridDepth / 2) * voxelSize\n );\n scene.add(voxel);\n voxelGrid.push(voxel);\n\n // Create the outline for each voxel\n const edges = new THREE.EdgesGeometry(geometry);\n const lineMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });\n const outline = new THREE.LineSegments(edges, lineMaterial);\n outline.position.copy(voxel.position);\n scene.add(outline);\n }\n }\n}\n\n","style.css":".ui-element {\n position: absolute;\n top: 20px;\n left: 20px;\n width: 100px;\n height: 100px;\n background-color: #3498db;\n border-radius: 10px;\n}\n\n.crosshair {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n background-color: transparent;\n border-left: 2px solid black;\n border-top: 2px solid black;\n transform: translate(-50%, -50%);\n pointer-events: none;\n}","index.html":"\n\n\n\n \n \n Voxel Grid with Three.js\n \n\n\n\n

\n \n \n \n\n\n"},"chat_history":[],"assets":[{"project_id":4467,"creator":null,"cloudinary_id":"xe3klbmonitybadnjcnh","deleted":false,"id":46273,"created_at":"2024-11-07T20:14:38.783727Z","name":"thumnale","resource_type":"image","tags":null}],"messages_sent":7,"comments":[],"steps":[]}