3D Lego Builder

{"name":"Spline integration","description":"Create your own 3D lego masterpieces in this fun and interactive building game using Three.js! Save and load your creations to continue building at any time.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/b8m3ghdc3g5djy7v6ty9","view_count":13,"fork_count":1,"expires_at":null,"created_at":"2024-06-03T22:16:51.348943Z","updated_at":"2024-06-12T15:52:02.155829Z","user_id":70,"status":"PUBLIC","parent_id":null,"id":1740,"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":"","style.css":"","index.html":"\n\n\n\n \n \n 3D Lego Builder\n \n\n\n\n \n \n \n\n\n"},"chat_history":[{"project_id":1740,"sender":"human","message":"I have a spline 3d scene being laoded in my indedx.html. It is a single 2x4 lego block. Is there a way to make it interact with my code in script.js so that I can make a lego building app that lets you make more block instances and stack them etc? ","deleted":0,"created_at":"2024-06-03T22:52:06.165877Z","output_tokens":null,"code_id":95848,"input_tokens":null,"id":48873},{"project_id":1740,"sender":"ai","message":"Yes, you can make your Spline 3D scene interact with your JavaScript code. To do this, you'll need to use the Spline API to control and manipulate the scene. Here’s the next step to get you started:\n\n1. Initialize the Spline scene in your JavaScript.\n2. Add event listeners to handle user interactions.\n3. Create functions to add more blocks and stack them.\n\nFirst, let's initialize the Spline scene in your `script.js` file.\n\n```javascript\n// script.js\n\n// Wait until the DOM is fully loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n // Initialize Spline Scene\n const splineViewer = document.querySelector('spline-viewer');\n \n // Add event listener to handle scene load\n splineViewer.addEventListener('load', () => {\n const scene = splineViewer.scene; // Access the Spline scene\n setupScene(scene);\n });\n});\n\n// Setup the scene with initial configurations\nfunction setupScene(scene) {\n // Function to add a Lego block to the scene\n function addLegoBlock(position = { x: 0, y: 0, z: 0 }) {\n const block = scene.getObjectByName('LegoBlock'); // Get the initial Lego block\n const newBlock = block.clone(); // Clone the initial block\n newBlock.position.set(position.x, position.y, position.z); // Set position of new block\n scene.add(newBlock); // Add new block to the scene\n }\n \n // Add a block to demonstrate\n addLegoBlock({ x: 0, y: 0.24, z: 0 }); // Position it slightly above the original block\n}\n```\n\n### Explanation:\n1. **DOMContentLoaded event**: Ensures the script runs after the DOM is fully loaded.\n2. **splineViewer load event**: Waits for the Spline scene to be fully loaded before manipulating it.\n3. **setupScene function**: Initializes the scene setup.\n4. **addLegoBlock function**: Clones the initial Lego block and positions it in the scene.\n\nThis code sets up the basic functionality to clone and position Lego blocks in your Spline scene. You can extend this by adding more user interactions (e.g., buttons to add blocks, drag-and-drop functionality, etc.).","deleted":0,"created_at":"2024-06-03T22:52:06.172224Z","output_tokens":null,"code_id":95848,"input_tokens":null,"id":48874},{"project_id":1740,"sender":"human","message":"make the new blcok a different color","deleted":0,"created_at":"2024-06-03T22:52:53.946619Z","output_tokens":null,"code_id":95850,"input_tokens":null,"id":48875},{"project_id":1740,"sender":"ai","message":"To make the new block a different color, we need to modify the `addLegoBlock` function to change the material of the cloned block. Here's how you can do it:\n\n```javascript\n// script.js\n\nfunction setupScene(scene) {\n // Function to add a Lego block to the scene\n function addLegoBlock(position = { x: 0, y: 0, z: 0 }, color = 0xff0000) { // Added color parameter with default red\n const block = scene.getObjectByName('LegoBlock'); // Get the initial Lego block\n const newBlock = block.clone(); // Clone the initial block\n newBlock.position.set(position.x, position.y, position.z); // Set position of new block\n \n // Change the color of the new block\n newBlock.material = newBlock.material.clone(); // Clone the material to avoid affecting the original block\n newBlock.material.color.setHex(color); // Set the color of the new block\n \n scene.add(newBlock); // Add new block to the scene\n }\n \n // Add a block to demonstrate\n addLegoBlock({ x: 0, y: 0.24, z: 0 }, 0x00ff00); // Position it slightly above the original block and set color to green\n}\n```\n\n### Explanation:\n1. **Color parameter**: The `addLegoBlock` function now takes an additional `color` parameter with a default value of red (0xff0000).\n2. **Clone material**: Clones the material of the new block to avoid affecting the original block.\n3. **Set new color**: Sets the color of the new block using the provided `color` parameter.\n\nThis will add a new block with the specified color to the scene. The demonstration block added is now green (0x00ff00). You can call `addLegoBlock` with different color values to add blocks of various colors.","deleted":0,"created_at":"2024-06-03T22:52:53.953050Z","output_tokens":null,"code_id":95850,"input_tokens":null,"id":48876},{"project_id":1740,"sender":"human","message":"I think i only see the original blcok","deleted":0,"created_at":"2024-06-03T22:53:13.285910Z","output_tokens":null,"code_id":95852,"input_tokens":null,"id":48877},{"project_id":1740,"sender":"ai","message":"Let's troubleshoot and ensure that your code correctly clones and adds the new block. We’ll add some logging to verify the steps and ensure the block is being added. Additionally, we'll check if the block's material is being cloned correctly.\n\nHere’s the updated function with added logging:\n\n```javascript\n// script.js\n\nfunction setupScene(scene) {\n // Function to add a Lego block to the scene\n function addLegoBlock(position = { x: 0, y: 0, z: 0 }, color = 0xff0000) { // Added color parameter with default red\n const block = scene.getObjectByName('LegoBlock'); // Get the initial Lego block\n if (!block) {\n console.error(\"LegoBlock not found in the scene.\");\n return;\n }\n const newBlock = block.clone(); // Clone the initial block\n newBlock.position.set(position.x, position.y, position.z); // Set position of new block\n \n // Change the color of the new block\n if (newBlock.material) {\n newBlock.material = newBlock.material.clone(); // Clone the material to avoid affecting the original block\n newBlock.material.color.setHex(color); // Set the color of the new block\n } else {\n console.error(\"Material not found on the cloned block.\");\n }\n \n scene.add(newBlock); // Add new block to the scene\n console.log(\"New block added at position:\", newBlock.position);\n }\n \n // Add a block to demonstrate\n addLegoBlock({ x: 0, y: 0.24, z: 0 }, 0x00ff00); // Position it slightly above the original block and set color to green\n}\n```\n\n### Explanation:\n1. **Error handling**: Added checks to ensure that the Lego block and its material are found in the scene.\n2. **Logging**: Added `console.error` and `console.log` statements to help debug issues.\n\nAfter adding this code, open the console in your browser's developer tools to check for any error messages or logs. This will help identify where the problem might be. If the block is not found or there's an issue with cloning the material, the console will provide additional information.","deleted":0,"created_at":"2024-06-03T22:53:13.293860Z","output_tokens":null,"code_id":95852,"input_tokens":null,"id":48878},{"project_id":1740,"sender":"human","message":"ERROR: Uncaught TypeError: Cannot read properties of undefined (reading 'getObjectByName') at 19:29 in script.js","deleted":0,"created_at":"2024-06-03T22:55:40.239943Z","output_tokens":null,"code_id":95860,"input_tokens":null,"id":48879},{"project_id":1740,"sender":"ai","message":"It looks like the Spline scene is not fully loaded when `getObjectByName` is being called. We need to ensure that the Spline scene is completely ready before we try to manipulate it. Let's correct the initialization and loading sequence.\n\nHere’s the updated code to ensure the scene is fully loaded before accessing it:\n\n```javascript\n// script.js\n\n// Wait until the DOM is fully loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n // Initialize Spline Scene\n const splineViewer = document.querySelector('spline-viewer');\n \n // Add event listener to handle scene load\n splineViewer.addEventListener('load', () => {\n const scene = splineViewer.scene; // Access the Spline scene\n setupScene(scene);\n });\n});\n\nfunction setupScene(scene) {\n // Function to add a Lego block to the scene\n function addLegoBlock(position = { x: 0, y: 0, z: 0 }, color = 0xff0000) { // Added color parameter with default red\n const block = scene.getObjectByName('bevel-hq-brick-2x2'); // Get the initial Lego block\n if (!block) {\n console.error(\"LegoBlock not found in the scene.\");\n return;\n } else {\n console.log(\"found lego block\")\n }\n const newBlock = block.clone(); // Clone the initial block\n newBlock.position.set(position.x, position.y, position.z); // Set position of new block\n \n // Change the color of the new block\n if (newBlock.material) {\n newBlock.material = newBlock.material.clone(); // Clone the material to avoid affecting the original block\n newBlock.material.color.setHex(color); // Set the color of the new block\n } else {\n console.error(\"Material not found on the cloned block.\");\n }\n \n scene.add(newBlock); // Add new block to the scene\n console.log(\"New block added at position:\", newBlock.position);\n }\n \n // Add a block to demonstrate\n addLegoBlock({ x: 0, y: 0.24, z: 0 }, 0x00ff00); // Position it slightly above the original block and set color to green\n}\n```\n\n### Explanation:\n1. **DOMContentLoaded event**: Ensures the script runs after the DOM is fully loaded.\n2. **splineViewer load event**: Waits for the Spline scene to be fully loaded before accessing it.\n3. **setupScene function**: Initializes the scene setup and adds the new block.\n\nThis should ensure the scene is fully loaded before `getObjectByName` is called. If the block still does not appear, please check the console for any error messages and share them.","deleted":0,"created_at":"2024-06-03T22:55:40.245881Z","output_tokens":null,"code_id":95860,"input_tokens":null,"id":48880},{"project_id":1740,"sender":"human","message":"the splineViewer.addEventListener('load', event is never happening","deleted":0,"created_at":"2024-06-03T22:56:26.859471Z","output_tokens":null,"code_id":95864,"input_tokens":null,"id":48883},{"project_id":1740,"sender":"ai","message":"Let's troubleshoot and ensure that we are correctly waiting for the Spline viewer to load. We will use the `onload` event of the `spline-viewer` to make sure the scene is fully loaded before attempting to access it.\n\nHere’s an updated approach:\n\n1. Use the `onload` event of `spline-viewer`.\n2. Confirm the scene is fully loaded before accessing it.\n\nLet's update the code accordingly:\n\n```javascript\n// script.js\n\n// Wait until the DOM is fully loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n // Initialize Spline Scene\n const splineViewer = document.querySelector('spline-viewer');\n \n // Add onload event listener to handle scene load\n splineViewer.onload = () => {\n console.log('Spline scene loaded');\n const scene = splineViewer.scene; // Access the Spline scene\n setupScene(scene);\n };\n});\n\nfunction setupScene(scene) {\n // Function to add a Lego block to the scene\n function addLegoBlock(position = { x: 0, y: 0, z: 0 }, color = 0xff0000) { // Added color parameter with default red\n const block = scene.getObjectByName('bevel-hq-brick-2x2'); // Get the initial Lego block\n if (!block) {\n console.error(\"LegoBlock not found in the scene.\");\n return;\n } else {\n console.log(\"Found Lego block\");\n }\n const newBlock = block.clone(); // Clone the initial block\n newBlock.position.set(position.x, position.y, position.z); // Set position of new block\n \n // Change the color of the new block\n if (newBlock.material) {\n newBlock.material = newBlock.material.clone(); // Clone the material to avoid affecting the original block\n newBlock.material.color.setHex(color); // Set the color of the new block\n } else {\n console.error(\"Material not found on the cloned block.\");\n }\n \n scene.add(newBlock); // Add new block to the scene\n console.log(\"New block added at position:\", newBlock.position);\n }\n \n // Add a block to demonstrate\n addLegoBlock({ x: 0, y: 0.24, z: 0 }, 0x00ff00); // Position it slightly above the original block and set color to green\n}\n```\n\n### Explanation:\n1. **onload event**: Using `splineViewer.onload` to ensure the Spline scene is fully loaded.\n2. **Logging**: Added `console.log` statements to confirm when the scene is loaded and when the block is found and added.\n\nThis should ensure that the scene is fully loaded before attempting to manipulate it. Check the browser's console to see the log messages and confirm the sequence of events.","deleted":0,"created_at":"2024-06-03T22:56:26.866373Z","output_tokens":null,"code_id":95864,"input_tokens":null,"id":48884},{"project_id":1740,"sender":"human","message":"it is still not logging anything","deleted":0,"created_at":"2024-06-04T15:00:52.958805Z","output_tokens":null,"code_id":95937,"input_tokens":null,"id":48933},{"project_id":1740,"sender":"ai","message":"Let's try a different approach to ensure that we are correctly waiting for the Spline scene to load. We'll use the `load` event of the `window` object to ensure all resources, including the Spline scene, are loaded before we attempt to access it.\n\nHere’s the updated approach:\n\n1. Use the `window.addEventListener('load', ...)` method to wait for the full page load.\n2. Confirm the scene is fully loaded before accessing it.\n\nLet's update the code accordingly:\n\n```javascript\n// script.js\n\n// Wait until the entire page is loaded\nwindow.addEventListener('load', () => {\n // Initialize Spline Scene\n const splineViewer = document.querySelector('spline-viewer');\n \n // Ensure the scene is fully loaded before manipulating it\n splineViewer.addEventListener('load', () => {\n console.log('Spline scene loaded');\n const scene = splineViewer.scene; // Access the Spline scene\n setupScene(scene);\n });\n});\n\nfunction setupScene(scene) {\n // Function to add a Lego block to the scene\n function addLegoBlock(position = { x: 0, y: 0, z: 0 }, color = 0xff0000) { // Added color parameter with default red\n const block = scene.getObjectByName('bevel-hq-brick-2x2'); // Get the initial Lego block\n if (!block) {\n console.error(\"LegoBlock not found in the scene.\");\n return;\n } else {\n console.log(\"Found Lego block\");\n }\n const newBlock = block.clone(); // Clone the initial block\n newBlock.position.set(position.x, position.y, position.z); // Set position of new block\n \n // Change the color of the new block\n if (newBlock.material) {\n newBlock.material = newBlock.material.clone(); // Clone the material to avoid affecting the original block\n newBlock.material.color.setHex(color); // Set the color of the new block\n } else {\n console.error(\"Material not found on the cloned block.\");\n }\n \n scene.add(newBlock); // Add new block to the scene\n console.log(\"New block added at position:\", newBlock.position);\n }\n \n // Add a block to demonstrate\n addLegoBlock({ x: 0, y: 0.24, z: 0 }, 0x00ff00); // Position it slightly above the original block and set color to green\n}\n```\n\n### Explanation:\n1. **window.addEventListener('load', ...)**: Ensures the script runs after all resources, including the Spline scene, are fully loaded.\n2. **splineViewer.addEventListener('load', ...)**: Ensures the Spline scene is fully loaded before accessing it.\n3. **Logging**: Added `console.log` statements to confirm when the scene is loaded and when the block is found and added.\n\nThis should ensure that the entire page, including the Spline scene, is fully loaded before attempting to manipulate it. Check the browser's console to see the log messages and confirm the sequence of events.","deleted":0,"created_at":"2024-06-04T15:00:52.965726Z","output_tokens":null,"code_id":95937,"input_tokens":null,"id":48934},{"project_id":1740,"sender":"human","message":"that doesnt work either","deleted":0,"created_at":"2024-06-04T15:01:29.101453Z","output_tokens":null,"code_id":95939,"input_tokens":null,"id":48935},{"project_id":1740,"sender":"ai","message":"Let's try using a different approach to ensure the Spline viewer is fully loaded. We'll use a mutation observer to detect when the Spline viewer's scene is ready. This way, we can ensure that we are correctly accessing the scene once it's available.\n\nHere's how we can modify the code to use a mutation observer:\n\n1. Use a MutationObserver to detect changes in the Spline viewer.\n2. Ensure the scene is fully loaded before accessing it.\n\nLet's update the code accordingly:\n\n```javascript\n// script.js\n\ndocument.addEventListener('DOMContentLoaded', () => {\n // Initialize Spline Scene\n const splineViewer = document.querySelector('spline-viewer');\n\n // MutationObserver to detect when the Spline viewer's scene is ready\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.type === 'attributes' && mutation.attributeName === 'load') {\n console.log('Spline scene loaded');\n const scene = splineViewer.scene; // Access the Spline scene\n setupScene(scene);\n observer.disconnect(); // Stop observing once the scene is loaded\n }\n });\n });\n\n // Start observing the splineViewer for attribute changes\n observer.observe(splineViewer, { attributes: true });\n});\n\nfunction setupScene(scene) {\n // Function to add a Lego block to the scene\n function addLegoBlock(position = { x: 0, y: 0, z: 0 }, color = 0xff0000) { // Added color parameter with default red\n const block = scene.getObjectByName('bevel-hq-brick-2x2'); // Get the initial Lego block\n if (!block) {\n console.error(\"LegoBlock not found in the scene.\");\n return;\n } else {\n console.log(\"Found Lego block\");\n }\n const newBlock = block.clone(); // Clone the initial block\n newBlock.position.set(position.x, position.y, position.z); // Set position of new block\n \n // Change the color of the new block\n if (newBlock.material) {\n newBlock.material = newBlock.material.clone(); // Clone the material to avoid affecting the original block\n newBlock.material.color.setHex(color); // Set the color of the new block\n } else {\n console.error(\"Material not found on the cloned block.\");\n }\n \n scene.add(newBlock); // Add new block to the scene\n console.log(\"New block added at position:\", newBlock.position);\n }\n \n // Add a block to demonstrate\n addLegoBlock({ x: 0, y: 0.24, z: 0 }, 0x00ff00); // Position it slightly above the original block and set color to green\n}\n```\n\n### Explanation:\n1. **MutationObserver**: Used to observe changes in the `spline-viewer` attributes.\n2. **Observer callback**: Detects when the `load` attribute changes, indicating the scene is","deleted":0,"created_at":"2024-06-04T15:01:29.109636Z","output_tokens":null,"code_id":95939,"input_tokens":null,"id":48936},{"project_id":1740,"sender":"human","message":"still nothing","deleted":0,"created_at":"2024-06-04T15:02:34.971685Z","output_tokens":null,"code_id":95941,"input_tokens":null,"id":48937},{"project_id":1740,"sender":"ai","message":"Given that the previous approaches did not work, let's try another approach to ensure that we are correctly waiting for the Spline scene to load. We'll use an interval to check if the scene is ready and then proceed.\n\nHere's the updated approach using an interval:\n\n```javascript\n// script.js\n\ndocument.addEventListener('DOMContentLoaded', () => {\n // Initialize Spline Scene\n const splineViewer = document.querySelector('spline-viewer');\n\n // Interval to check if the scene is ready\n const interval = setInterval(() => {\n const scene = splineViewer.scene; // Access the Spline scene\n if (scene) {\n console.log('Spline scene loaded');\n setupScene(scene);\n clearInterval(interval); // Stop checking once the scene is loaded\n }\n }, 100); // Check every 100ms\n});\n\nfunction setupScene(scene) {\n // Function to add a Lego block to the scene\n function addLegoBlock(position = { x: 0, y: 0, z: 0 }, color = 0xff0000) { // Added color parameter with default red\n const block = scene.getObjectByName('bevel-hq-brick-2x2'); // Get the initial Lego block\n if (!block) {\n console.error(\"LegoBlock not found in the scene.\");\n return;\n } else {\n console.log(\"Found Lego block\");\n }\n const newBlock = block.clone(); // Clone the initial block\n newBlock.position.set(position.x, position.y, position.z); // Set position of new block\n \n // Change the color of the new block\n if (newBlock.material) {\n newBlock.material = newBlock.material.clone(); // Clone the material to avoid affecting the original block\n newBlock.material.color.setHex(color); // Set the color of the new block\n } else {\n console.error(\"Material not found on the cloned block.\");\n }\n \n scene.add(newBlock); // Add new block to the scene\n console.log(\"New block added at position:\", newBlock.position);\n }\n \n // Add a block to demonstrate\n addLegoBlock({ x: 0, y: 0.24, z: 0 }, 0x00ff00); // Position it slightly above the original block and set color to green\n}\n```\n\n### Explanation:\n1. **Interval for checking scene readiness**: Uses `setInterval` to check if the Spline scene is ready every 100ms.\n2. **Clear interval**: Stops checking once the scene is successfully loaded.\n3. **Logging**: Added `console.log` statements to confirm when the scene is loaded and when the block is found and added.\n\nThis should ensure that the entire page, including the Spline scene, is fully loaded before attempting to manipulate it. Check the browser's console to see the log messages and confirm the sequence of events.","deleted":0,"created_at":"2024-06-04T15:02:34.978500Z","output_tokens":null,"code_id":95941,"input_tokens":null,"id":48938},{"project_id":1740,"sender":"human","message":"I can still see the spline scene perfectly well, but no logging. Are we using document.querySelector right? Or, is splineViewer.scene a real property? ","deleted":0,"created_at":"2024-06-04T15:07:10.860617Z","output_tokens":null,"code_id":95948,"input_tokens":null,"id":48939},{"project_id":1740,"sender":"ai","message":"Let's ensure we are correctly interacting with the Spline Viewer and accessing the scene. The Spline Viewer API may not be immediately exposing the `scene` property, or it might require a different approach to interact with the Three.js scene.\n\nHere's an alternative approach:\n\n1. Use the `addEventListener` method for better compatibility.\n2. Directly access the Three.js scene from the Spline viewer.\n\nLet's update the code accordingly:\n\n```javascript\n// script.js\n\ndocument.addEventListener('DOMContentLoaded', () => {\n // Initialize Spline Scene\n const splineViewer = document.querySelector('spline-viewer');\n\n // Event listener to handle when the scene is loaded\n splineViewer.addEventListener('load', () => {\n console.log('Spline scene loaded');\n\n // Access the Three.js scene from the Spline viewer\n const scene = splineViewer.renderer.scene;\n setupScene(scene);\n });\n});\n\nfunction setupScene(scene) {\n // Function to add a Lego block to the scene\n function addLegoBlock(position = { x: 0, y: 0, z: 0 }, color = 0xff0000) { // Added color parameter with default red\n const block = scene.getObjectByName('bevel-hq-brick-2x2'); // Get the initial Lego block\n if (!block) {\n console.error(\"LegoBlock not found in the scene.\");\n return;\n } else {\n console.log(\"Found Lego block\");\n }\n const newBlock = block.clone(); // Clone the initial block\n newBlock.position.set(position.x, position.y, position.z); // Set position of new block\n \n // Change the color of the new block\n if (newBlock.material) {\n newBlock.material = newBlock.material.clone(); // Clone the material to avoid affecting the original block\n newBlock.material.color.setHex(color); // Set the color of the new block\n } else {\n console.error(\"Material not found on the cloned block.\");\n }\n \n scene.add(newBlock); // Add new block to the scene\n console.log(\"New block added at position:\", newBlock.position);\n }\n \n // Add a block to demonstrate\n addLegoBlock({ x: 0, y: 0.24, z: 0 }, 0x00ff00); // Position it slightly above the original block and set color to green\n}\n```\n\n### Explanation:\n1. **Event listener**: Uses `splineViewer.addEventListener('load', ...)` to correctly handle when the Spline scene is loaded.\n2. **Access Three.js scene**: Accessed the Three.js scene directly via `splineViewer.renderer.scene`.\n\nThis should ensure that we correctly access and manipulate the Spline scene. Check the browser's console to see the log messages and confirm the sequence of events.","deleted":0,"created_at":"2024-06-04T15:07:10.869328Z","output_tokens":null,"code_id":95948,"input_tokens":null,"id":48940}],"assets":[{"cloudinary_id":"b8m3ghdc3g5djy7v6ty9","name":"cover","deleted":false,"id":7315,"created_at":"2024-06-12T15:51:58.146870Z","project_id":1740,"resource_type":"image"}],"messages_sent":18,"comments":[],"steps":[{"instruction":"","title":"integrate spline and threejs","created_at":"2024-06-03T22:50:18.651309","project_id":1740,"complete":false,"step_number":1,"updated_at":"2024-06-03T22:50:18.651310","id":9418}]}