Lego Builder 3D: Custom Lego Experience

{"name":"Lego Builder 3 D Custom Lego Experience","description":"Build and play with your own custom 3D lego models in an immersive game environment!","photo":"https://jippity.s3.amazonaws.com/Screenshot 2024-06-04 at 10.54.52 AM.png","view_count":4,"fork_count":0,"expires_at":null,"created_at":"2024-06-04T22:28:39.901731Z","updated_at":"2024-06-04T22:28:39.901733Z","user_id":60,"status":"PUBLIC","parent_id":1744,"id":1746,"user":{"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,"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"},"code":{"script.js":"function createLegoBase(width, depth, color) {\n const height = 1; // Standard height for Lego base\n const geometry = new THREE.BoxGeometry(width, height, depth);\n const material = new THREE.MeshPhongMaterial({ color: color });\n const base = new THREE.Mesh(geometry, material);\n base.name = 'legoBase'; // Tag the base\n\n // Adjust the position to have the origin at the bottom-left corner\n base.geometry.translate(width / 2, height / 2, depth / 2);\n\n return base;\n}\n\nfunction createLegoKnob(radius, height, color) {\n const geometry = new THREE.CylinderGeometry(radius, radius, height, 32);\n const material = new THREE.MeshPhongMaterial({ color: color });\n return new THREE.Mesh(geometry, material);\n}\n\nfunction createLegoBrick(width, depth, color) {\n const base = createLegoBase(width, depth, color);\n base.userData = { width, depth }; // Store dimensions in userData\n const baseHeight = 1; // Standard height for Lego base\n const knobRadius = 0.2; // Standard radius for Lego knobs\n const knobHeight = 0.2; // Standard height for Lego knobs\n const knobSpacing = 1; // Standard spacing between knobs\n\n // Calculate number of knobs based on width and depth\n const knobsX = Math.floor(width / knobSpacing);\n const knobsZ = Math.floor(depth / knobSpacing);\n\n for (let i = 0; i < knobsX; i++) {\n for (let j = 0; j < knobsZ; j++) {\n const knob = createLegoKnob(knobRadius, knobHeight, color);\n knob.position.set(\n (i + 0.5) * knobSpacing, // Adjusted position to center knobs\n baseHeight + knobHeight / 2,\n (j + 0.5) * knobSpacing // Adjusted position to center knobs\n );\n base.add(knob); // Add knob to the base\n }\n }\n\n return base; // Return the base mesh with knobs as children\n}\n\n// Function to snap a position to the nearest grid point\nfunction snapToGrid(position, gridSize) {\n return Math.round(position / gridSize) * gridSize;\n}\n\nlet isOrbitControlActive = true;\nlet dragControls, orbitControls;\n\n// Function to switch between orbit and drag controls\nfunction toggleControls() {\n isOrbitControlActive = !isOrbitControlActive;\n\n orbitControls.enabled = isOrbitControlActive;\n dragControls.enabled = !isOrbitControlActive;\n\n if (isOrbitControlActive) {\n // Trigger dragend for all draggable objects to force release\n dragControls.getObjects().forEach((object) => {\n object.dispatchEvent({ type: 'dragend' });\n });\n }\n\n document.getElementById('toggleControl').innerText = isOrbitControlActive ? 'Switch to Drag Mode (Press \\'T\\')' : 'Switch to Orbit Mode (Press \\'T\\')';\n}\n\ndocument.getElementById('toggleControl').addEventListener('click', toggleControls);\n\ndocument.addEventListener('keydown', (event) => {\n if (event.key === 't' || event.key === 'T') {\n toggleControls();\n }\n});\n\nfunction initScene() {\n const scene = new THREE.Scene();\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n const renderer = new THREE.WebGLRenderer({ alpha: true });\n renderer.setSize(window.innerWidth, window.innerHeight);\n document.body.appendChild(renderer.domElement);\n\n orbitControls = new THREE.OrbitControls(camera, renderer.domElement);\n orbitControls.enableDamping = true;\n orbitControls.dampingFactor = 0.25;\n orbitControls.screenSpacePanning = false;\n\n const light = new THREE.PointLight(0xffffff, 1, 1000);\n light.position.set(10, 10, 10);\n scene.add(light);\n\n const gridSize = 1;\n const draggableObjects = []; // Array to hold draggable objects\n\n // Example bricks\n const lego2x2 = createLegoBrick(2, 2, 0xff0000);\n lego2x2.position.set(snapToGrid(0, gridSize), snapToGrid(0, gridSize), snapToGrid(0, gridSize));\n scene.add(lego2x2);\n draggableObjects.push(lego2x2); // Add base to draggable objects\n\n const lego2x4 = createLegoBrick(2, 4, 0x0000ff);\n lego2x4.position.set(snapToGrid(3, gridSize), snapToGrid(0, gridSize), snapToGrid(0, gridSize));\n scene.add(lego2x4);\n draggableObjects.push(lego2x4); // Add base to draggable objects\n\n camera.position.z = 10;\n\n // Event listener for adding new bricks\n document.getElementById('addBrick').addEventListener('click', () => {\n const width = parseInt(document.getElementById('width').value);\n const depth = parseInt(document.getElementById('depth').value);\n const color = document.getElementById('color').value;\n const brick = createLegoBrick(width, depth, color);\n\n // Snap position to grid\n const x = snapToGrid(Math.random() * 10 - 5, gridSize);\n const y = snapToGrid(0, gridSize); // Always snap to the ground level\n const z = snapToGrid(Math.random() * 10 - 5, gridSize);\n brick.position.set(x, y, z);\n\n scene.add(brick);\n draggableObjects.push(brick); // Add base to draggable objects\n });\n\n // Initialize drag controls with only the base objects\n dragControls = new THREE.DragControls(draggableObjects, camera, renderer.domElement);\n // Event listener for drag start\n dragControls.addEventListener('dragstart', (event) => {\n if (isOrbitControlActive || event.object.name !== 'legoBase') {\n dragControls.enabled = false; // Disable dragging if in orbit mode or not a base\n } else {\n event.object.material.emissive.set(0xaaaaaa); // Highlight the dragged object\n }\n });\n\n // Event listener for drag\n dragControls.addEventListener('drag', (event) => {\n if (!isOrbitControlActive && event.object.name === 'legoBase') {\n event.object.position.set(\n snapToGrid(event.object.position.x, gridSize),\n snapToGrid(event.object.position.y, gridSize),\n snapToGrid(event.object.position.z, gridSize)\n );\n }\n });\n\n // Event listener for drag end\n dragControls.addEventListener('dragend', (event) => {\n if (!isOrbitControlActive && event.object.name === 'legoBase') {\n event.object.material.emissive.set(0x000000); // Remove highlight from object\n }\n dragControls.enabled = true; // Re-enable dragging\n });\n\n const animate = () => {\n requestAnimationFrame(animate);\n orbitControls.update();\n renderer.render(scene, camera);\n };\n\n animate();\n}\n\ninitScene();","style.css":"","index.html":"\n\n\n\n \n \n Lego Builder 3D: Custom Lego Experience\n \n\n\n\n

\n Width (1-8):\n \n Depth (1-8):\n \n Color:\n \n \n \n

\n \n \n \n \n \n\n\n\n"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[{"step_number":0,"complete":false,"updated_at":"2024-06-04T22:28:39.905587","id":9442,"title":"Realistic Building Interactions","instruction":"Implement interactive building interactions to mimic real-life lego building, including snapping blocks together and rotating pieces.","created_at":"2024-06-04T15:31:55.740284","project_id":1746},{"step_number":1,"complete":false,"updated_at":"2024-06-04T22:28:39.905683","id":9443,"title":"Custom 3D Lego Models","instruction":"Allow users to create and interact with their own custom 3D lego models in the game environment.","created_at":"2024-06-04T15:31:55.740383","project_id":1746},{"step_number":2,"complete":false,"updated_at":"2024-06-04T22:28:39.905734","id":9444,"title":"Building Mode","instruction":"Implement a building mode where players can choose lego pieces and assemble them into their own creations.","created_at":"2024-06-04T15:31:55.740446","project_id":1746},{"step_number":3,"complete":false,"updated_at":"2024-06-04T22:28:39.905781","id":9445,"title":"Loading Custom Lego Models","instruction":"Enable users to load their own lego obj models into the game for a fully personalized building experience.","created_at":"2024-06-04T15:31:55.740497","project_id":1746},{"step_number":4,"complete":false,"updated_at":"2024-06-04T22:28:39.905827","id":9446,"title":"Saving Creations","instruction":"Add a feature for users to save their lego creations and come back to them later.","created_at":"2024-06-04T15:31:55.740539","project_id":1746},{"step_number":5,"complete":false,"updated_at":"2024-06-04T22:28:39.905872","id":9447,"title":"Sharing Creations","instruction":"Include functionality for users to share their lego creations with others, either within the game or on social media platforms.","created_at":"2024-06-04T15:31:55.740580","project_id":1746},{"step_number":6,"complete":false,"updated_at":"2024-06-04T22:28:39.905916","id":9448,"title":"Interactive Environment","instruction":"Create an interactive 3D environment with features such as lighting, shadows, and physics for a realistic lego building experience.","created_at":"2024-06-04T15:31:55.740620","project_id":1746}]}