Three.js Cosmic Journey

{"name":"Three.js Glb Demo","description":"Three js demo link is from example models from https://cloudinary.com/documentation/transformations_on_3d_models","photo":"","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-05-20T17:52:59.992737Z","updated_at":"2025-05-20T17:52:59.992739Z","user_id":60,"status":"PRIVATE","parent_id":8013,"id":8015,"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":"// script.js\nlet scene, camera, renderer;\nlet kittyModel; // Keep only the kitty model variable\n\nfunction initThree() {\n // Create a new Three.js scene\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.z = 5; // Move the camera back to see the kitty model\n\n // Create the renderer\n renderer = new THREE.WebGLRenderer({ alpha: true }); // Allow transparency\n renderer.setSize(window.innerWidth, window.innerHeight);\n document.body.appendChild(renderer.domElement); // Append the renderer to the body\n\n // Add ambient light\n const ambientLight = new THREE.AmbientLight(0xffffff, 1); // White light\n scene.add(ambientLight);\n\n // Load the kitty model\n const loader = new THREE.GLTFLoader(); // Create a new GLTFLoader\n loader.load('https://res.cloudinary.com/demo/image/upload/docs/cute-kitty.glb', function (gltf) {\n kittyModel = gltf.scene; // Store the loaded model\n scene.add(kittyModel); // Add the kitty model to the scene\n console.log('Kitty model loaded successfully!'); // Log success\n }, function (xhr) {\n // Log the loading progress\n console.log((xhr.loaded / xhr.total * 100) + '% loaded'); // Log loading progress\n }, function (error) {\n // Log if there's an error loading the model\n console.error('An error happened while loading the model:', error);\n });\n\n animate(); // Start the animation loop\n}\n\nwindow.onload = initThree;\n\nfunction animate() {\n requestAnimationFrame(animate); // Call animate recursively\n\n // If the kitty model exists, rotate it\n if (kittyModel) {\n kittyModel.rotation.y += 0.01; // Rotate the kitty model\n }\n\n renderer.render(scene, camera); // Render the scene\n}","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n\n\n \n \n Three.js Cosmic Journey\n \n\n\n\n \n \n \n \n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[]}