3D Car Model with Three.js

{"name":"3D Car Model with Three.js","description":"Dive into the world of 3D modeling by creating a stunning car using Three.js! This project will guide you through the exciting process of building and animating a 3D car model, while learning the basics of programming and 3D graphics. Get ready to explore user inputs, add interactivity, and unleash your creativity!","photo":null,"view_count":3,"fork_count":0,"expires_at":null,"created_at":"2025-01-28T07:12:10.339118Z","updated_at":"2025-01-28T07:12:10.339121Z","user_id":166,"status":"PRIVATE","parent_id":null,"id":5625,"user":{"photo":null,"email":"markivlev@gmail.com","recess_id":"38a987b1-569d-47cc-ae61-0c84198aa65c","created_at":"2024-08-05T03:36:08.774307Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"m_ivlev","id":166,"password_hash":"$2b$12$lM.SwMhsrEJrs7ZjNyj9e.FOyWqAZgNBSeOEkB8gCGEsXkmGPZLu6","updated_at":"2024-08-05T03:36:08.774314Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let scene, camera, renderer, controls;\n\nfunction init() {\n scene = new THREE.Scene();\n camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n renderer = new THREE.WebGLRenderer();\n renderer.setClearColor(0x808080, 1); // Set background color to grey\n renderer.setSize(window.innerWidth, window.innerHeight);\n document.body.appendChild(renderer.domElement);\n\n // Initialize OrbitControls\n controls = new THREE.OrbitControls(camera, renderer.domElement);\n camera.position.z = 5; // Set initial camera position\n // temp\n addCarToScene(); // Add the car to the scene after initialization\n}\n\nfunction animate() {\n requestAnimationFrame(animate);\n controls.update(); // Update the controls for camera movement\n renderer.render(scene, camera); // Render the scene\n}\n\n// Create the car body\nfunction createCarBody() {\n const geometry = new THREE.BoxGeometry(2, 0.5, 1); // Dimensions for the car body\n const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // Red color\n const carBody = new THREE.Mesh(geometry, material);\n scene.add(carBody); // Add the car body to the scene\n return carBody;\n}\n\n// Create the car wheels\nfunction createCarWheels() {\n const wheelGeometry = new THREE.CylinderGeometry(0.2, 0.2, 0.2, 32); // Wheel dimensions\n const wheelMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 }); // Black color\n const wheelPositions = [\n [-0.75, -0.25, 0.5],\n [0.75, -0.25, 0.5],\n [-0.75, -0.25, -0.5],\n [0.75, -0.25, -0.5]\n ];\n\n wheelPositions.forEach(pos => {\n const wheel = new THREE.Mesh(wheelGeometry, wheelMaterial);\n wheel.rotation.x = Math.PI / 2; // Rotate the wheels to be horizontal\n wheel.position.set(...pos); // Set the position of each wheel\n scene.add(wheel); // Add each wheel to the scene\n });\n}\n\n// Add the car to the scene\nfunction addCarToScene() {\n createCarBody(); // Create the car body\n createCarWheels(); // Create the car wheels\n}\n\ninit(); // Initialize the scene\nanimate(); // Start the animation loop","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n\n \n \n 3D Car Model with Three.js\n \n \n \n\n\n\n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":9,"comments":[],"steps":[]}