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":5,"fork_count":1,"expires_at":null,"created_at":"2024-11-07T20:29:11.852422Z","updated_at":"2024-11-07T20:29:11.852425Z","user_id":60,"status":"PRIVATE","parent_id":4446,"id":4467,"user":{"username":"2718281828459045","id":60,"password_hash":"$2b$12$ZpelZmCi5wEA/VuXSdOJXeylQ6vOUks0sfwQxIKdjwBAeamaWIMOW","updated_at":"2024-02-26T18:31:54.473218Z","reset_token_expiry":null,"subscription_status":"active","photo":null,"email":"jacob@jippity.pro","recess_id":"34481dd2-2bdf-14f9-99da-131de59dc90f","created_at":"2024-02-26T18:31:54.473216Z","reset_token":null,"stripe_customer_id":"cus_RPbovGjLueUufv","seats":100},"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,"created_at":"2024-11-07T20:14:38.783727Z","resource_type":"image","id":46273,"cloudinary_id":"xe3klbmonitybadnjcnh","name":"thumnale","deleted":false}],"messages_sent":7,"comments":[],"steps":[]}