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":25,"fork_count":2,"expires_at":null,"created_at":"2024-06-04T15:31:55.732244Z","updated_at":"2024-06-04T16:57:07.528830Z","user_id":70,"status":"PUBLIC","parent_id":null,"id":1744,"user":{"photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","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":[{"project_id":1744,"sender":"human","message":"the ui is hard to understand. Make it prettier and easy to understand for kids","deleted":0,"created_at":"2024-06-04T16:50:21.924748Z","output_tokens":null,"code_id":96117,"input_tokens":null,"id":49015},{"project_id":1744,"sender":"ai","message":"Let's enhance the UI to be more appealing and easier to understand for kids. We can achieve this by making the buttons and inputs more visually attractive and adding some helpful labels.\n\n### CSS Enhancements\n\nFirst, let's update the CSS to make the buttons and inputs more visually appealing.\n\n```markdown\n\n```\n\n### HTML Enhancements\n\nNext, we'll update the HTML to reflect these changes and make the controls section more user-friendly.\n\n```markdown\n

🧱 Lego Builder 3D

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

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

\n Color:\n \n

\n \n \n

\n```\n\n### Explanation\n- **CSS**: Added styles to make the background more pleasant, added padding and rounded corners to the controls, and styled the buttons and inputs to look more attractive.\n- **HTML**: Wrapped each input in a `div` for better layout, added a title with an emoji to make it more fun, and kept the labels close to their corresponding inputs. \n\nThis should make the UI more appealing and easier to use for kids.","deleted":0,"created_at":"2024-06-04T16:50:21.931313Z","output_tokens":null,"code_id":96117,"input_tokens":null,"id":49016},{"project_id":1744,"sender":"human","message":"its too high on the screenits getting cut off","deleted":0,"created_at":"2024-06-04T16:51:32.306246Z","output_tokens":null,"code_id":96124,"input_tokens":null,"id":49017},{"project_id":1744,"sender":"ai","message":"Let's adjust the CSS to position the controls in a way that they won't get cut off. We can fix this by reducing the height of the control panel and ensuring that it is more centered on the screen.\n\n### CSS Adjustments\n\nWe'll make the control panel more compact by decreasing padding and adjusting the overall layout to fit better within the viewport.\n\n```markdown\n\n```\n\n### Explanation\n- **body**: Changed `justify-content` from `center` to `flex-start` to push the controls to the top of the screen.\n- **#controls**: Reduced padding to make the control panel more compact, added `margin-top` to push it down slightly, and set `width` to 90% with a `max-width` to ensure it fits within the viewport.\n \nThis should prevent the control panel from being cut off and ensure it is well-positioned on various screen sizes.","deleted":0,"created_at":"2024-06-04T16:51:32.312505Z","output_tokens":null,"code_id":96124,"input_tokens":null,"id":49018}],"assets":[],"messages_sent":36,"comments":[{"content":"!","id":650,"user_id":60,"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"},"project_id":1744,"created_at":"2024-06-04T16:58:32.981821Z","updated_at":"2024-06-04T16:58:32.981822Z"},{"content":"yoooo this is crazy!","id":653,"user_id":59,"user":{"photo":null,"email":null,"recess_id":"0c343b5d-70ad-030a-89d2-b1f54b6318ff","created_at":"2024-02-23T23:46:05.409490Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"nebwinters2","id":59,"password_hash":null,"updated_at":"2024-02-23T23:46:05.409493Z","reset_token_expiry":null,"subscription_status":null},"project_id":1744,"created_at":"2024-06-05T17:40:22.978846Z","updated_at":"2024-06-05T17:40:22.978848Z"}],"steps":[{"instruction":"Implement interactive building interactions to mimic real-life lego building, including snapping blocks together and rotating pieces.","title":"Realistic Building Interactions","created_at":"2024-06-04T15:31:55.740284","project_id":1744,"complete":false,"step_number":0,"updated_at":"2024-06-04T15:31:55.740286","id":9430},{"instruction":"Allow users to create and interact with their own custom 3D lego models in the game environment.","title":"Custom 3D Lego Models","created_at":"2024-06-04T15:31:55.740383","project_id":1744,"complete":false,"step_number":1,"updated_at":"2024-06-04T15:31:55.740384","id":9431},{"instruction":"Implement a building mode where players can choose lego pieces and assemble them into their own creations.","title":"Building Mode","created_at":"2024-06-04T15:31:55.740446","project_id":1744,"complete":false,"step_number":2,"updated_at":"2024-06-04T15:31:55.740447","id":9432},{"instruction":"Enable users to load their own lego obj models into the game for a fully personalized building experience.","title":"Loading Custom Lego Models","created_at":"2024-06-04T15:31:55.740497","project_id":1744,"complete":false,"step_number":3,"updated_at":"2024-06-04T15:31:55.740498","id":9433},{"instruction":"Add a feature for users to save their lego creations and come back to them later.","title":"Saving Creations","created_at":"2024-06-04T15:31:55.740539","project_id":1744,"complete":false,"step_number":4,"updated_at":"2024-06-04T15:31:55.740540","id":9434},{"instruction":"Include functionality for users to share their lego creations with others, either within the game or on social media platforms.","title":"Sharing Creations","created_at":"2024-06-04T15:31:55.740580","project_id":1744,"complete":false,"step_number":5,"updated_at":"2024-06-04T15:31:55.740581","id":9435},{"instruction":"Create an interactive 3D environment with features such as lighting, shadows, and physics for a realistic lego building experience.","title":"Interactive Environment","created_at":"2024-06-04T15:31:55.740620","project_id":1744,"complete":false,"step_number":6,"updated_at":"2024-06-04T15:31:55.740621","id":9436}]}