Three.js Mushroom Scene (JSON)

Three.js Mushroom Scene (JSON) { "metadata": { "version": 4.6, "type": "Object", "generator": "Jit-MushroomScene" }, "geometries": [ { "uuid": "f8b5a3c1-1b1a-4b9a-8c1a-1b1a4b9a8c1a", "type": "CylinderGeometry", "radiusTop": 0.2, "radiusBottom": 0.25, "height": 1, "radialSegments": 16, "heightSegments": 1, "openEnded": false, "thetaStart": 0, "thetaLength": 6.283185307179586 }, { "uuid": "a2c8d4e2-2c2b-5c8b-9d2b-2c2b5c8b9d2b", "type": "SphereGeometry", "radius": 0.6, "widthSegments": 32, "heightSegments": 16, "phiStart": 0, "phiLength": 6.283185307179586, "thetaStart": 0, "thetaLength": 6.283185307179586 } ], "materials": [ { "uuid": "b9d6b4d2-3d3c-6d9c-ad3c-3d3c6d9cad3c", "type": "MeshStandardMaterial", "color": 14205096, "roughness": 0.8, "metalness": 0.1, "name": "StemMaterial" }, { "uuid": "c3e9e5f3-4e4d-7eaf-be4d-4e4d7eafbe4d", "type": "MeshStandardMaterial", "color": 11546672, "roughness": 0.6, "metalness": 0.1, "name": "CapMaterial" } ], "object": { "uuid": "d4f0f604-5f5e-8fbf-cf5e-5f5e8fbfcf5e", "type": "Scene", "name": "MushroomScene", "background": 1118481, "children": [ { "uuid": "e5010715-606f-90c0-d06f-606f90c0d06f", "type": "AmbientLight", "name": "AmbientLight", "color": 4210752, "intensity": 3 }, { "uuid": "f6121826-7170-a1d1-e170-7170a1d1e170", "type": "DirectionalLight", "name": "DirectionalLight", "color": 16777215, "intensity": 2, "position": [5, 10, 7.5] }, { "uuid": "07232937-8281-b2e2-f281-8281b2e2f281", "type": "Group", "name": "Mushroom", "position": [0, -0.5, 0], "children": [ { "uuid": "18343a48-9392-c3f3-0392-9392c3f30392", "type": "Mesh", "name": "Stem", "geometry": "f8b5a3c1-1b1a-4b9a-8c1a-1b1a4b9a8c1a", "material": "b9d6b4d2-3d3c-6d9c-ad3c-3d3c6d9cad3c", "position": [0, 0.5, 0] }, { "uuid": "29454b59-a4a3-d404-14a3-a4a3d40414a3", "type": "Mesh", "name": "Cap", "geometry": "a2c8d4e2-2c2b-5c8b-9d2b-2c2b5c8b9d2b", "material": "c3e9e5f3-4e4d-7eaf-be4d-4e4d7eafbe4d", "position": [0, 1.1, 0], "scale": [1.2, 0.6, 1.2] } ] } ] } } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; let camera, scene, renderer; let controls; let animationId = null; // To control the animation loop init(); function init() { // Renderer renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // Camera camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100); camera.position.set(2, 2, 4); // Controls controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.screenSpacePanning = false; controls.minDistance = 1; controls.maxDistance = 50; controls.target.set(0, 0.5, 0); // Initial target guess (center of mushroom) controls.update(); // Initial update // Scene Loader const loader = new THREE.ObjectLoader(); loader.load( 'mushroom.scene.json', // onLoad callback (loadedScene) => { console.log("Scene loaded successfully."); scene = loadedScene; // Use the loaded scene object // Adjust controls target based on loaded content const mushroom = scene.getObjectByName('Mushroom'); if (mushroom) { const box = new THREE.Box3().setFromObject(mushroom); const center = box.getCenter(new THREE.Vector3()); controls.target.copy(center); console.log("Controls target set to mushroom center:", center); } else { console.warn("Mushroom object not found by name 'Mushroom'. Using default target."); controls.target.set(0, 0.5, 0); } controls.update(); // Start the animation loop ONLY after the scene is loaded if (animationId === null) { console.log("Starting animation loop."); animate(); } }, // onProgress callback (optional) (xhr) => { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, // onError callback (err) => { console.error('An error happened during loading:', err); // Fallback: create a simple scene to indicate error scene = new THREE.Scene(); scene.background = new THREE.Color(0x333333); const errorMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true }); const errorGeom = new THREE.BoxGeometry(1,1,1); const errorMesh = new THREE.Mesh(errorGeom, errorMaterial); errorMesh.position.set(0, 0.5, 0); scene.add(errorMesh); const axesHelper = new THREE.AxesHelper(2); scene.add(axesHelper); controls.target.set(0, 0.5, 0); // Target the error cube controls.update(); // Start animation loop even on error to show the error cube if (animationId === null) { console.log("Starting animation loop (error state)."); animate(); } } ); // Handle window resize window.addEventListener('resize', onWindowResize); } function onWindowResize() { if (camera && renderer) { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } } function animate() { animationId = requestAnimationFrame(animate); // Store the id // Check if scene and renderer are ready if (scene && renderer && camera && controls) { controls.update(); renderer.render(scene, camera); } else { // Scene might not be loaded yet, wait for next frame } }