diff --git a/index.html b/index.html
index c34d22bc4cbfb733e7a5c79fe3b66d8b7123e37a..4e0af610f12be68d0abd8498ce062752f7a6ab47 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,4301 @@
+<!-- *********
+https://poe.com/3D-model-studio-0.2
+
+The software is published under the MIT Licence:
+Copyright © 2010-2025 three.js authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+Newsletter: https://roboohood.beehiiv.com/
+too much code. use draft instead! ******
+- In select mode: when i click on an image and hold shift, i want to be able to select multiple objects at once.
+- the function to generate textures is created but not connected to the buttons generate textures. the buttons are connected to the wrong function. 
+- when i click on them an image want to upload. the undo and redo button should be aligned right
+- the Y: coordinate should show always the position of the mouse arrow. currently after placing the plate, it stays at the point of the plate, but updates not to the mouse arrow position.
+- it should be not possibel to mark text.
+- add a botton at the top to create animation. when the user is clicking on it, it sends a message to Gemini-2.0-Pro. "This function is free for subscribers!"
+- add a progress bar (for the time it generates) every time the user requests something with an AI
+- when I generate something in the AI generate panel, show the .obj or .json code in the text field where I typed in the text.
+- add a button to generate video.
+- add a button to generate animation.
+: -->
+
 <!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Full Screen Frame</title>
-<style>
-*{margin:0;padding:0;box-sizing:border-box;}
-html,body{height:100%;overflow:hidden;}
-iframe{width:100%;height:100%;border:none;display:block;}
-</style>
-</head>
-<body>
-<iframe src="https://aibotcommander--0199d84721d472fca50aefe947145a35.web.val.run"></iframe>
-</body>
-</html>
\ No newline at end of file
+<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://pfst.cf2.poecdn.net/base/text/17f93eb776a5479dfb702f9a920d9a49d3e83847a7e3394d57a8b4fe26585897?pmaid=369101293"></script><script>( function () { const _changeEvent = { type: 'change' }; const _startEvent = { type: 'start' }; 
+// --- START OF MOBILE OPTIMIZATION UTILITY ---
+function isMobileDevice() {
+    // A common way to check for mobile, can be refined
+    return ( (typeof window.orientation !== "undefined") ||
+             (navigator.userAgent.indexOf('IEMobile') !== -1) ||
+             (window.innerWidth <= 768 && window.innerHeight <= 1024) || // Screen size check
+             /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) // User agent check
+           );
+}
+let IS_MOBILE = false; // Will be set in initApp
+// --- END OF MOBILE OPTIMIZATION UTILITY ---
+
+const _endEvent = { type: 'end' }; class OrbitControls extends THREE.EventDispatcher { constructor( object, domElement ) { super(); if ( domElement === undefined ) console.warn( 'THREE.OrbitControls: The second parameter "domElement" is now mandatory.' ); if ( domElement === document ) console.error( 'THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' ); this.object = object; this.domElement = domElement; this.domElement.style.touchAction = 'none'; this.enabled = true; this.target = new THREE.Vector3(); this.minDistance = 0; this.maxDistance = Infinity; this.minZoom = 0; this.maxZoom = Infinity; this.minPolarAngle = 0; this.maxPolarAngle = Math.PI; this.minAzimuthAngle = - Infinity; this.maxAzimuthAngle = Infinity; this.enableDamping = false; this.dampingFactor = 0.05; this.enableZoom = true; this.zoomSpeed = 1.0; this.enableRotate = true; this.rotateSpeed = 1.0; this.enablePan = true; this.panSpeed = 1.0; this.screenSpacePanning = true; this.keyPanSpeed = 7.0; this.autoRotate = false; this.autoRotateSpeed = 2.0; this.keys = { LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }; this.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN }; this.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN }; this.target0 = this.target.clone(); this.position0 = this.object.position.clone(); this.zoom0 = this.object.zoom; this._domElementKeyEvents = null; this.getPolarAngle = function () { return spherical.phi; }; this.getAzimuthalAngle = function () { return spherical.theta; }; this.getDistance = function () { return this.object.position.distanceTo( this.target ); }; this.listenToKeyEvents = function ( domElement ) { domElement.addEventListener( 'keydown', onKeyDown ); this._domElementKeyEvents = domElement; }; this.saveState = function () { scope.target0.copy( scope.target ); scope.position0.copy( scope.object.position ); scope.zoom0 = scope.object.zoom; }; this.reset = function () { scope.target.copy( scope.target0 ); scope.object.position.copy( scope.position0 ); scope.object.zoom = scope.zoom0; scope.object.updateProjectionMatrix(); scope.dispatchEvent( _changeEvent ); scope.update(); state = STATE.NONE; }; this.update = function () { const offset = new THREE.Vector3(); const quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3( 0, 1, 0 ) ); const quatInverse = quat.clone().invert(); const lastPosition = new THREE.Vector3(); const lastQuaternion = new THREE.Quaternion(); const twoPI = 2 * Math.PI; return function update() { const position = scope.object.position; offset.copy( position ).sub( scope.target ); offset.applyQuaternion( quat ); spherical.setFromVector3( offset ); if ( scope.autoRotate && state === STATE.NONE ) { rotateLeft( getAutoRotationAngle() ); } if ( scope.enableDamping ) { spherical.theta += sphericalDelta.theta * scope.dampingFactor; spherical.phi += sphericalDelta.phi * scope.dampingFactor; } else { spherical.theta += sphericalDelta.theta; spherical.phi += sphericalDelta.phi; } let min = scope.minAzimuthAngle; let max = scope.maxAzimuthAngle; if ( isFinite( min ) && isFinite( max ) ) { if ( min < - Math.PI ) min += twoPI; else if ( min > Math.PI ) min -= twoPI; if ( max < - Math.PI ) max += twoPI; else if ( max > Math.PI ) max -= twoPI; if ( min <= max ) { spherical.theta = Math.max( min, Math.min( max, spherical.theta ) ); } else { spherical.theta = spherical.theta > ( min + max ) / 2 ? Math.max( min, spherical.theta ) : Math.min( max, spherical.theta ); } } spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) ); spherical.makeSafe(); spherical.radius *= scale; spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) ); if ( scope.enableDamping === true ) { scope.target.addScaledVector( panOffset, scope.dampingFactor ); } else { scope.target.add( panOffset ); } offset.setFromSpherical( spherical ); offset.applyQuaternion( quatInverse ); position.copy( scope.target ).add( offset ); scope.object.lookAt( scope.target ); if ( scope.enableDamping === true ) { sphericalDelta.theta *= 1 - scope.dampingFactor; sphericalDelta.phi *= 1 - scope.dampingFactor; panOffset.multiplyScalar( 1 - scope.dampingFactor ); } else { sphericalDelta.set( 0, 0, 0 ); panOffset.set( 0, 0, 0 ); } scale = 1; if ( zoomChanged || lastPosition.distanceToSquared( scope.object.position ) > EPS || 8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) { scope.dispatchEvent( _changeEvent ); lastPosition.copy( scope.object.position ); lastQuaternion.copy( scope.object.quaternion ); zoomChanged = false; return true; } return false; }; }(); this.dispose = function () { scope.domElement.removeEventListener( 'contextmenu', onContextMenu ); scope.domElement.removeEventListener( 'pointerdown', onPointerDown ); scope.domElement.removeEventListener( 'pointercancel', onPointerCancel ); scope.domElement.removeEventListener( 'wheel', onMouseWheel ); scope.domElement.removeEventListener( 'pointermove', onPointerMove ); scope.domElement.removeEventListener( 'pointerup', onPointerUp ); if ( scope._domElementKeyEvents !== null ) { scope._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown ); } }; const scope = this; const STATE = { NONE: - 1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_PAN: 4, TOUCH_DOLLY_PAN: 5, TOUCH_DOLLY_ROTATE: 6 }; let state = STATE.NONE; const EPS = 0.000001; const spherical = new THREE.Spherical(); const sphericalDelta = new THREE.Spherical(); let scale = 1; const panOffset = new THREE.Vector3(); let zoomChanged = false; const rotateStart = new THREE.Vector2(); const rotateEnd = new THREE.Vector2(); const rotateDelta = new THREE.Vector2(); const panStart = new THREE.Vector2(); const panEnd = new THREE.Vector2(); const panDelta = new THREE.Vector2(); const dollyStart = new THREE.Vector2(); const dollyEnd = new THREE.Vector2(); const dollyDelta = new THREE.Vector2(); const pointers = []; const pointerPositions = {}; function getAutoRotationAngle() { return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed; } function getZoomScale() { return Math.pow( 0.95, scope.zoomSpeed ); } function rotateLeft( angle ) { sphericalDelta.theta -= angle; } function rotateUp( angle ) { sphericalDelta.phi -= angle; } const panLeft = function () { const v = new THREE.Vector3(); return function panLeft( distance, objectMatrix ) { v.setFromMatrixColumn( objectMatrix, 0 ); v.multiplyScalar( - distance ); panOffset.add( v ); }; }(); const panUp = function () { const v = new THREE.Vector3(); return function panUp( distance, objectMatrix ) { if ( scope.screenSpacePanning === true ) { v.setFromMatrixColumn( objectMatrix, 1 ); } else { v.setFromMatrixColumn( objectMatrix, 0 ); v.crossVectors( scope.object.up, v ); } v.multiplyScalar( distance ); panOffset.add( v ); }; }(); const pan = function () { const offset = new THREE.Vector3(); return function pan( deltaX, deltaY ) { const element = scope.domElement; if ( scope.object.isPerspectiveCamera ) { const position = scope.object.position; offset.copy( position ).sub( scope.target ); let targetDistance = offset.length(); targetDistance *= Math.tan( scope.object.fov / 2 * Math.PI / 180.0 ); panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix ); panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix ); } else if ( scope.object.isOrthographicCamera ) { panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix ); panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix ); } else { console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' ); scope.enablePan = false; } }; }(); function dollyOut( dollyScale ) { if ( scope.object.isPerspectiveCamera ) { scale /= dollyScale; } else if ( scope.object.isOrthographicCamera ) { scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom * dollyScale ) ); scope.object.updateProjectionMatrix(); zoomChanged = true; } else { console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' ); scope.enableZoom = false; } } function dollyIn( dollyScale ) { if ( scope.object.isPerspectiveCamera ) { scale *= dollyScale; } else if ( scope.object.isOrthographicCamera ) { scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, scope.object.zoom / dollyScale ) ); scope.object.updateProjectionMatrix(); zoomChanged = true; } else { console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' ); scope.enableZoom = false; } } function handleMouseDownRotate( event ) { rotateStart.set( event.clientX, event.clientY ); } function handleMouseDownDolly( event ) { dollyStart.set( event.clientX, event.clientY ); } function handleMouseDownPan( event ) { panStart.set( event.clientX, event.clientY ); } function handleMouseMoveRotate( event ) { rotateEnd.set( event.clientX, event.clientY ); rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed ); const element = scope.domElement; rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight ); rotateStart.copy( rotateEnd ); scope.update(); } function handleMouseMoveDolly( event ) { dollyEnd.set( event.clientX, event.clientY ); dollyDelta.subVectors( dollyEnd, dollyStart ); if ( dollyDelta.y > 0 ) { dollyOut( getZoomScale() ); } else if ( dollyDelta.y < 0 ) { dollyIn( getZoomScale() ); } dollyStart.copy( dollyEnd ); scope.update(); } function handleMouseMovePan( event ) { panEnd.set( event.clientX, event.clientY ); panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed ); pan( panDelta.x, panDelta.y ); panStart.copy( panEnd ); scope.update(); } function handleMouseUp() { } function handleMouseWheel( event ) { if ( event.deltaY < 0 ) { dollyIn( getZoomScale() ); } else if ( event.deltaY > 0 ) { dollyOut( getZoomScale() ); } scope.update(); } function handleKeyDown( event ) { let needsUpdate = false; switch ( event.code ) { case scope.keys.UP: pan( 0, scope.keyPanSpeed ); needsUpdate = true; break; case scope.keys.BOTTOM: pan( 0, - scope.keyPanSpeed ); needsUpdate = true; break; case scope.keys.LEFT: pan( scope.keyPanSpeed, 0 ); needsUpdate = true; break; case scope.keys.RIGHT: pan( - scope.keyPanSpeed, 0 ); needsUpdate = true; break; } if ( needsUpdate ) { event.preventDefault(); scope.update(); } } function handleTouchStartRotate() { if ( pointers.length === 1 ) { rotateStart.set( pointers[ 0 ].pageX, pointers[ 0 ].pageY ); } else { const x = 0.5 * ( pointers[ 0 ].pageX + pointers[ 1 ].pageX ); const y = 0.5 * ( pointers[ 0 ].pageY + pointers[ 1 ].pageY ); rotateStart.set( x, y ); } } function handleTouchStartPan() { if ( pointers.length === 1 ) { panStart.set( pointers[ 0 ].pageX, pointers[ 0 ].pageY ); } else { const x = 0.5 * ( pointers[ 0 ].pageX + pointers[ 1 ].pageX ); const y = 0.5 * ( pointers[ 0 ].pageY + pointers[ 1 ].pageY ); panStart.set( x, y ); } } function handleTouchStartDolly() { const dx = pointers[ 0 ].pageX - pointers[ 1 ].pageX; const dy = pointers[ 0 ].pageY - pointers[ 1 ].pageY; const distance = Math.sqrt( dx * dx + dy * dy ); dollyStart.set( 0, distance ); } function handleTouchStartDollyPan() { if ( scope.enableZoom ) handleTouchStartDolly(); if ( scope.enablePan ) handleTouchStartPan(); } function handleTouchStartDollyRotate() { if ( scope.enableZoom ) handleTouchStartDolly(); if ( scope.enableRotate ) handleTouchStartRotate(); } function handleTouchMoveRotate( event ) { if ( pointers.length == 1 ) { rotateEnd.set( event.pageX, event.pageY ); } else { const position = getSecondPointerPosition( event ); const x = 0.5 * ( event.pageX + position.x ); const y = 0.5 * ( event.pageY + position.y ); rotateEnd.set( x, y ); } rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed ); const element = scope.domElement; rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientHeight ); rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight ); rotateStart.copy( rotateEnd ); } function handleTouchMovePan( event ) { if ( pointers.length === 1 ) { panEnd.set( event.pageX, event.pageY ); } else { const position = getSecondPointerPosition( event ); const x = 0.5 * ( event.pageX + position.x ); const y = 0.5 * ( event.pageY + position.y ); panEnd.set( x, y ); } panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed ); pan( panDelta.x, panDelta.y ); panStart.copy( panEnd ); } function handleTouchMoveDolly( event ) { const position = getSecondPointerPosition( event ); const dx = event.pageX - position.x; const dy = event.pageY - position.y; const distance = Math.sqrt( dx * dx + dy * dy ); dollyEnd.set( 0, distance ); dollyDelta.set( 0, Math.pow( dollyEnd.y / dollyStart.y, scope.zoomSpeed ) ); dollyOut( dollyDelta.y ); dollyStart.copy( dollyEnd ); } function handleTouchMoveDollyPan( event ) { if ( scope.enableZoom ) handleTouchMoveDolly( event ); if ( scope.enablePan ) handleTouchMovePan( event ); } function handleTouchMoveDollyRotate( event ) { if ( scope.enableZoom ) handleTouchMoveDolly( event ); if ( scope.enableRotate ) handleTouchMoveRotate( event ); } function handleTouchEnd() { } function onPointerDown( event ) { if ( scope.enabled === false ) return; if ( pointers.length === 0 ) { scope.domElement.setPointerCapture( event.pointerId ); scope.domElement.addEventListener( 'pointermove', onPointerMove ); scope.domElement.addEventListener( 'pointerup', onPointerUp ); } addPointer( event ); if ( event.pointerType === 'touch' ) { onTouchStart( event ); } else { onMouseDown( event ); } } function onPointerMove( event ) { if ( scope.enabled === false ) return; if ( event.pointerType === 'touch' ) { onTouchMove( event ); } else { onMouseMove( event ); } } function onPointerUp( event ) { if ( scope.enabled === false ) return; if ( event.pointerType === 'touch' ) { onTouchEnd(); } else { onMouseUp( event ); } removePointer( event ); if ( pointers.length === 0 ) { scope.domElement.releasePointerCapture( event.pointerId ); scope.domElement.removeEventListener( 'pointermove', onPointerMove ); scope.domElement.removeEventListener( 'pointerup', onPointerUp ); } } function onPointerCancel( event ) { removePointer( event ); } function onMouseDown( event ) { let mouseAction; switch ( event.button ) { case 0: mouseAction = scope.mouseButtons.LEFT; break; case 1: mouseAction = scope.mouseButtons.MIDDLE; break; case 2: mouseAction = scope.mouseButtons.RIGHT; break; default: mouseAction = - 1; } switch ( mouseAction ) { case THREE.MOUSE.DOLLY: if ( scope.enableZoom === false ) return; handleMouseDownDolly( event ); state = STATE.DOLLY; break; case THREE.MOUSE.ROTATE: if ( event.ctrlKey || event.metaKey || event.shiftKey ) { if ( scope.enablePan === false ) return; handleMouseDownPan( event ); state = STATE.PAN; } else { if ( scope.enableRotate === false ) return; handleMouseDownRotate( event ); state = STATE.ROTATE; } break; case THREE.MOUSE.PAN: if ( event.ctrlKey || event.metaKey || event.shiftKey ) { if ( scope.enableRotate === false ) return; handleMouseDownRotate( event ); state = STATE.ROTATE; } else { if ( scope.enablePan === false ) return; handleMouseDownPan( event ); state = STATE.PAN; } break; default: state = STATE.NONE; } if ( state !== STATE.NONE ) { scope.dispatchEvent( _startEvent ); } } function onMouseMove( event ) { if ( scope.enabled === false ) return; switch ( state ) { case STATE.ROTATE: if ( scope.enableRotate === false ) return; handleMouseMoveRotate( event ); break; case STATE.DOLLY: if ( scope.enableZoom === false ) return; handleMouseMoveDolly( event ); break; case STATE.PAN: if ( scope.enablePan === false ) return; handleMouseMovePan( event ); break; } } function onMouseUp( event ) { handleMouseUp( event ); scope.dispatchEvent( _endEvent ); state = STATE.NONE; } function onMouseWheel( event ) { if ( scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE && state !== STATE.ROTATE ) return; event.preventDefault(); scope.dispatchEvent( _startEvent ); handleMouseWheel( event ); scope.dispatchEvent( _endEvent ); } function onKeyDown( event ) { if ( scope.enabled === false || scope.enablePan === false ) return; handleKeyDown( event ); } function onTouchStart( event ) { trackPointer( event ); switch ( pointers.length ) { case 1: switch ( scope.touches.ONE ) { case THREE.TOUCH.ROTATE: if ( scope.enableRotate === false ) return; handleTouchStartRotate(); state = STATE.TOUCH_ROTATE; break; case THREE.TOUCH.PAN: if ( scope.enablePan === false ) return; handleTouchStartPan(); state = STATE.TOUCH_PAN; break; default: state = STATE.NONE; } break; case 2: switch ( scope.touches.TWO ) { case THREE.TOUCH.DOLLY_PAN: if ( scope.enableZoom === false && scope.enablePan === false ) return; handleTouchStartDollyPan(); state = STATE.TOUCH_DOLLY_PAN; break; case THREE.TOUCH.DOLLY_ROTATE: if ( scope.enableZoom === false && scope.enableRotate === false ) return; handleTouchStartDollyRotate(); state = STATE.TOUCH_DOLLY_ROTATE; break; default: state = STATE.NONE; } break; default: state = STATE.NONE; } if ( state !== STATE.NONE ) { scope.dispatchEvent( _startEvent ); } } function onTouchMove( event ) { trackPointer( event ); switch ( state ) { case STATE.TOUCH_ROTATE: if ( scope.enableRotate === false ) return; handleTouchMoveRotate( event ); scope.update(); break; case STATE.TOUCH_PAN: if ( scope.enablePan === false ) return; handleTouchMovePan( event ); scope.update(); break; case STATE.TOUCH_DOLLY_PAN: if ( scope.enableZoom === false && scope.enablePan === false ) return; handleTouchMoveDollyPan( event ); scope.update(); break; case STATE.TOUCH_DOLLY_ROTATE: if ( scope.enableZoom === false && scope.enableRotate === false ) return; handleTouchMoveDollyRotate( event ); scope.update(); break; default: state = STATE.NONE; } } function onTouchEnd( event ) { handleTouchEnd( event ); scope.dispatchEvent( _endEvent ); state = STATE.NONE; } function onContextMenu( event ) { if ( scope.enabled === false ) return; event.preventDefault(); } function addPointer( event ) { pointers.push( event ); } function removePointer( event ) { delete pointerPositions[ event.pointerId ]; for ( let i = 0; i < pointers.length; i ++ ) { if ( pointers[ i ].pointerId == event.pointerId ) { pointers.splice( i, 1 ); return; } } } function trackPointer( event ) { let position = pointerPositions[ event.pointerId ]; if ( position === undefined ) { position = new THREE.Vector2(); pointerPositions[ event.pointerId ] = position; } position.set( event.pageX, event.pageY ); } function getSecondPointerPosition( event ) { const pointer = event.pointerId === pointers[ 0 ].pointerId ? pointers[ 1 ] : pointers[ 0 ]; return pointerPositions[ pointer.pointerId ]; } scope.domElement.addEventListener( 'contextmenu', onContextMenu ); scope.domElement.addEventListener( 'pointerdown', onPointerDown ); scope.domElement.addEventListener( 'pointercancel', onPointerCancel ); scope.domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } ); this.update(); } } class MapControls extends OrbitControls { constructor( object, domElement ) { super( object, domElement ); this.screenSpacePanning = false; this.mouseButtons.LEFT = THREE.MOUSE.PAN; this.mouseButtons.RIGHT = THREE.MOUSE.ROTATE; this.touches.ONE = THREE.TOUCH.PAN; this.touches.TWO = THREE.TOUCH.DOLLY_ROTATE; } } THREE.MapControls = MapControls; THREE.OrbitControls = OrbitControls; } )(); </script>
+<!-- ######### EMBEDDINGS -->
+<script src="https://pfst.cf2.poecdn.net/base/text/9dd385c0781f459a267f31b2a3210bff386bfe224004291a71c97828b8a77395?pmaid=369113708"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/OBJLoader.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/STLLoader.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/MTLLoader.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/exporters/GLTFExporter.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/exporters/OBJExporter.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/exporters/STLExporter.js"></script>
+<!-- ######### EMBEDDINGS -->
+<script> var Stats=function(){function h(a){c.appendChild(a.dom);return a}function k(a){for(var d=0;d<c.children.length;d++)c.children[d].style.display=d===a?"block":"none";l=a}var l=0,c=document.createElement("div");c.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";c.addEventListener("click",function(a){a.preventDefault();k(++l%c.children.length)},!1);var g=(performance||Date).now(),e=g,a=0,r=h(new Stats.Panel("FPS","#0ff","#002")),f=h(new Stats.Panel("MS","#0f0","#020")); if(self.performance&&self.performance.memory)var t=h(new Stats.Panel("MB","#f08","#201"));k(0);return{REVISION:16,dom:c,addPanel:h,showPanel:k,begin:function(){g=(performance||Date).now()},end:function(){a++;var c=(performance||Date).now();f.update(c-g,200);if(c>e+1E3&&(r.update(1E3*a/(c-e),100),e=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){g=this.end()},domElement:c,setMode:k}}; Stats.Panel=function(h,k,l){var c=Infinity,g=0,e=Math.round,a=e(window.devicePixelRatio||1),r=80*a,f=48*a,t=3*a,u=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=f;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,f);b.fillStyle=k;b.fillText(h,t,u);b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(f, v){c=Math.min(c,f);g=Math.max(g,f);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=k;b.fillText(e(f)+" "+h+" ("+e(c)+"-"+e(g)+")",t,u);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,e((1-f/v)*p))}}};"object"===typeof module&&(module.exports=Stats);</script><script>( function () { const _raycaster = new THREE.Raycaster(); const _tempVector = new THREE.Vector3(); const _tempVector2 = new THREE.Vector3(); const _tempQuaternion = new THREE.Quaternion(); const _unit = { X: new THREE.Vector3( 1, 0, 0 ), Y: new THREE.Vector3( 0, 1, 0 ), Z: new THREE.Vector3( 0, 0, 1 ) }; const _changeEvent = { type: 'change' }; const _mouseDownEvent = { type: 'mouseDown' }; const _mouseUpEvent = { type: 'mouseUp', mode: null }; const _objectChangeEvent = { type: 'objectChange' }; class TransformControls extends THREE.Object3D { constructor( camera, domElement ) { super(); if ( domElement === undefined ) { console.warn( 'THREE.TransformControls: The second parameter "domElement" is now mandatory.' ); domElement = document; } this.visible = false; this.domElement = domElement; this.domElement.style.touchAction = 'none'; const _gizmo = new TransformControlsGizmo(); this._gizmo = _gizmo; this.add( _gizmo ); const _plane = new TransformControlsPlane(); this._plane = _plane; this.add( _plane ); const scope = this; function defineProperty( propName, defaultValue ) { let propValue = defaultValue; Object.defineProperty( scope, propName, { get: function () { return propValue !== undefined ? propValue : defaultValue; }, set: function ( value ) { if ( propValue !== value ) { propValue = value; _plane[ propName ] = value; _gizmo[ propName ] = value; scope.dispatchEvent( { type: propName + '-changed', value: value } ); scope.dispatchEvent( _changeEvent ); } } } ); scope[ propName ] = defaultValue; _plane[ propName ] = defaultValue; _gizmo[ propName ] = defaultValue; } defineProperty( 'camera', camera ); defineProperty( 'object', undefined ); defineProperty( 'enabled', true ); defineProperty( 'axis', null ); defineProperty( 'mode', 'translate' ); defineProperty( 'translationSnap', null ); defineProperty( 'rotationSnap', null ); defineProperty( 'scaleSnap', null ); defineProperty( 'space', 'world' ); defineProperty( 'size', 1 ); defineProperty( 'dragging', false ); defineProperty( 'showX', true ); defineProperty( 'showY', true ); defineProperty( 'showZ', true ); const worldPosition = new THREE.Vector3(); const worldPositionStart = new THREE.Vector3(); const worldQuaternion = new THREE.Quaternion(); const worldQuaternionStart = new THREE.Quaternion(); const cameraPosition = new THREE.Vector3(); const cameraQuaternion = new THREE.Quaternion(); const pointStart = new THREE.Vector3(); const pointEnd = new THREE.Vector3(); const rotationAxis = new THREE.Vector3(); const rotationAngle = 0; const eye = new THREE.Vector3(); defineProperty( 'worldPosition', worldPosition ); defineProperty( 'worldPositionStart', worldPositionStart ); defineProperty( 'worldQuaternion', worldQuaternion ); defineProperty( 'worldQuaternionStart', worldQuaternionStart ); defineProperty( 'cameraPosition', cameraPosition ); defineProperty( 'cameraQuaternion', cameraQuaternion ); defineProperty( 'pointStart', pointStart ); defineProperty( 'pointEnd', pointEnd ); defineProperty( 'rotationAxis', rotationAxis ); defineProperty( 'rotationAngle', rotationAngle ); defineProperty( 'eye', eye ); this._offset = new THREE.Vector3(); this._startNorm = new THREE.Vector3(); this._endNorm = new THREE.Vector3(); this._cameraScale = new THREE.Vector3(); this._parentPosition = new THREE.Vector3(); this._parentQuaternion = new THREE.Quaternion(); this._parentQuaternionInv = new THREE.Quaternion(); this._parentScale = new THREE.Vector3(); this._worldScaleStart = new THREE.Vector3(); this._worldQuaternionInv = new THREE.Quaternion(); this._worldScale = new THREE.Vector3(); this._positionStart = new THREE.Vector3(); this._quaternionStart = new THREE.Quaternion(); this._scaleStart = new THREE.Vector3(); this._getPointer = getPointer.bind( this ); this._onPointerDown = onPointerDown.bind( this ); this._onPointerHover = onPointerHover.bind( this ); this._onPointerMove = onPointerMove.bind( this ); this._onPointerUp = onPointerUp.bind( this ); this.domElement.addEventListener( 'pointerdown', this._onPointerDown ); this.domElement.addEventListener( 'pointermove', this._onPointerHover ); this.domElement.addEventListener( 'pointerup', this._onPointerUp ); } updateMatrixWorld() { if ( this.object !== undefined ) { this.object.updateMatrixWorld(); if ( this.object.parent === null ) { console.error( 'TransformControls: The attached 3D object must be a part of the scene graph.' ); } else { this.object.parent.matrixWorld.decompose( this._parentPosition, this._parentQuaternion, this._parentScale ); } this.object.matrixWorld.decompose( this.worldPosition, this.worldQuaternion, this._worldScale ); this._parentQuaternionInv.copy( this._parentQuaternion ).invert(); this._worldQuaternionInv.copy( this.worldQuaternion ).invert(); } this.camera.updateMatrixWorld(); this.camera.matrixWorld.decompose( this.cameraPosition, this.cameraQuaternion, this._cameraScale ); this.eye.copy( this.cameraPosition ).sub( this.worldPosition ).normalize(); super.updateMatrixWorld( this ); } pointerHover( pointer ) { if ( this.object === undefined || this.dragging === true ) return; _raycaster.setFromCamera( pointer, this.camera ); const intersect = intersectObjectWithRay( this._gizmo.picker[ this.mode ], _raycaster ); if ( intersect ) { this.axis = intersect.object.name; } else { this.axis = null; } } pointerDown( pointer ) { if ( this.object === undefined || this.dragging === true || pointer.button !== 0 ) return; if ( this.axis !== null ) { _raycaster.setFromCamera( pointer, this.camera ); const planeIntersect = intersectObjectWithRay( this._plane, _raycaster, true ); if ( planeIntersect ) { let space = this.space; if ( this.mode === 'scale' ) { space = 'local'; } else if ( this.axis === 'E' || this.axis === 'XYZE' || this.axis === 'XYZ' ) { space = 'world'; } if ( space === 'local' && this.mode === 'rotate' ) { const snap = this.rotationSnap; if ( this.axis === 'X' && snap ) this.object.rotation.x = Math.round( this.object.rotation.x / snap ) * snap; if ( this.axis === 'Y' && snap ) this.object.rotation.y = Math.round( this.object.rotation.y / snap ) * snap; if ( this.axis === 'Z' && snap ) this.object.rotation.z = Math.round( this.object.rotation.z / snap ) * snap; } this.object.updateMatrixWorld(); this.object.parent.updateMatrixWorld(); this._positionStart.copy( this.object.position ); this._quaternionStart.copy( this.object.quaternion ); this._scaleStart.copy( this.object.scale ); this.object.matrixWorld.decompose( this.worldPositionStart, this.worldQuaternionStart, this._worldScaleStart ); this.pointStart.copy( planeIntersect.point ).sub( this.worldPositionStart ); } this.dragging = true; _mouseDownEvent.mode = this.mode; this.dispatchEvent( _mouseDownEvent ); } } pointerMove( pointer ) { const axis = this.axis; const mode = this.mode; const object = this.object; let space = this.space; if ( mode === 'scale' ) { space = 'local'; } else if ( axis === 'E' || axis === 'XYZE' || axis === 'XYZ' ) { space = 'world'; } if ( object === undefined || axis === null || this.dragging === false || pointer.button !== - 1 ) return; _raycaster.setFromCamera( pointer, this.camera ); const planeIntersect = intersectObjectWithRay( this._plane, _raycaster, true ); if ( ! planeIntersect ) return; this.pointEnd.copy( planeIntersect.point ).sub( this.worldPositionStart ); if ( mode === 'translate' ) { this._offset.copy( this.pointEnd ).sub( this.pointStart ); if ( space === 'local' && axis !== 'XYZ' ) { this._offset.applyQuaternion( this._worldQuaternionInv ); } if ( axis.indexOf( 'X' ) === - 1 ) this._offset.x = 0; if ( axis.indexOf( 'Y' ) === - 1 ) this._offset.y = 0; if ( axis.indexOf( 'Z' ) === - 1 ) this._offset.z = 0; if ( space === 'local' && axis !== 'XYZ' ) { this._offset.applyQuaternion( this._quaternionStart ).divide( this._parentScale ); } else { this._offset.applyQuaternion( this._parentQuaternionInv ).divide( this._parentScale ); } object.position.copy( this._offset ).add( this._positionStart ); if ( this.translationSnap ) { if ( space === 'local' ) { object.position.applyQuaternion( _tempQuaternion.copy( this._quaternionStart ).invert() ); if ( axis.search( 'X' ) !== - 1 ) { object.position.x = Math.round( object.position.x / this.translationSnap ) * this.translationSnap; } if ( axis.search( 'Y' ) !== - 1 ) { object.position.y = Math.round( object.position.y / this.translationSnap ) * this.translationSnap; } if ( axis.search( 'Z' ) !== - 1 ) { object.position.z = Math.round( object.position.z / this.translationSnap ) * this.translationSnap; } object.position.applyQuaternion( this._quaternionStart ); } if ( space === 'world' ) { if ( object.parent ) { object.position.add( _tempVector.setFromMatrixPosition( object.parent.matrixWorld ) ); } if ( axis.search( 'X' ) !== - 1 ) { object.position.x = Math.round( object.position.x / this.translationSnap ) * this.translationSnap; } if ( axis.search( 'Y' ) !== - 1 ) { object.position.y = Math.round( object.position.y / this.translationSnap ) * this.translationSnap; } if ( axis.search( 'Z' ) !== - 1 ) { object.position.z = Math.round( object.position.z / this.translationSnap ) * this.translationSnap; } if ( object.parent ) { object.position.sub( _tempVector.setFromMatrixPosition( object.parent.matrixWorld ) ); } } } } else if ( mode === 'scale' ) { if ( axis.search( 'XYZ' ) !== - 1 ) { let d = this.pointEnd.length() / this.pointStart.length(); if ( this.pointEnd.dot( this.pointStart ) < 0 ) d *= - 1; _tempVector2.set( d, d, d ); } else { _tempVector.copy( this.pointStart ); _tempVector2.copy( this.pointEnd ); _tempVector.applyQuaternion( this._worldQuaternionInv ); _tempVector2.applyQuaternion( this._worldQuaternionInv ); _tempVector2.divide( _tempVector ); if ( axis.search( 'X' ) === - 1 ) { _tempVector2.x = 1; } if ( axis.search( 'Y' ) === - 1 ) { _tempVector2.y = 1; } if ( axis.search( 'Z' ) === - 1 ) { _tempVector2.z = 1; } } object.scale.copy( this._scaleStart ).multiply( _tempVector2 ); if ( this.scaleSnap ) { if ( axis.search( 'X' ) !== - 1 ) { object.scale.x = Math.round( object.scale.x / this.scaleSnap ) * this.scaleSnap || this.scaleSnap; } if ( axis.search( 'Y' ) !== - 1 ) { object.scale.y = Math.round( object.scale.y / this.scaleSnap ) * this.scaleSnap || this.scaleSnap; } if ( axis.search( 'Z' ) !== - 1 ) { object.scale.z = Math.round( object.scale.z / this.scaleSnap ) * this.scaleSnap || this.scaleSnap; } } } else if ( mode === 'rotate' ) { this._offset.copy( this.pointEnd ).sub( this.pointStart ); const ROTATION_SPEED = 20 / this.worldPosition.distanceTo( _tempVector.setFromMatrixPosition( this.camera.matrixWorld ) ); if ( axis === 'E' ) { this.rotationAxis.copy( this.eye ); this.rotationAngle = this.pointEnd.angleTo( this.pointStart ); this._startNorm.copy( this.pointStart ).normalize(); this._endNorm.copy( this.pointEnd ).normalize(); this.rotationAngle *= this._endNorm.cross( this._startNorm ).dot( this.eye ) < 0 ? 1 : - 1; } else if ( axis === 'XYZE' ) { this.rotationAxis.copy( this._offset ).cross( this.eye ).normalize(); this.rotationAngle = this._offset.dot( _tempVector.copy( this.rotationAxis ).cross( this.eye ) ) * ROTATION_SPEED; } else if ( axis === 'X' || axis === 'Y' || axis === 'Z' ) { this.rotationAxis.copy( _unit[ axis ] ); _tempVector.copy( _unit[ axis ] ); if ( space === 'local' ) { _tempVector.applyQuaternion( this.worldQuaternion ); } this.rotationAngle = this._offset.dot( _tempVector.cross( this.eye ).normalize() ) * ROTATION_SPEED; } if ( this.rotationSnap ) this.rotationAngle = Math.round( this.rotationAngle / this.rotationSnap ) * this.rotationSnap; if ( space === 'local' && axis !== 'E' && axis !== 'XYZE' ) { object.quaternion.copy( this._quaternionStart ); object.quaternion.multiply( _tempQuaternion.setFromAxisAngle( this.rotationAxis, this.rotationAngle ) ).normalize(); } else { this.rotationAxis.applyQuaternion( this._parentQuaternionInv ); object.quaternion.copy( _tempQuaternion.setFromAxisAngle( this.rotationAxis, this.rotationAngle ) ); object.quaternion.multiply( this._quaternionStart ).normalize(); } } this.dispatchEvent( _changeEvent ); this.dispatchEvent( _objectChangeEvent ); } pointerUp( pointer ) { if ( pointer.button !== 0 ) return; if ( this.dragging && this.axis !== null ) { _mouseUpEvent.mode = this.mode; this.dispatchEvent( _mouseUpEvent ); } this.dragging = false; this.axis = null; } dispose() { this.domElement.removeEventListener( 'pointerdown', this._onPointerDown ); this.domElement.removeEventListener( 'pointermove', this._onPointerHover ); this.domElement.removeEventListener( 'pointermove', this._onPointerMove ); this.domElement.removeEventListener( 'pointerup', this._onPointerUp ); this.traverse( function ( child ) { if ( child.geometry ) child.geometry.dispose(); if ( child.material ) child.material.dispose(); } ); } attach( object ) { this.object = object; this.visible = true; return this; } detach() { this.object = undefined; this.visible = false; this.axis = null; return this; } getRaycaster() { return _raycaster; } getMode() { return this.mode; } setMode( mode ) { this.mode = mode; } setTranslationSnap( translationSnap ) { this.translationSnap = translationSnap; } setRotationSnap( rotationSnap ) { this.rotationSnap = rotationSnap; } setScaleSnap( scaleSnap ) { this.scaleSnap = scaleSnap; } setSize( size ) { this.size = size; } setSpace( space ) { this.space = space; } update() { console.warn( 'THREE.TransformControls: update function has no more functionality and therefore has been deprecated.' ); } } TransformControls.prototype.isTransformControls = true; function getPointer( event ) { if ( this.domElement.ownerDocument.pointerLockElement ) { return { x: 0, y: 0, button: event.button }; } else { const rect = this.domElement.getBoundingClientRect(); return { x: ( event.clientX - rect.left ) / rect.width * 2 - 1, y: - ( event.clientY - rect.top ) / rect.height * 2 + 1, button: event.button }; } } function onPointerHover( event ) { if ( ! this.enabled ) return; switch ( event.pointerType ) { case 'mouse': case 'pen': this.pointerHover( this._getPointer( event ) ); break; } } function onPointerDown( event ) { if ( ! this.enabled ) return; this.domElement.setPointerCapture( event.pointerId ); this.domElement.addEventListener( 'pointermove', this._onPointerMove ); this.pointerHover( this._getPointer( event ) ); this.pointerDown( this._getPointer( event ) ); } function onPointerMove( event ) { if ( ! this.enabled ) return; this.pointerMove( this._getPointer( event ) ); } function onPointerUp( event ) { if ( ! this.enabled ) return; this.domElement.releasePointerCapture( event.pointerId ); this.domElement.removeEventListener( 'pointermove', this._onPointerMove ); this.pointerUp( this._getPointer( event ) ); } function intersectObjectWithRay( object, raycaster, includeInvisible ) { const allIntersections = raycaster.intersectObject( object, true ); for ( let i = 0; i < allIntersections.length; i ++ ) { if ( allIntersections[ i ].object.visible || includeInvisible ) { return allIntersections[ i ]; } } return false; } const _tempEuler = new THREE.Euler(); const _alignVector = new THREE.Vector3( 0, 1, 0 ); const _zeroVector = new THREE.Vector3( 0, 0, 0 ); const _lookAtMatrix = new THREE.Matrix4(); const _tempQuaternion2 = new THREE.Quaternion(); const _identityQuaternion = new THREE.Quaternion(); const _dirVector = new THREE.Vector3(); const _tempMatrix = new THREE.Matrix4(); const _unitX = new THREE.Vector3( 1, 0, 0 ); const _unitY = new THREE.Vector3( 0, 1, 0 ); const _unitZ = new THREE.Vector3( 0, 0, 1 ); const _v1 = new THREE.Vector3(); const _v2 = new THREE.Vector3(); const _v3 = new THREE.Vector3(); class TransformControlsGizmo extends THREE.Object3D { constructor() { super(); this.type = 'TransformControlsGizmo'; const gizmoMaterial = new THREE.MeshBasicMaterial( { depthTest: false, depthWrite: false, fog: false, toneMapped: false, transparent: true } ); const gizmoLineMaterial = new THREE.LineBasicMaterial( { depthTest: false, depthWrite: false, fog: false, toneMapped: false, transparent: true } ); const matInvisible = gizmoMaterial.clone(); matInvisible.opacity = 0.15; const matHelper = gizmoLineMaterial.clone(); matHelper.opacity = 0.5; const matRed = gizmoMaterial.clone(); matRed.color.setHex( 0xff0000 ); const matGreen = gizmoMaterial.clone(); matGreen.color.setHex( 0x00ff00 ); const matBlue = gizmoMaterial.clone(); matBlue.color.setHex( 0x0000ff ); const matRedTransparent = gizmoMaterial.clone(); matRedTransparent.color.setHex( 0xff0000 ); matRedTransparent.opacity = 0.5; const matGreenTransparent = gizmoMaterial.clone(); matGreenTransparent.color.setHex( 0x00ff00 ); matGreenTransparent.opacity = 0.5; const matBlueTransparent = gizmoMaterial.clone(); matBlueTransparent.color.setHex( 0x0000ff ); matBlueTransparent.opacity = 0.5; const matWhiteTransparent = gizmoMaterial.clone(); matWhiteTransparent.opacity = 0.25; const matYellowTransparent = gizmoMaterial.clone(); matYellowTransparent.color.setHex( 0xffff00 ); matYellowTransparent.opacity = 0.25; const matYellow = gizmoMaterial.clone(); matYellow.color.setHex( 0xffff00 ); const matGray = gizmoMaterial.clone(); matGray.color.setHex( 0x787878 ); const arrowGeometry = new THREE.CylinderGeometry( 0, 0.04, 0.1, 12 ); arrowGeometry.translate( 0, 0.05, 0 ); const scaleHandleGeometry = new THREE.BoxGeometry( 0.08, 0.08, 0.08 ); scaleHandleGeometry.translate( 0, 0.04, 0 ); const lineGeometry = new THREE.BufferGeometry(); lineGeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 1, 0, 0 ], 3 ) ); const lineGeometry2 = new THREE.CylinderGeometry( 0.0075, 0.0075, 0.5, 3 ); lineGeometry2.translate( 0, 0.25, 0 ); function CircleGeometry( radius, arc ) { const geometry = new THREE.TorusGeometry( radius, 0.0075, 3, 64, arc * Math.PI * 2 ); geometry.rotateY( Math.PI / 2 ); geometry.rotateX( Math.PI / 2 ); return geometry; } function TranslateHelperGeometry() { const geometry = new THREE.BufferGeometry(); geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 1, 1, 1 ], 3 ) ); return geometry; } const gizmoTranslate = { X: [[ new THREE.Mesh( arrowGeometry, matRed ), [ 0.5, 0, 0 ], [ 0, 0, - Math.PI / 2 ]], [ new THREE.Mesh( arrowGeometry, matRed ), [ - 0.5, 0, 0 ], [ 0, 0, Math.PI / 2 ]], [ new THREE.Mesh( lineGeometry2, matRed ), [ 0, 0, 0 ], [ 0, 0, - Math.PI / 2 ]]], Y: [[ new THREE.Mesh( arrowGeometry, matGreen ), [ 0, 0.5, 0 ]], [ new THREE.Mesh( arrowGeometry, matGreen ), [ 0, - 0.5, 0 ], [ Math.PI, 0, 0 ]], [ new THREE.Mesh( lineGeometry2, matGreen ) ]], Z: [[ new THREE.Mesh( arrowGeometry, matBlue ), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ]], [ new THREE.Mesh( arrowGeometry, matBlue ), [ 0, 0, - 0.5 ], [ - Math.PI / 2, 0, 0 ]], [ new THREE.Mesh( lineGeometry2, matBlue ), null, [ Math.PI / 2, 0, 0 ]]], XYZ: [[ new THREE.Mesh( new THREE.OctahedronGeometry( 0.1, 0 ), matWhiteTransparent.clone() ), [ 0, 0, 0 ]]], XY: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.15, 0.15, 0.01 ), matBlueTransparent.clone() ), [ 0.15, 0.15, 0 ]]], YZ: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.15, 0.15, 0.01 ), matRedTransparent.clone() ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ]]], XZ: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.15, 0.15, 0.01 ), matGreenTransparent.clone() ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]]] }; const pickerTranslate = { X: [[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0.3, 0, 0 ], [ 0, 0, - Math.PI / 2 ]], [ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ - 0.3, 0, 0 ], [ 0, 0, Math.PI / 2 ]]], Y: [[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0.3, 0 ]], [ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, - 0.3, 0 ], [ 0, 0, Math.PI ]]], Z: [[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0, 0.3 ], [ Math.PI / 2, 0, 0 ]], [ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0, - 0.3 ], [ - Math.PI / 2, 0, 0 ]]], XYZ: [[ new THREE.Mesh( new THREE.OctahedronGeometry( 0.2, 0 ), matInvisible ) ]], XY: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0.15, 0.15, 0 ]]], YZ: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ]]], XZ: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]]] }; const helperTranslate = { START: [[ new THREE.Mesh( new THREE.OctahedronGeometry( 0.01, 2 ), matHelper ), null, null, null, 'helper' ]], END: [[ new THREE.Mesh( new THREE.OctahedronGeometry( 0.01, 2 ), matHelper ), null, null, null, 'helper' ]], DELTA: [[ new THREE.Line( TranslateHelperGeometry(), matHelper ), null, null, null, 'helper' ]], X: [[ new THREE.Line( lineGeometry, matHelper.clone() ), [ - 1e3, 0, 0 ], null, [ 1e6, 1, 1 ], 'helper' ]], Y: [[ new THREE.Line( lineGeometry, matHelper.clone() ), [ 0, - 1e3, 0 ], [ 0, 0, Math.PI / 2 ], [ 1e6, 1, 1 ], 'helper' ]], Z: [[ new THREE.Line( lineGeometry, matHelper.clone() ), [ 0, 0, - 1e3 ], [ 0, - Math.PI / 2, 0 ], [ 1e6, 1, 1 ], 'helper' ]] }; const gizmoRotate = { XYZE: [[ new THREE.Mesh( CircleGeometry( 0.5, 1 ), matGray ), null, [ 0, Math.PI / 2, 0 ]]], X: [[ new THREE.Mesh( CircleGeometry( 0.5, 0.5 ), matRed ) ]], Y: [[ new THREE.Mesh( CircleGeometry( 0.5, 0.5 ), matGreen ), null, [ 0, 0, - Math.PI / 2 ]]], Z: [[ new THREE.Mesh( CircleGeometry( 0.5, 0.5 ), matBlue ), null, [ 0, Math.PI / 2, 0 ]]], E: [[ new THREE.Mesh( CircleGeometry( 0.75, 1 ), matYellowTransparent ), null, [ 0, Math.PI / 2, 0 ]]] }; const helperRotate = { AXIS: [[ new THREE.Line( lineGeometry, matHelper.clone() ), [ - 1e3, 0, 0 ], null, [ 1e6, 1, 1 ], 'helper' ]] }; const pickerRotate = { XYZE: [[ new THREE.Mesh( new THREE.SphereGeometry( 0.25, 10, 8 ), matInvisible ) ]], X: [[ new THREE.Mesh( new THREE.TorusGeometry( 0.5, 0.1, 4, 24 ), matInvisible ), [ 0, 0, 0 ], [ 0, - Math.PI / 2, - Math.PI / 2 ]]], Y: [[ new THREE.Mesh( new THREE.TorusGeometry( 0.5, 0.1, 4, 24 ), matInvisible ), [ 0, 0, 0 ], [ Math.PI / 2, 0, 0 ]]], Z: [[ new THREE.Mesh( new THREE.TorusGeometry( 0.5, 0.1, 4, 24 ), matInvisible ), [ 0, 0, 0 ], [ 0, 0, - Math.PI / 2 ]]], E: [[ new THREE.Mesh( new THREE.TorusGeometry( 0.75, 0.1, 2, 24 ), matInvisible ) ]] }; const gizmoScale = { X: [[ new THREE.Mesh( scaleHandleGeometry, matRed ), [ 0.5, 0, 0 ], [ 0, 0, - Math.PI / 2 ]], [ new THREE.Mesh( lineGeometry2, matRed ), [ 0, 0, 0 ], [ 0, 0, - Math.PI / 2 ]], [ new THREE.Mesh( scaleHandleGeometry, matRed ), [ - 0.5, 0, 0 ], [ 0, 0, Math.PI / 2 ]]], Y: [[ new THREE.Mesh( scaleHandleGeometry, matGreen ), [ 0, 0.5, 0 ]], [ new THREE.Mesh( lineGeometry2, matGreen ) ], [ new THREE.Mesh( scaleHandleGeometry, matGreen ), [ 0, - 0.5, 0 ], [ 0, 0, Math.PI ]]], Z: [[ new THREE.Mesh( scaleHandleGeometry, matBlue ), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ]], [ new THREE.Mesh( lineGeometry2, matBlue ), [ 0, 0, 0 ], [ Math.PI / 2, 0, 0 ]], [ new THREE.Mesh( scaleHandleGeometry, matBlue ), [ 0, 0, - 0.5 ], [ - Math.PI / 2, 0, 0 ]]], XY: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.15, 0.15, 0.01 ), matBlueTransparent ), [ 0.15, 0.15, 0 ]]], YZ: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.15, 0.15, 0.01 ), matRedTransparent ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ]]], XZ: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.15, 0.15, 0.01 ), matGreenTransparent ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]]], XYZ: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.1, 0.1, 0.1 ), matWhiteTransparent.clone() ) ]] }; const pickerScale = { X: [[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0.3, 0, 0 ], [ 0, 0, - Math.PI / 2 ]], [ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ - 0.3, 0, 0 ], [ 0, 0, Math.PI / 2 ]]], Y: [[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0.3, 0 ]], [ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, - 0.3, 0 ], [ 0, 0, Math.PI ]]], Z: [[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0, 0.3 ], [ Math.PI / 2, 0, 0 ]], [ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 0.6, 4 ), matInvisible ), [ 0, 0, - 0.3 ], [ - Math.PI / 2, 0, 0 ]]], XY: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0.15, 0.15, 0 ]]], YZ: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ]]], XZ: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.2, 0.2, 0.01 ), matInvisible ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]]], XYZ: [[ new THREE.Mesh( new THREE.BoxGeometry( 0.2, 0.2, 0.2 ), matInvisible ), [ 0, 0, 0 ]]] }; const helperScale = { X: [[ new THREE.Line( lineGeometry, matHelper.clone() ), [ - 1e3, 0, 0 ], null, [ 1e6, 1, 1 ], 'helper' ]], Y: [[ new THREE.Line( lineGeometry, matHelper.clone() ), [ 0, - 1e3, 0 ], [ 0, 0, Math.PI / 2 ], [ 1e6, 1, 1 ], 'helper' ]], Z: [[ new THREE.Line( lineGeometry, matHelper.clone() ), [ 0, 0, - 1e3 ], [ 0, - Math.PI / 2, 0 ], [ 1e6, 1, 1 ], 'helper' ]] }; function setupGizmo( gizmoMap ) { const gizmo = new THREE.Object3D(); for ( const name in gizmoMap ) { for ( let i = gizmoMap[ name ].length; i --; ) { const object = gizmoMap[ name ][ i ][ 0 ].clone(); const position = gizmoMap[ name ][ i ][ 1 ]; const rotation = gizmoMap[ name ][ i ][ 2 ]; const scale = gizmoMap[ name ][ i ][ 3 ]; const tag = gizmoMap[ name ][ i ][ 4 ]; object.name = name; object.tag = tag; if ( position ) { object.position.set( position[ 0 ], position[ 1 ], position[ 2 ] ); } if ( rotation ) { object.rotation.set( rotation[ 0 ], rotation[ 1 ], rotation[ 2 ] ); } if ( scale ) { object.scale.set( scale[ 0 ], scale[ 1 ], scale[ 2 ] ); } object.updateMatrix(); const tempGeometry = object.geometry.clone(); tempGeometry.applyMatrix4( object.matrix ); object.geometry = tempGeometry; object.renderOrder = Infinity; object.position.set( 0, 0, 0 ); object.rotation.set( 0, 0, 0 ); object.scale.set( 1, 1, 1 ); gizmo.add( object ); } } return gizmo; } this.gizmo = {}; this.picker = {}; this.helper = {}; this.add( this.gizmo[ 'translate' ] = setupGizmo( gizmoTranslate ) ); this.add( this.gizmo[ 'rotate' ] = setupGizmo( gizmoRotate ) ); this.add( this.gizmo[ 'scale' ] = setupGizmo( gizmoScale ) ); this.add( this.picker[ 'translate' ] = setupGizmo( pickerTranslate ) ); this.add( this.picker[ 'rotate' ] = setupGizmo( pickerRotate ) ); this.add( this.picker[ 'scale' ] = setupGizmo( pickerScale ) ); this.add( this.helper[ 'translate' ] = setupGizmo( helperTranslate ) ); this.add( this.helper[ 'rotate' ] = setupGizmo( helperRotate ) ); this.add( this.helper[ 'scale' ] = setupGizmo( helperScale ) ); this.picker[ 'translate' ].visible = false; this.picker[ 'rotate' ].visible = false; this.picker[ 'scale' ].visible = false; } updateMatrixWorld( force ) { const space = this.mode === 'scale' ? 'local' : this.space; const quaternion = space === 'local' ? this.worldQuaternion : _identityQuaternion; this.gizmo[ 'translate' ].visible = this.mode === 'translate'; this.gizmo[ 'rotate' ].visible = this.mode === 'rotate'; this.gizmo[ 'scale' ].visible = this.mode === 'scale'; this.helper[ 'translate' ].visible = this.mode === 'translate'; this.helper[ 'rotate' ].visible = this.mode === 'rotate'; this.helper[ 'scale' ].visible = this.mode === 'scale'; let handles = []; handles = handles.concat( this.picker[ this.mode ].children ); handles = handles.concat( this.gizmo[ this.mode ].children ); handles = handles.concat( this.helper[ this.mode ].children ); for ( let i = 0; i < handles.length; i ++ ) { const handle = handles[ i ]; handle.visible = true; handle.rotation.set( 0, 0, 0 ); handle.position.copy( this.worldPosition ); let factor; if ( this.camera.isOrthographicCamera ) { factor = ( this.camera.top - this.camera.bottom ) / this.camera.zoom; } else { factor = this.worldPosition.distanceTo( this.cameraPosition ) * Math.min( 1.9 * Math.tan( Math.PI * this.camera.fov / 360 ) / this.camera.zoom, 7 ); } handle.scale.set( 1, 1, 1 ).multiplyScalar( factor * this.size / 4 ); if ( handle.tag === 'helper' ) { handle.visible = false; if ( handle.name === 'AXIS' ) { handle.position.copy( this.worldPositionStart ); handle.visible = !! this.axis; if ( this.axis === 'X' ) { _tempQuaternion.setFromEuler( _tempEuler.set( 0, 0, 0 ) ); handle.quaternion.copy( quaternion ).multiply( _tempQuaternion ); if ( Math.abs( _alignVector.copy( _unitX ).applyQuaternion( quaternion ).dot( this.eye ) ) > 0.9 ) { handle.visible = false; } } if ( this.axis === 'Y' ) { _tempQuaternion.setFromEuler( _tempEuler.set( 0, 0, Math.PI / 2 ) ); handle.quaternion.copy( quaternion ).multiply( _tempQuaternion ); if ( Math.abs( _alignVector.copy( _unitY ).applyQuaternion( quaternion ).dot( this.eye ) ) > 0.9 ) { handle.visible = false; } } if ( this.axis === 'Z' ) { _tempQuaternion.setFromEuler( _tempEuler.set( 0, Math.PI / 2, 0 ) ); handle.quaternion.copy( quaternion ).multiply( _tempQuaternion ); if ( Math.abs( _alignVector.copy( _unitZ ).applyQuaternion( quaternion ).dot( this.eye ) ) > 0.9 ) { handle.visible = false; } } if ( this.axis === 'XYZE' ) { _tempQuaternion.setFromEuler( _tempEuler.set( 0, Math.PI / 2, 0 ) ); _alignVector.copy( this.rotationAxis ); handle.quaternion.setFromRotationMatrix( _lookAtMatrix.lookAt( _zeroVector, _alignVector, _unitY ) ); handle.quaternion.multiply( _tempQuaternion ); handle.visible = this.dragging; } if ( this.axis === 'E' ) { handle.visible = false; } } else if ( handle.name === 'START' ) { handle.position.copy( this.worldPositionStart ); handle.visible = this.dragging; } else if ( handle.name === 'END' ) { handle.position.copy( this.worldPosition ); handle.visible = this.dragging; } else if ( handle.name === 'DELTA' ) { handle.position.copy( this.worldPositionStart ); handle.quaternion.copy( this.worldQuaternionStart ); _tempVector.set( 1e-10, 1e-10, 1e-10 ).add( this.worldPositionStart ).sub( this.worldPosition ).multiplyScalar( - 1 ); _tempVector.applyQuaternion( this.worldQuaternionStart.clone().invert() ); handle.scale.copy( _tempVector ); handle.visible = this.dragging; } else { handle.quaternion.copy( quaternion ); if ( this.dragging ) { handle.position.copy( this.worldPositionStart ); } else { handle.position.copy( this.worldPosition ); } if ( this.axis ) { handle.visible = this.axis.search( handle.name ) !== - 1; } } continue; } handle.quaternion.copy( quaternion ); if ( this.mode === 'translate' || this.mode === 'scale' ) { const AXIS_HIDE_TRESHOLD = 0.99; const PLANE_HIDE_TRESHOLD = 0.2; if ( handle.name === 'X' ) { if ( Math.abs( _alignVector.copy( _unitX ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_TRESHOLD ) { handle.scale.set( 1e-10, 1e-10, 1e-10 ); handle.visible = false; } } if ( handle.name === 'Y' ) { if ( Math.abs( _alignVector.copy( _unitY ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_TRESHOLD ) { handle.scale.set( 1e-10, 1e-10, 1e-10 ); handle.visible = false; } } if ( handle.name === 'Z' ) { if ( Math.abs( _alignVector.copy( _unitZ ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_TRESHOLD ) { handle.scale.set( 1e-10, 1e-10, 1e-10 ); handle.visible = false; } } if ( handle.name === 'XY' ) { if ( Math.abs( _alignVector.copy( _unitZ ).applyQuaternion( quaternion ).dot( this.eye ) ) < PLANE_HIDE_TRESHOLD ) { handle.scale.set( 1e-10, 1e-10, 1e-10 ); handle.visible = false; } } if ( handle.name === 'YZ' ) { if ( Math.abs( _alignVector.copy( _unitX ).applyQuaternion( quaternion ).dot( this.eye ) ) < PLANE_HIDE_TRESHOLD ) { handle.scale.set( 1e-10, 1e-10, 1e-10 ); handle.visible = false; } } if ( handle.name === 'XZ' ) { if ( Math.abs( _alignVector.copy( _unitY ).applyQuaternion( quaternion ).dot( this.eye ) ) < PLANE_HIDE_TRESHOLD ) { handle.scale.set( 1e-10, 1e-10, 1e-10 ); handle.visible = false; } } } else if ( this.mode === 'rotate' ) { _tempQuaternion2.copy( quaternion ); _alignVector.copy( this.eye ).applyQuaternion( _tempQuaternion.copy( quaternion ).invert() ); if ( handle.name.search( 'E' ) !== - 1 ) { handle.quaternion.setFromRotationMatrix( _lookAtMatrix.lookAt( this.eye, _zeroVector, _unitY ) ); } if ( handle.name === 'X' ) { _tempQuaternion.setFromAxisAngle( _unitX, Math.atan2( - _alignVector.y, _alignVector.z ) ); _tempQuaternion.multiplyQuaternions( _tempQuaternion2, _tempQuaternion ); handle.quaternion.copy( _tempQuaternion ); } if ( handle.name === 'Y' ) { _tempQuaternion.setFromAxisAngle( _unitY, Math.atan2( _alignVector.x, _alignVector.z ) ); _tempQuaternion.multiplyQuaternions( _tempQuaternion2, _tempQuaternion ); handle.quaternion.copy( _tempQuaternion ); } if ( handle.name === 'Z' ) { _tempQuaternion.setFromAxisAngle( _unitZ, Math.atan2( _alignVector.y, _alignVector.x ) ); _tempQuaternion.multiplyQuaternions( _tempQuaternion2, _tempQuaternion ); handle.quaternion.copy( _tempQuaternion ); } } handle.visible = handle.visible && ( handle.name.indexOf( 'X' ) === - 1 || this.showX ); handle.visible = handle.visible && ( handle.name.indexOf( 'Y' ) === - 1 || this.showY ); handle.visible = handle.visible && ( handle.name.indexOf( 'Z' ) === - 1 || this.showZ ); handle.visible = handle.visible && ( handle.name.indexOf( 'E' ) === - 1 || this.showX && this.showY && this.showZ ); handle.material._color = handle.material._color || handle.material.color.clone(); handle.material._opacity = handle.material._opacity || handle.material.opacity; handle.material.color.copy( handle.material._color ); handle.material.opacity = handle.material._opacity; if ( this.enabled && this.axis ) { if ( handle.name === this.axis ) { handle.material.color.setHex( 0xffff00 ); handle.material.opacity = 1.0; } else if ( this.axis.split( '' ).some( function ( a ) { return handle.name === a; } ) ) { handle.material.color.setHex( 0xffff00 ); handle.material.opacity = 1.0; } } } super.updateMatrixWorld( force ); } } TransformControlsGizmo.prototype.isTransformControlsGizmo = true; class TransformControlsPlane extends THREE.Mesh { constructor() { super( new THREE.PlaneGeometry( 100000, 100000, 2, 2 ), new THREE.MeshBasicMaterial( { visible: false, wireframe: true, side: THREE.DoubleSide, transparent: true, opacity: 0.1, toneMapped: false } ) ); this.type = 'TransformControlsPlane'; } updateMatrixWorld( force ) { let space = this.space; this.position.copy( this.worldPosition ); if ( this.mode === 'scale' ) space = 'local'; _v1.copy( _unitX ).applyQuaternion( space === 'local' ? this.worldQuaternion : _identityQuaternion ); _v2.copy( _unitY ).applyQuaternion( space === 'local' ? this.worldQuaternion : _identityQuaternion ); _v3.copy( _unitZ ).applyQuaternion( space === 'local' ? this.worldQuaternion : _identityQuaternion ); _alignVector.copy( _v2 ); switch ( this.mode ) { case 'translate': case 'scale': switch ( this.axis ) { case 'X': _alignVector.copy( this.eye ).cross( _v1 ); _dirVector.copy( _v1 ).cross( _alignVector ); break; case 'Y': _alignVector.copy( this.eye ).cross( _v2 ); _dirVector.copy( _v2 ).cross( _alignVector ); break; case 'Z': _alignVector.copy( this.eye ).cross( _v3 ); _dirVector.copy( _v3 ).cross( _alignVector ); break; case 'XY': _dirVector.copy( _v3 ); break; case 'YZ': _dirVector.copy( _v1 ); break; case 'XZ': _alignVector.copy( _v3 ); _dirVector.copy( _v2 ); break; case 'XYZ': case 'E': _dirVector.set( 0, 0, 0 ); break; } break; case 'rotate': default: _dirVector.set( 0, 0, 0 ); } if ( _dirVector.length() === 0 ) { this.quaternion.copy( this.cameraQuaternion ); } else { _tempMatrix.lookAt( _tempVector.set( 0, 0, 0 ), _dirVector, _alignVector ); this.quaternion.setFromRotationMatrix( _tempMatrix ); } super.updateMatrixWorld( force ); } } TransformControlsPlane.prototype.isTransformControlsPlane = true; THREE.TransformControls = TransformControls; THREE.TransformControlsGizmo = TransformControlsGizmo; THREE.TransformControlsPlane = TransformControlsPlane; } )();</script><style> :root{--bg-color:#fff;--text-color:#333;--header-bg:#f0f0f0;--panel-bg:rgba(240,240,240,0.9);--panel-item-bg:#e0e0e0;--panel-item-hover:#c0c0c0;--primary-color:#5D5CDE;--secondary-color:#FF6B6B;--border-color:#ccc;--success-color:#4CAF50;--alert-bg:#ffecb3;--alert-border:#ffc107;--canvas-bg:#f8f8f8;--grid-color:rgba(0,0,0,0.1);--tool-active:#e0f7fa;--axis-x-color:#f44336;--axis-y-color:#4CAF50;--axis-z-color:#2196F3}@keyframes pulse{0%,100%{opacity:.5;transform:scale(0.8)}50%{opacity:1;transform:scale(1)}}@media (prefers-color-scheme:dark){:root{--bg-color:#181818;--text-color:#e0e0e0;--header-bg:#2a2a2a;--panel-bg:rgba(42,42,42,0.9);--panel-item-bg:#333;--panel-item-hover:#444;--primary-color:#7978E9;--secondary-color:#FF8585;--border-color:#444;--success-color:#6DCF71;--alert-bg:#614a00;--alert-border:#856600;--canvas-bg:#222;--grid-color:rgba(255,255,255,0.1);--tool-active:#394a4d}}*{box-sizing:border-box;margin:0;padding:0}.ai-control-panel{display:none;position:fixed;top:0;bottom:0;right:0;width:320px;background-color:var(--panel-bg);padding:15px;flex-direction:column;border-left:1px solid var(--border-color);box-shadow:-2px 0 10px rgba(0,0,0,0.2);z-index:100;height:100vh;overflow-y:auto}.ai-message{background-color:var(--panel-item-bg);align-self:flex-start}.ai-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.ai-panel-title{font-weight:700;display:flex;align-items:center;gap:5px}.chat-input-area{display:flex;margin-bottom:10px;gap:5px}.chat-input-area input{flex-grow:1;padding:8px;font-size:16px;background-color:var(--bg-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:4px}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background-color:var(--bg-color);color:var(--text-color);overflow:hidden;height:100vh;width:100vw;display:flex;flex-direction:column}.chat-log{flex:1;min-height:200px;overflow-y:auto;border:1px solid var(--border-color);padding:8px;margin-bottom:10px;background-color:var(--bg-color);border-radius:4px;display:flex;flex-direction:column}.file-menu{display:flex;gap:5px}.header{background-color:var(--header-bg);padding:8px 10px;display:flex;gap:8px;align-items:center;z-index:50;box-shadow:0 2px 4px rgba(0,0,0,0.1)}.menu-button{padding:8px 12px;cursor:pointer;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;transition:background-color .2s}.menu-button:hover{background-color:#4a49b8}.main-container{display:flex;flex:1;position:relative;overflow:hidden}.tools-panel{width:60px;background-color:var(--panel-bg);display:flex;flex-direction:column;align-items:center;padding:10px 0;border-right:1px solid var(--border-color);overflow-y:auto;z-index:20}.tool-btn{width:40px;height:40px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;border:1px solid var(--border-color);background-color:var(--bg-color);color:var(--text-color);transition:all .2s ease;position:relative}.tool-btn:hover{transform:scale(1.05);background-color:var(--panel-item-hover)}.tool-btn.active{background-color:var(--tool-active);border-color:var(--primary-color)}.tools-group{border-bottom:1px solid var(--border-color);padding-bottom:10px;margin-bottom:10px;width:100%;display:flex;flex-direction:column;align-items:center}.tools-group-label{font-size:10px;color:var(--text-color);opacity:.8;margin-bottom:5px;text-align:center}.workspace{flex:1;position:relative;overflow:hidden;background-color:var(--canvas-bg)}#canvas-container{position:absolute;width:100%;height:100%;overflow:hidden}.render-stats{position:absolute;bottom:10px;left:10px;z-index:10} .properties-panel{ width:260px; background-color:var(--panel-bg); border-left:1px solid var(--border-color); padding:15px; overflow-y:auto; z-index:20} .panel-section{ margin-bottom: 20px; border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; } .panel-section-title{ font-weight:bold; padding: 10px; background-color: var(--panel-item-bg); display:flex; align-items:center; justify-content:space-between; cursor: pointer } .panel-content { padding: 10px; background-color: var(--bg-color); } .panel-section-title span{ display:flex; align-items:center; gap:5px } .checkbox-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; } .checkbox-item { display: flex; align-items: center; gap: 5px; } .tooltip{position:absolute;background-color:rgba(0,0,0,0.8);color:#fff;padding:6px 10px;border-radius:4px;font-size:12px;z-index:1000;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .2s} .property-row{margin-bottom:8px} .project-name-display{flex-grow:1;padding:8px 12px;font-size:16px;background-color:var(--bg-color);color:var(--text-color);border-radius:4px;font-weight:700}.property-label{display:block;margin-bottom:5px;font-size:12px}.property-input, .property-select{width:100%;padding:6px;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-color);color:var(--text-color);font-size:14px} .color-input{width:100%;padding:4px;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-color);color:var(--text-color)} .color-picker{display:flex;align-items:center;gap:8px;margin-bottom:8px} .color-preview{border: 1px solid #ccc; background-color: #fff; width:24px;height:24px;border-radius:50%;border:1px solid var(--border-color);cursor:pointer} .objects-container{border:1px solid var(--border-color);border-radius:4px;max-height:180px;overflow-y:auto;background-color:var(--bg-color)}.object-item{padding:8px;display:flex;align-items:center;border-bottom:1px solid var(--border-color);cursor:pointer} .object-item:last-child{border-bottom:0}.object-item.active{background-color:var(--tool-active)}.object-item:hover{background-color:var(--panel-item-hover)}.object-visibility{margin-right:5px;cursor:pointer}.object-name{flex-grow:1;font-size:14px}.object-actions{opacity:.5;transition:opacity .2s}.object-item:hover .object-actions{opacity:1}.toast-notification{position:fixed;top:20px;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,0.7);color:#fff;padding:10px 20px;border-radius:4px;z-index:1000;display:none}.message{padding:10px;border-radius:6px;margin-bottom:8px;word-wrap:break-word;line-height:1.4;max-width:90%}.user-message{background-color:var(--tool-active);align-self:flex-end;margin-left:auto}.loading-indicator{display:none;margin:10px 0;text-align:center;font-style:italic;color:var(--text-color)}.loading-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background-color:var(--text-color);margin:0 2px;animation:pulse 1.5s infinite}.loading-dot:nth-child(2){animation-delay:.3s}.loading-dot:nth-child(3){animation-delay:.6s} .templates-panel{display:none;position:fixed;top:45px;left:0;right:0;background-color:var(--panel-bg);border-bottom:1px solid var(--border-color);padding:15px;z-index:40}.templates-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:15px}.template-item{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:4px;overflow:hidden;cursor:pointer;transition:transform .2s}.template-item:hover{transform:scale(1.03);border-color:var(--primary-color)}.template-preview{height:100px;background-color:var(--panel-item-bg);display:flex;align-items:center;justify-content:center}.template-name{padding:6px;text-align:center;font-size:12px}.template-controls{display:flex;justify-content:space-between;margin-bottom:10px}.template-categories{display:flex;gap:10px}.template-category{padding:6px 12px;border-radius:4px;cursor:pointer;background-color:var(--panel-item-bg)}.template-category.active{background-color:var(--primary-color);color:#fff}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1000;justify-content:center;align-items:center}.modal-content{background-color:var(--bg-color);border-radius:8px;padding:20px;width:90%;max-width:500px;box-shadow:0 5px 15px rgba(0,0,0,0.3)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--border-color)}.modal-title{font-size:18px;font-weight:700}.modal-close{background:0;border:0;font-size:20px;cursor:pointer;color:var(--text-color)}.export-options{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}.export-option{padding:10px;border:1px solid var(--border-color);border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:10px}.export-option:hover{background-color:var(--panel-item-hover)}.export-option-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:var(--primary-color);color:#fff;border-radius:4px}.export-option-details{flex:1}.export-name{font-weight:700;margin-bottom:3px}.export-description{font-size:12px;opacity:.8}.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:15px;padding-top:10px;border-top:1px solid var(--border-color)}.modal-button{padding:8px 16px;border-radius:4px;cursor:pointer;border:0}.modal-button-primary{background-color:var(--primary-color);color:#fff}.modal-button-secondary{background-color:var(--panel-item-bg);color:var(--text-color)} .modal-button:hover{opacity:.9}.status-bar{height:24px;background-color:var(--header-bg);display:flex;align-items:center;padding:0 10px;font-size:12px;color:var(--text-color);border-top:1px solid var(--border-color)}.status-info{margin-right:15px}.status-position{margin-left:auto}.coordinate-info{margin-left:15px;display:flex;gap:10px}.coordinate-x{color:var(--axis-x-color)} .coordinate-y{color:var(--axis-y-color)}.coordinate-z{color:var(--axis-z-color)}.view-controls{position:absolute;top:10px;left:10px;display:flex;gap:5px;z-index:10}.view-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background-color:var(--panel-bg);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;font-size:14px;color:var(--text-color)}.view-btn:hover{background-color:var(--panel-item-hover)}.transform-controls{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background-color:var(--panel-bg);border:1px solid var(--border-color);border-radius:4px;display:flex;padding:5px;gap:5px;z-index:10}.transform-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:4px;cursor:pointer}.transform-btn.active{background-color:var(--tool-active);border-color:var(--primary-color)}.transform-btn:hover{background-color:var(--panel-item-hover)}.ai-actions{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}.ai-action-btn{flex:1;min-width:calc(50% - 5px);padding:8px;background-color:var(--panel-item-bg);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:background-color .2s;text-align:center}.ai-action-btn:hover{background-color:var(--panel-item-hover)}.coordinate-input-group{display:flex;gap:5px;margin-bottom:10px}.coordinate-input{flex:1;position:relative}.coordinate-input input{width:100%;padding:6px;padding-left:18px;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-color);color:var(--text-color);font-size:14px}.coordinate-label{position:absolute;left:6px;top:6px;font-weight:700}.coordinate-label.x{color:var(--axis-x-color)}.coordinate-label.y{color:var(--axis-y-color)}.coordinate-label.z{color:var(--axis-z-color)}.pro-badge{position:absolute;top:-5px;right:-5px;background-color:#FFD700;color:#000;border-radius:4px;padding:2px 4px;font-size:8px;font-weight:700;z-index:5;cursor:pointer}.file-input-wrapper{position:relative;display:inline-block}.file-input{position:absolute;left:0;top:0;opacity:0;width:100%;height:100%;cursor:pointer}.dropzone{border:2px dashed var(--border-color);padding:20px;text-align:center;margin-bottom:15px;border-radius:8px;transition:all .3s}.dropzone.active{border-color:var(--primary-color);background-color:rgba(93,92,222,0.1)}.dropzone-text{margin-bottom:10px}.import-options{margin-top:15px}.ai-generate-panel{display:none;position:fixed;top:45px;left:0;right:0;background-color:var(--panel-bg);border-bottom:1px solid var(--border-color);padding:15px;z-index:40}.texture-preview{margin-top:10px;max-width:100%;height:150px;border:1px solid var(--border-color);border-radius:4px;object-fit:contain;background-color:var(--bg-color);display:flex;align-items:center;justify-content:center}.texture-generator{margin-top:15px}.texture-prompt{width:100%;margin-bottom:10px;padding:8px;min-height:60px;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-color);color:var(--text-color);font-size:16px;resize:vertical}.model-generator{margin-bottom:15px}.model-prompt{width:100%;padding:8px;min-height:60px;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-color);color:var(--text-color);font-size:16px;margin-bottom:10px;resize:vertical}.material-map-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.map-preview{width:calc(50% - 5px);margin-bottom:10px}.map-image{width:100%;height:100px;object-fit:cover;border-radius:4px;border:1px solid var(--border-color);cursor:pointer;transition:transform .2s}.map-image:hover{transform:scale(1.02)}.map-label{display:block;text-align:center;margin-top:5px;font-size:12px}.floating-btn{position:fixed;bottom:20px;right:20px;width:50px;height:50px;border-radius:50%;background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,0.2);z-index:40;cursor:pointer;transition:all .3s}.floating-btn:hover{transform:scale(1.1);background-color:#4a49b8}@media (max-width:768px){.properties-panel{position:fixed;top:0;right:0;bottom:0;width:260px;transform:translateX(100%);transition:transform .3s ease;z-index:30}.properties-panel.show{transform:translateX(0)}.mobile-properties-toggle{display:block;position:fixed;right:10px;bottom:80px;width:40px;height:40px;border-radius:50%;background-color:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(0,0,0,0.2);z-index:25}.tools-panel{width:48px}.tool-btn{width:36px;height:36px;font-size:14px}.transform-controls{bottom:40px}} .confirm-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 2000; justify-content: center; align-items: center; } .confirm-content { background-color: var(--bg-color); border-radius: 8px; padding: 20px; width: 90%; max-width: 400px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .confirm-message { margin-bottom: 20px; font-size: 16px; } .confirm-buttons { display: flex; justify-content: flex-end; gap: 10px; } .selected-objects-count { margin-left: 10px; background-color: var(--primary-color); color: white; padding: 1px 6px; border-radius: 10px; font-size: 12px; } </style></head><body><div class="header"><div class="file-menu"><button class="menu-button" id="newBtn" title="Create an empty scene">New</button><button class="menu-button" id="importBtn" title="Import 3D model or json">Import</button><button class="menu-button" id="exportBtn" title="Export object or json file">Export</button><button class="menu-button" id="templatesBtn" title="Replace the inviroment with a template">Templates</button></div><button class="menu-button" id="aiGenerateBtn" title="Generate texture or 3D object with AI">Generate Object</button><button class="menu-button" id="subscribeBtn" title="Support the creator by a Poe subscription">Subscribe</button><button class="menu-button" id="donateBtn" title="Donate credit to the developer">Donate</button><button class="menu-button" id="aiAssistBtn" style="margin-left: auto; background-color: #000;">AI Assist</button></div><div class="templates-panel" id="templatesPanel"><div class="template-controls"><div class="template-categories"><div class="template-category active" data-category="all">All</div><div class="template-category" data-category="basic">Basic</div><div class="template-category" data-category="furniture">Furniture</div><div class="template-category" data-category="architecture">Architecture</div></div><button class="menu-button" id="closeTemplatesBtn">Close</button></div><div class="templates-grid" id="templatesGrid"></div></div><div class="ai-generate-panel" id="aiGeneratePanel"><div class="template-controls"><div class="template-categories"><div class="template-category active" data-category="model">3D Model</div><div class="template-category" data-category="texture">Texture</div></div><button class="menu-button" id="closeAiGenerateBtn">Close</button></div><div class="model-generator"><h3>Generate 3D Model with AI</h3><p>Describe the 3D model you want to generate:</p><br><textarea class="model-prompt" id="modelPrompt"></textarea><div style="margin-bottom:10px"><div class="property-row"><div style="display:flex;gap:15px"><label><input type="radio" name="modelOutputFormat" value="obj" checked> OBJ Format</label><label><input type="radio" name="modelOutputFormat" value="json"> JSON Format</label></div></div></div><button class="menu-button" id="generateModelBtn">Generate</button><div class="loading-indicator" id="modelLoadingIndicator">Generating 3D model<span class="loading-dot"></span><span class="loading-dot"></span><span class="loading-dot"></span></div></div><div class="texture-generator" style="display:none"><h3>Generate Texture with AI</h3><p>Describe the texture you want to generate:</p><br><textarea class="texture-prompt" id="texturePrompt"></textarea><button class="menu-button" id="generateTextureBtn">Generate Texture</button><div class="loading-indicator" id="textureLoadingIndicator">Generating texture<span class="loading-dot"></span><span class="loading-dot"></span><span class="loading-dot"></span></div><div class="texture-preview" id="texturePreview">Texture will appear here...</div><button class="menu-button" id="applyTextureBtn" style="display:none;margin-top:10px">Apply to Selected Object</button><div class="material-map-row"><div class="map-preview"><img src="" class="map-image" id="normalMapPreview"><span class="map-label">Normal Map</span></div><div class="map-preview"><img src="" class="map-image" id="roughnessMapPreview"><span class="map-label">Roughness Map</span></div></div></div></div><div class="main-container"><div class="tools-panel"><div class="tools-group"><div class="tools-group-label">Create</div><div class="tool-btn" id="cubeTool" title="Place a cube"><svg width="400" height="400" viewBox="0 0 400 400"><g stroke="black" stroke-width="8" fill="none" transform="translate(105,145)"><polygon points="0,0 150,0 150,150 0,150"/><polygon points="40,-40 190,-40 190,110 40,110"/><line x1="0" y1="0" x2="40" y2="-40"/><line x1="150" y1="0" x2="190" y2="-40"/><line x1="150" y1="150" x2="190" y2="110"/><line x1="0" y1="150" x2="40" y2="110"/></g></svg></div><div class="tool-btn" id="sphereTool" title="Place a sphere"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8"></circle></svg></div><div class="tool-btn" id="cylinderTool" title="Place a cylinder"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="7" rx="8" ry="3"></ellipse><path d="M4 7v10c0 1.657 3.582 3 8 3s8-1.343 8-3V7"></path></svg></div><div class="tool-btn" id="coneTool" title="Place a cone"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 4l-8 16h16l-8-16z"></path></svg></div><div class="tool-btn" id="torusTool" title="Place a torus"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="8"></circle><circle cx="12" cy="12" r="4"></circle></svg></div><div class="tool-btn" id="planeTool" title="Place a floor"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2"></path></svg></div><div class="tool-btn" id="lightTool" title="Place a light"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"></circle><path d="M12 4v2"></path><path d="M12 18v2"></path><path d="M4 12h2"></path><path d="M18 12h2"></path><path d="M19 19l-1.4-1.4"></path><path d="M5 5l1.4 1.4"></path><path d="M19 5l-1.4 1.4"></path><path d="M5 19l1.4-1.4"></path></svg></div></div><div class="tools-group"><div class="tools-group-label" title="Select an object">View</div><div class="tool-btn" id="selectTool"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3l7 19 2-9 9-2z"></path></svg></div><div class="tool-btn" id="panTool" title="Pan the camera"><svg fill="none" stroke="currentColor" stroke-width="2" width="20" height="20" viewBox="0 0 24 24"><path stroke="none" d=""/><polyline points="5 9 2 12 5 15"/><polyline points="9 5 12 2 15 5"/><polyline points="19 9 22 12 19 15"/><polyline points="15 19 12 22 9 19"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="12" y1="2" x2="12" y2="22"/></svg></div><div class="tool-btn" id="rotateTool" title="Rotate the camera"><svg viewBox="0 0 24 24" width="21.6" height="21.6"><circle cx="12" cy="12" r="10" stroke="#333" stroke-width="2" fill="none"></circle><path d="M6,12 A6,6 0 0,1 18,12" stroke="#333" stroke-width="2" fill="none"></path></svg></div><div class="tool-btn" id="zoomInTool" title="Zooming in"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="11" y1="8" x2="11" y2="14"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg></div><div class="tool-btn" id="zoomOutTool" title="Zooming out"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line><line x1="8" y1="11" x2="14" y2="11"></line></svg></div></div><div class="tools-group"><div class="tools-group-label">Edit</div><div class="tool-btn" id="deleteTool" title="Delete an object"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6H5H21M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7 5.58579 21.4142C5.21071 21.0391 5 20.4 5 20V6M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.6 2.2 9.97 2 10 2H14C14.5304 2 15.0391 2.1 15.2 2.58579C15.73 2.96086 16 3.46957 16 7"></path></svg></div><div class="tool-btn" id="duplicateTool" title="Duplicate an object"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4C2.43 15 2 14.1046 2 13V4C2 2.3 2.8 2 4 2H13C14.1046 2 15 2.4 15 4V5"></path></svg></div></div></div><div class="workspace"><div id="canvas-container"></div><div class="view-controls"><div class="view-btn" id="topView">T</div><div class="view-btn" id="frontView">F</div><div class="view-btn" id="sideView">S</div><div class="view-btn" id="perspectiveView">P</div><div class="view-btn" id="undoBtn">↩</div><div class="view-btn" id="redoBtn">↪</div></div><div class="transform-controls"><div class="transform-btn active" id="transformTranslate"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 9l4-4 4 4"></path><path d="M9 5v14"></path><path d="M15 9l4 4-4 4"></path></svg></div><div class="transform-btn" id="transformRotate"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 12c0 4.418-3.582 8-8 8s-8-3.582-8-8M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12"></path><path d="M18 4v4h-4"></path><path d="M14 8l4-4"></path></svg></div><div class="transform-btn" id="transformScale"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 3L3 21"></path><path d="M21 13V3h-10"></path><path d="M13 21H3V11"></path></svg></div></div><div class="render-stats" id="stats-container"></div></div><div class="properties-panel"><div class="panel-section"><div class="panel-section-title"><span>
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+  <polyline points="16 3 21 3 21 8"></polyline>
+  <line x1="21" y1="3" x2="14" y2="10"></line>
+  <polyline points="8 21 3 21 3 16"></polyline>
+  <line x1="3" y1="21" x2="10" y2="14"></line>
+</svg> Transform</span><span class="toggle-icon">▼</span></div><div class="panel-content"><div class="coordinate-input-group"><div class="coordinate-input"><span class="coordinate-label x">X</span><input type="number" id="posX" value="0" step="0.1"></div><div class="coordinate-input"><span class="coordinate-label y">Y</span><input type="number" id="posY" value="0" step="0.1"></div><div class="coordinate-input"><span class="coordinate-label z">Z</span><input type="number" id="posZ" value="0" step="0.1"></div></div><div class="panel-section-title"><span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M21 12a9 9 0 11-3-6.7" />
+  <polyline points="21 3 21 9 15 9" />
+</svg> Rotation</span></div><div class="coordinate-input-group"><div class="coordinate-input"><span class="coordinate-label x">X</span><input type="number" id="rotX" value="0" step="5"></div><div class="coordinate-input"><span class="coordinate-label y">Y</span><input type="number" id="rotY" value="0" step="5"></div><div class="coordinate-input"><span class="coordinate-label z">Z</span><input type="number" id="rotZ" value="0" step="5"></div></div><div class="panel-section-title"><span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 3 21 3 21 8" /><line x1="14" y1="10" x2="21" y2="3" /><line x1=/><rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" fill="none" /><rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" fill="none" /></svg> Scale</span></div><div class="coordinate-input-group"><div class="coordinate-input"><span class="coordinate-label x">X</span><input type="number" id="scaleX" value="1" min="0.1" step="0.1"></div><div class="coordinate-input"><span class="coordinate-label y">Y</span><input type="number" id="scaleY" value="1" min="0.1" step="0.1"></div><div class="coordinate-input"><span class="coordinate-label z">Z</span><input type="number" id="scaleZ" value="1" min="0.1" step="0.1"></div></div></div></div><div class="panel-section"><div class="panel-section-title"><span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+  <path d="M3 9h18M3 15h18M9 3v18M15 3v18"></path>
+</svg> Material</span><span class="toggle-icon">▼</span></div><div class="panel-content"><div class="property-row"><label class="property-label">Type</label><select class="property-select" id="materialType"><option value="basic">Basic</option><option value="phong">Phong</option><option value="standard" selected>Standard</option><option value="toon">Toon</option><option value="physical">Physical</option></select></div><div class="property-row"><label class="property-label">Color</label><div class="color-picker"><div class="color-preview" id="colorPreview" style="background-color:#5D5CDE"></div><input type="color" class="color-input" id="colorInput" value="#5D5CDE"></div></div><div class="property-row"><label class="property-label">Metalness</label><input type="range" class="property-input" id="metalnessInput" min="0" max="1" step="0.01" value="0"><span id="metalnessValue">0</span></div><div class="property-row"><label class="property-label">Roughness</label><input type="range" class="property-input" id="roughnessInput" min="0" max="1" step="0.01" value="0.5"><span id="roughnessValue">0.5</span></div><div class="property-row"><label class="property-label">Transparent</label><input type="checkbox" id="transparentInput"><label class="property-label" style="display:inline-block;margin-left:10px">Opacity</label><input type="range" class="property-input" id="opacityInput" min="0" max="1" step="0.01" value="1" disabled><span id="opacityValue">1.0</span></div><div class="checkbox-row"><label class="checkbox-item">Wireframe</label><input type="checkbox" id="wireframeInput"></div><div class="checkbox-row"><label class="checkbox-item">Texture Maps</label><button class="menu-button" id="textureMenuBtn" style="padding:4px 8px;margin-top:5px">Manage Textures</button></div></div></div><div class="panel-section"><div class="panel-section-title"><span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"></path>
+              <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
+              <line x1="12" y1="22.08" x2="12" y2="12"></line>
+            </svg> Objects</span><span class="toggle-icon">▼</span></div><div class="panel-content"><div class="objects-container" id="objectsList"></div></div></div><div class="panel-section"><div class="panel-section-title"><span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="12" x2="20" y2="12"></line><line x1="12" y1="12" x2="12" y2="4"></line><line x1="12" y1="12" x2="6" y2="18"></line><circle cx="20" cy="12" r="1"></circle><circle cx="12" cy="4" r="1"></circle><circle cx="6" cy="18" r="1"></circle><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><path d="M3 9h18M3 15h18M9 3v18M15 3v"></path></svg><circle cx="12" cy="12" r="1.5"></circle></svg> Scene</span><span class="toggle-icon">▼</span></div><div class="panel-content"><div class="property-row"><label class="property-label">Background Color</label><div class="color-picker"><div class="color-preview" id="bgColorPreview" style="background-color:#222"></div><input type="color" class="color-input" id="bgColorInput" value="#222"></div></div><div class="property-row"><label class="property-label">Background Image</label><div class="file-input-wrapper" style="display:block;margin-top:8px"><input type="file" id="bgImageInput" class="file-input" accept="image/*"><button class="menu-button" style="padding:4px 8px">Upload Texture</button></div><button class="menu-button" id="clearBgImageBtn" style="padding:4px 8px;margin-top:5px;display:none">Clear Image</button></div><div class="checkbox-row"><div class="checkbox-item"><label class="property-label">Grid</label><input type="checkbox" id="gridToggle" checked></div><div class="checkbox-item"><label class="property-label">Axes</label><input type="checkbox" id="axesToggle" checked></div><div class="checkbox-item"><label class="property-label">Shadows</label><input type="checkbox" id="shadowsToggle" checked></div></div></div></div></div></div><div class="status-bar"><div class="status-info" id="statusInfo">Ready</div><div class="coordinate-info"><div class="coordinate-x" id="statusX">X: 0.00</div><div class="coordinate-y" id="statusY">Y: 0.00</div><div class="coordinate-z" id="statusZ">Z: 0.00</div></div><div class="status-position"> Created with 💜 by <a href="https://poe.com/Roboohood" style="text-decoration: underline; color: #1DA1F2;">RobooHood</a></div><div class="status-position" id="fps">FPS: 60</div></div><div class="toast-notification" id="toastNotification"></div><div class="ai-control-panel" id="aiControlPanel"><div class="ai-panel-header"><div class="ai-panel-title"><span>🤖</span> Modeling Assistant</div><button class="menu-button" onclick="toggleAIPanel()">Close</button></div><div class="panel-section"><div class="panel-section-title">Modeling Assistance</div><div class="ai-actions"><button class="ai-action-btn" onclick="askAI('Help me design a furniture model')">Furniture</button><button class="ai-action-btn" onclick="askAI('Help me design an architectural model')">Architecture</button><button class="ai-action-btn" onclick="askAI('Suggest improvements for my 3D model')">Improve Model</button><button class="ai-action-btn" onclick="askAI('Create a color palette for my 3D model')">Color Palette</button></div></div><div class="chat-log" id="chatLog"></div><div class="loading-indicator" id="loadingIndicator">Generating ideas<span class="loading-dot"></span><span class="loading-dot"></span><span class="loading-dot"></span></div><div class="chat-input-area"><input type="text" id="chatInput"><button onclick="sendChatMessage()" id="sendButton"> Send </button></div></div><div class="modal" id="importModal"><div class="modal-content"><div class="modal-header"><div class="modal-title">Import 3D Model</div><button class="modal-close" id="closeImportModal">×</button></div><div class="dropzone" id="fileDropzone"><div class="dropzone-text">Click to select</div><div class="file-input-wrapper"><input type="file" id="fileInput" class="file-input" accept=".obj,.glb,.gltf,.stl"></div></div><div style="margin-top:15px;border-top:1px solid var(--border-color);padding-top:15px"><div class="property-row"><label class="property-label">Or import JSON text:</label><textarea id="jsonImportText" class="property-input" placeholder="Paste here your json code..." style="min-height:100px;font-family:monospace;margin-top:5px"></textarea></div></div><div class="import-options"><div class="property-row"><label class="property-label">Import Position</label><select class="property-select" id="importPosition"><option value="center">Center (0,0,0)</option><option value="ground">On Ground (y=0)</option><option value="origin">Origin + Offset</option></select></div><div class="property-row"><label class="property-label">Import Scale</label><select class="property-select" id="importScale"><option value="original">Original</option><option value="fit">Fit to Scene (Max 10 units)</option><option value="custom">Custom</option></select></div><div class="property-row" id="customScaleRow" style="display:none"><label class="property-label">Custom Scale Factor</label><input type="number" class="property-input" id="customScaleInput" value="1" min="0.01" step="0.1"></div></div><div class="modal-footer"><button class="modal-button modal-button-secondary" id="cancelImportBtn">Cancel</button><button class="modal-button modal-button-primary" id="confirmImportBtn">Import</button></div></div></div><div class="modal" id="textureModal"><div class="modal-content"><div class="modal-header"><div class="modal-title">Texture Manager</div><button class="modal-close" id="closeTextureModal">×</button></div><div style="padding:15px"><div class="property-row"><label class="property-label">Diffuse (Color) Map</label><div class="file-input-wrapper" style="display:block;margin-top:8px"><button class="menu-button" id="diffuseAiBtn" style="padding:4px 8px;margin-right:8px">Upload JPG</button><input type="file" id="diffuseMapInput" class="file-input" accept="image/*"><button class="menu-button" style="padding:4px 8px">Upload PNG</button></div><img id="diffuseMapPreview" style="max-width:100%;max-height:100px;margin-top:8px;border:1px solid var(--border-color);display:none"></div><div class="property-row"><label class="property-label">Normal Map</label><div class="file-input-wrapper" style="display:block;margin-top:8px"><button class="menu-button" id="normalAiBtn" style="padding:4px 8px;margin-right:8px">Upload JPG</button><input type="file" id="normalMapInput" class="file-input" accept="image/*"><button class="menu-button" style="padding:4px 8px">Upload PNG</button></div><img id="normalMapModalPreview" style="max-width:100%;max-height:100px;margin-top:8px;border:1px solid var(--border-color);display:none"></div><div class="property-row"><label class="property-label">Roughness Map</label><div class="file-input-wrapper" style="display:block;margin-top:8px"><button class="menu-button" id="roughnessAiBtn" style="padding:4px 8px;margin-right:8px">Upload JPG</button><input type="file" id="roughnessMapInput" class="file-input" accept="image/*"><button class="menu-button" style="padding:4px 8px">Upload PNG</button></div><img id="roughnessMapModalPreview" style="max-width:100%;max-height:100px;margin-top:8px;border:1px solid var(--border-color);display:none"></div></div><div class="modal-footer"><button class="modal-button modal-button-secondary" id="clearTexturesBtn">Clear All</button><button class="modal-button modal-button-primary" id="applyTexturesBtn">Apply</button></div></div></div><div class="modal" id="exportModal"><div class="modal-content"><div class="modal-header"><div class="modal-title">Export 3D Model</div><button class="modal-close" id="closeExportModal">×</button></div><div class="export-option" data-format="obj"><div class="export-option-icon"> OBJ </div><div class="export-option-details"><div class="export-name">OBJ (PRO feature)</div><div class="export-description">Common 3D format for geometry, widely compatible with most 3D software.</div></div></div><div class="export-option" data-format="json"><div class="export-option-icon"> JSON </div><div class="export-option-details"><div class="export-name">JSON</div><div class="export-description">Text-based format that can be easily imported back into this application.</div></div></div><div class="modal-footer"><button class="modal-button modal-button-secondary" id="cancelExportBtn">Cancel</button><button class="modal-button modal-button-primary" id="confirmExportBtn">Export</button></div></div></div><div class="modal" id="proFeatureModal"><div class="modal-content" style="max-width:350px"><div class="modal-header"><div class="modal-title">Premium Feature</div><button class="modal-close" id="closeProFeatureModal">×</button></div><div style="padding:10px 0 20px"><p>This advanced modeling feature is only available for PRO subscribers.</p><p style="margin-top:10px">Please complete a subscription tier in your account to access all professional 3D modeling capabilities.</p></div><div class="modal-footer"><button class="modal-button modal-button-secondary" id="cancelProFeatureBtn">Maybe Later</button><button class="modal-button modal-button-primary" id="upgradeProFeatureBtn"> Upgrade</button></div></div></div><div id="tooltip" class="tooltip"></div><div class="modal" id="lightModal"><div class="modal-content"><div class="modal-header"><div class="modal-title">Add Light Source</div><button class="modal-close" id="closeLightModal">×</button></div><div style="padding:15px"><div class="property-row"><label class="property-label">Light Type</label><select class="property-select" id="lightTypeSelect"><option value="point">Point Light</option><option value="directional">Directional Light</option><option value="spot">Spot Light</option><option value="ambient">Ambient Light</option></select></div><div class="property-row"><label class="property-label">Light Color</label><div class="color-picker"><div class="color-preview" id="lightColorPreview"></div><input type="color" class="color-input" id="lightColorInput" value="#ffffff"></div></div><div class="property-row"><label class="property-label">Intensity</label><input type="range" class="property-input" id="lightIntensityInput" min="0" max="3" step="0.1" value="1"><span id="lightIntensityValue">1.0</span></div><div class="property-row" id="lightDistanceRow"><label class="property-label">Distance</label><input type="number" class="property-input" id="lightDistanceInput" min="0" value="0" step="1"></div><div class="property-row" id="lightAngleRow"><label class="property-label">Angle (degrees)</label><input type="number" class="property-input" id="lightAngleInput" min="0" max="90" value="45" step="5"></div><div class="property-row"><label class="property-label">Cast Shadow</label><input type="checkbox" id="lightShadowInput" checked></div></div><div class="modal-footer"><button class="modal-button modal-button-secondary" id="cancelLightBtn">Cancel</button><button class="modal-button modal-button-primary" id="addLightBtn">Add Light</button></div></div></div><div class="confirm-modal" id="templateConfirmModal"><div class="confirm-content"><div class="confirm-message"> The current environment will be lost and replaced with the template. Do you want to continue? </div><div class="confirm-buttons"><button class="modal-button modal-button-secondary" id="cancelTemplateBtn">Cancel</button><button class="modal-button modal-button-primary" id="confirmTemplateBtn">Yes</button></div></div></div><script>(function() {
+        const config = { attributes: true, childList: true, subtree: true };
+        document.addEventListener('contextmenu', function(e) {
+            e.preventDefault();
+            return false;
+        }, { passive: false });
+        document.addEventListener('keydown', function(e) {
+            if (
+                e.keyCode === 123 || 
+                (e.ctrlKey && e.shiftKey && (e.keyCode === 73 || e.keyCode === 74)) ||
+                (e.ctrlKey && e.keyCode === 85)
+            ) {
+                e.preventDefault();
+                return false;
+            }
+        }, { passive: false });
+        let devToolsOpen = false;
+        const threshold = 160;
+        
+        function checkDevTools() {
+            const widthThreshold = window.outerWidth - window.innerWidth > threshold;
+            const heightThreshold = window.outerHeight - window.innerHeight > threshold;
+            
+            const newDevToolsOpen = widthThreshold || heightThreshold;
+            
+            if (newDevToolsOpen !== devToolsOpen) {
+                devToolsOpen = newDevToolsOpen;
+                if (devToolsOpen) {
+                    obfuscateCode();
+                }
+            }
+            
+            setTimeout(checkDevTools, 1000);
+        }
+        
+        function obfuscateCode() {
+            for (let i = 0; i < 1000; i++) {
+                const dummy = document.createElement('div');
+                dummy.style.display = 'none';
+                dummy.setAttribute('id', 'dummy-' + Math.random().toString(36).substr(2, 9));
+                document.body.appendChild(dummy);
+            }
+            
+            console.clear();
+            console.warn("%cError 808!", "color:red;font-size:50px;font-weight:bold;");
+            console.warn("%cFailed to fetch 808.", "font-size:20px;");
+            showToast("There was an error. Failed to fetch 808. Please contact the developer: droid@public-files.de", 4000);
+            
+        }
+        checkDevTools();
+    })();
+
+    let scene, camera, renderer, controls, transformControls, stats, grid, axes, raycaster, mouse; 
+    let selectedObjects = [];
+    let isHandlerRegistered = false, currentTool = 'select', currentTransformMode = 'translate';
+    let currentProject = 'Untitled Model', materialColor = '#5D5CDE', backgroundColor = '#222';
+    let materialType = 'standard', metalness = 0, roughness = .5, isTransparent = false;
+    let opacity = 1, isWireframe = false, selectedExportFormat = 'gltf';
+    let textureUrls = { diffuse: null, normal: null, roughness: null };
+    let handlerId = `ai_assistant_${Date.now()}`, modelHandlerId = `model_creator_${Date.now()}`;
+    let textureHandlerId = `texture_creator_${Date.now()}`;
+    let importSettings = { position: 'center', scale: 'original', customScale: 1 };
+    let objLoader = null, stlLoader = null, gltfLoader = null, mtlLoader = null;
+    let objExporter = null, stlExporter = null, gltfExporter = null;
+    let isCopyingObject = false, objectToCopy = null;
+    let isPanning = false, isOrbiting = false, isZooming = false;
+    let lockedObjects = new Set();
+    let objects = [];
+    let historyStates = [];
+    let currentHistoryIndex = -1;
+    let selectedTemplate = null;
+    let bgTexture = null; const MAX_HISTORY_STATES = 10;
+
+    function initLoaders() {
+        objLoader = new THREE.OBJLoader();
+        stlLoader = new THREE.STLLoader();
+        gltfLoader = new THREE.GLTFLoader();
+        mtlLoader = new THREE.MTLLoader();
+        objExporter = new THREE.OBJExporter();
+        stlExporter = new THREE.STLExporter();
+        gltfExporter = new THREE.GLTFExporter();
+    }
+
+    function initScene() {
+        scene = new THREE.Scene();
+        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        camera.position.set(5, 5, 5);
+        camera.lookAt(0, 0, 0);
+        renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.shadowMap.enabled = true;
+        renderer.setClearColor(backgroundColor);
+        const canvasContainer = document.getElementById('canvas-container');
+        canvasContainer.appendChild(renderer.domElement);
+        controls = new THREE.OrbitControls(camera, renderer.domElement);
+        controls.dampingFactor = 0.05;
+        controls.enableDamping = true;
+        transformControls = new THREE.TransformControls(camera, renderer.domElement);
+        transformControls.addEventListener('dragging-changed', function(event) {
+            controls.enabled = !event.value;
+            if (!event.value && selectedObjects.length > 0) {
+                saveHistoryState();
+                updatePropertiesPanelForSelection();
+            }
+        });
+        transformControls.addEventListener('objectChange', function() {
+            if (selectedObjects.length > 0) updatePropertiesPanelForSelection();
+        });
+        scene.add(transformControls);
+        raycaster = new THREE.Raycaster();
+        mouse = new THREE.Vector2();
+        addLights();
+        addGridAndAxes();
+        stats = new Stats();
+        document.getElementById('stats-container').appendChild(stats.dom);
+        window.addEventListener('resize', onWindowResize);
+        renderer.domElement.addEventListener('pointerdown', onMouseDown);
+        renderer.domElement.addEventListener('pointermove', onMouseMove);
+        renderer.domElement.addEventListener('wheel', onMouseWheel);
+        renderer.domElement.addEventListener('pointermove', onMouseDrag);
+        animate();
+        showToast("Welcome to 3D-Model-Studio! Select a tool to begin modeling.", 4000);
+        saveHistoryState();
+    }
+
+    function addLights() {
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
+        scene.add(ambientLight);
+        ambientLight.name = "Ambient Light";
+        objects.push(ambientLight); // Add to our object list
+
+        // Reduced intensity for main directional light
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // Original was 0.8
+        directionalLight.position.set(5, 10, 7.5);
+        directionalLight.castShadow = true;
+        directionalLight.shadow.mapSize.width = 2048;
+        directionalLight.shadow.mapSize.height = 2048;
+        directionalLight.shadow.camera.left = -10;
+        directionalLight.shadow.camera.right = 10;
+        directionalLight.shadow.camera.top = 10;
+        directionalLight.shadow.camera.bottom = -10;
+        directionalLight.shadow.camera.far = 50;
+        scene.add(directionalLight);
+        directionalLight.name = "Directional Light";
+        objects.push(directionalLight); // Add to our object list
+
+        // Keep the back light subtle
+        const backLight = new THREE.DirectionalLight(0xffffff, 0.2); // Original was 0.3
+        backLight.position.set(-5, 5, -5);
+        // backLight generally doesn't need to cast shadows unless desired
+        scene.add(backLight);
+        backLight.name = "Back Light";
+        objects.push(backLight); // Add to our object list
+        updateObjectsList();
+    }
+
+    function addGridAndAxes() {
+        grid = new THREE.GridHelper(20, 20, 0x888888, 0x444444);
+        scene.add(grid);
+        axes = new THREE.AxesHelper(5);
+        scene.add(axes);
+    }
+
+    function onWindowResize() {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+
+    function animate() {
+        requestAnimationFrame(animate);
+        controls.update();
+        renderer.render(scene, camera);
+        stats.update();
+        document.getElementById('fps').textContent = `FPS: ${Math.round(stats.fps)}`;
+    }
+
+    function onMouseWheel(event) {
+        if (currentTool === 'zoom' || currentTool === 'zoomIn' || currentTool === 'zoomOut' || isZooming) {
+            event.preventDefault();
+            const direction = currentTool === 'zoomOut' ? -1 : (currentTool === 'zoomIn' ? 1 : -Math.sign(event.deltaY));
+            const speed = 0.1;
+            camera.position.addScaledVector(camera.getWorldDirection(new THREE.Vector3()), direction * speed * 5);
+            return false;
+        }
+    }
+
+    function onMouseDrag(event) {
+        if (!isPanning && !isOrbiting) return;
+        if (isPanning) {
+            const movementX = event.movementX || 0;
+            const movementY = event.movementY || 0;
+            const panSpeed = 0.01;
+            const panVector = new THREE.Vector3();
+            const right = new THREE.Vector3();
+            camera.getWorldDirection(right).cross(camera.up).normalize().multiplyScalar(-movementX * panSpeed);
+            panVector.copy(camera.up).multiplyScalar(movementY * panSpeed);
+            camera.position.add(right).add(panVector);
+            controls.target.add(right).add(panVector);
+        }
+    }
+
+    function onMouseDown(event) {
+        if (transformControls.dragging) return;
+        updateMousePosition(event);
+        if (currentTool === 'pan') {
+            isPanning = true;
+            controls.enablePan = true;
+            controls.enableRotate = false;
+            controls.enableZoom = false;
+            document.querySelector('.workspace').style.cursor = 'grabbing';
+            return;
+        }
+        if (currentTool === 'rotate') {
+            isOrbiting = true;
+            controls.enableRotate = true;
+            controls.enablePan = false;
+            controls.enableZoom = false;
+            document.querySelector('.workspace').style.cursor = 'grabbing';
+            return;
+        }
+        if (currentTool === 'zoomIn') {
+            zoomCamera(1);
+            document.querySelector('.workspace').style.cursor = 'zoom-in';
+            return;
+        }
+        if (currentTool === 'zoomOut') {
+            zoomCamera(-1);
+            document.querySelector('.workspace').style.cursor = 'zoom-out';
+            return;
+        }
+        switch (currentTool) {
+            case 'select':
+                selectObject(event);
+                break;
+            case 'cube':
+                createCube();
+                saveHistoryState();
+                break;
+            case 'sphere':
+                createSphere();
+                saveHistoryState();
+                break;
+            case 'cylinder':
+                createCylinder();
+                saveHistoryState();
+                break;
+            case 'cone':
+                createCone();
+                saveHistoryState();
+                break;
+            case 'torus':
+                createTorus();
+                saveHistoryState();
+                break;
+            case 'plane':
+                createPlane();
+                saveHistoryState();
+                break;
+            case 'light':
+                showLightModal();
+                break;
+            case 'delete':
+                deleteSelected();
+                saveHistoryState();
+                break;
+            case 'duplicate':
+                duplicateSelected();
+                break;
+            case 'extrude':
+            case 'bevel':
+            case 'subdiv':
+                showProFeatureModal(currentTool);
+        }
+    }
+
+    function zoomCamera(amount) {
+        const zoomSpeed = 0.5;
+        const direction = new THREE.Vector3();
+        camera.getWorldDirection(direction);
+        camera.position.addScaledVector(direction, amount * zoomSpeed);
+    }
+
+    function onMouseMove(event) {
+        updateMousePosition(event);
+        const position = getMouseWorldPosition();
+        if (position) {
+            document.getElementById('statusX').textContent = `X: ${position.x.toFixed(2)}`;
+            document.getElementById('statusY').textContent = `Y: ${position.y.toFixed(2)}`;
+            document.getElementById('statusZ').textContent = `Z: ${position.z.toFixed(2)}`;
+        }
+    }
+
+    function updateMousePosition(event) {
+        const rect = renderer.domElement.getBoundingClientRect();
+        mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+        mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+    }
+
+    function getMouseWorldPosition() {
+        raycaster.setFromCamera(mouse, camera);
+        const cameraDirection = new THREE.Vector3();
+        camera.getWorldDirection(cameraDirection);
+        const cameraNormalPlane = new THREE.Plane(cameraDirection.clone().negate());
+        
+        const intersects = raycaster.intersectObjects(objects, false);
+        if (intersects.length > 0) {
+            return intersects[0].point;
+        }
+        const planeIntersection = new THREE.Vector3();
+        raycaster.ray.intersectPlane(cameraNormalPlane, planeIntersection);
+        if (planeIntersection) {
+            return planeIntersection;
+        }
+        
+        const planeY = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+        const point = new THREE.Vector3();
+        raycaster.ray.intersectPlane(planeY, point);
+        return point;
+    }
+
+    function selectObject(event) {
+        raycaster.setFromCamera(mouse, camera);
+        const intersects = raycaster.intersectObjects(objects, false);
+        const isShiftPressed = event.shiftKey;
+        
+        if (intersects.length > 0) {
+            const object = intersects[0].object;
+            if (lockedObjects.has(object.uuid)) {
+                showToast("This object is locked. Unlock it to edit.");
+                return;
+            }
+            
+            if (isShiftPressed) {
+                if (selectedObjects.includes(object)) {
+                    const index = selectedObjects.indexOf(object);
+                    selectedObjects.splice(index, 1);
+                    if (selectedObjects.length === 0) {
+                        transformControls.detach();
+                    } else {
+                        transformControls.attach(selectedObjects[0]);
+                    }
+                } else {
+                    selectedObjects.push(object);
+                    transformControls.attach(selectedObjects[0]);
+                }
+            } else {
+                deselectAll();
+                selectedObjects.push(object);
+                transformControls.attach(object);
+            }
+            
+            updateObjectsList();
+            updatePropertiesPanelForSelection();
+            
+            if (selectedObjects.length === 1) {
+                document.getElementById('statusInfo').textContent = `Selected: ${selectedObjects[0].name || 'Object'}`;
+            } else if (selectedObjects.length > 1) {
+                document.getElementById('statusInfo').textContent = `Selected: ${selectedObjects.length} objects`;
+            }
+        } else if (!isShiftPressed) {
+            deselectAll();
+        }
+    }
+
+    function deselectAll() {
+        transformControls.detach();
+        selectedObjects = [];
+        updateObjectsList();
+        resetPropertiesPanel();
+        document.getElementById('statusInfo').textContent = 'Ready';
+    }
+
+    function createMaterial() {
+        let material;
+        switch (materialType) {
+            case 'basic':
+                material = new THREE.MeshBasicMaterial({ color: new THREE.Color(materialColor) });
+                break;
+            case 'phong':
+                material = new THREE.MeshPhongMaterial({ color: new THREE.Color(materialColor), shininess: 30 });
+                break;
+            case 'toon':
+                material = new THREE.MeshToonMaterial({ color: new THREE.Color(materialColor) });
+                break;
+            case 'physical':
+                material = new THREE.MeshPhysicalMaterial({ color: new THREE.Color(materialColor), metalness: metalness, roughness: roughness, clearcoat: 0.3, clearcoatRoughness: 0.25 });
+                break;
+            case 'standard':
+            default:
+                material = new THREE.MeshStandardMaterial({ color: new THREE.Color(materialColor), metalness: metalness, roughness: roughness });
+        }
+        material.wireframe = isWireframe;
+        material.transparent = isTransparent;
+        material.opacity = opacity;
+        return material;
+    }
+
+    function createCube() {
+        const material = createMaterial();
+        const geometry = new THREE.BoxGeometry(1, 1, 1);
+        const cube = new THREE.Mesh(geometry, material);
+        const position = getMouseWorldPosition();
+        if (position) {
+            cube.position.set(position.x, 0.5, position.z);
+        } else {
+            cube.position.set(0, 0.5, 0);
+        }
+        cube.castShadow = true;
+        cube.receiveShadow = true;
+        cube.name = `Cube ${objects.length + 1}`;
+        scene.add(cube);
+        objects.push(cube);
+        
+        deselectAll();
+        selectedObjects.push(cube);
+        transformControls.attach(cube);
+        
+        updateObjectsList();
+        document.getElementById('statusInfo').textContent = `Created: ${cube.name}`;
+        setActiveTool('select');
+    }
+
+    function createSphere() {
+        const material = createMaterial();
+        const geometry = new THREE.SphereGeometry(0.5, 32, 32);
+        const sphere = new THREE.Mesh(geometry, material);
+        const position = getMouseWorldPosition();
+        if (position) {
+            sphere.position.set(position.x, 0.5, position.z);
+        } else {
+            sphere.position.set(0, 0.5, 0);
+        }
+        sphere.castShadow = true;
+        sphere.receiveShadow = true;
+        sphere.name = `Sphere ${objects.length + 1}`;
+        scene.add(sphere);
+        objects.push(sphere);
+        
+        deselectAll();
+        selectedObjects.push(sphere);
+        transformControls.attach(sphere);
+        
+        updateObjectsList();
+        document.getElementById('statusInfo').textContent = `Created: ${sphere.name}`;
+        setActiveTool('select');
+    }
+
+    function createCylinder() {
+        const material = createMaterial();
+        const geometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);
+        const cylinder = new THREE.Mesh(geometry, material);
+        const position = getMouseWorldPosition();
+        if (position) {
+            cylinder.position.set(position.x, 0.5, position.z);
+        } else {
+            cylinder.position.set(0, 0.5, 0);
+        }
+        cylinder.castShadow = true;
+        cylinder.receiveShadow = true;
+        cylinder.name = `Cylinder ${objects.length + 1}`;
+        scene.add(cylinder);
+        objects.push(cylinder);
+        
+        deselectAll();
+        selectedObjects.push(cylinder);
+        transformControls.attach(cylinder);
+        
+        updateObjectsList();
+        document.getElementById('statusInfo').textContent = `Created: ${cylinder.name}`;
+        setActiveTool('select');
+    }
+
+    function createCone() {
+        const material = createMaterial();
+        const geometry = new THREE.ConeGeometry(0.5, 1, 32);
+        const cone = new THREE.Mesh(geometry, material);
+        const position = getMouseWorldPosition();
+        if (position) {
+            cone.position.set(position.x, 0.5, position.z);
+        } else {
+            cone.position.set(0, 0.5, 0);
+        }
+        cone.castShadow = true;
+        cone.receiveShadow = true;
+        cone.name = `Cone ${objects.length + 1}`;
+        scene.add(cone);
+        objects.push(cone);
+        
+        deselectAll();
+        selectedObjects.push(cone);
+        transformControls.attach(cone);
+        
+        updateObjectsList();
+        document.getElementById('statusInfo').textContent = `Created: ${cone.name}`;
+        setActiveTool('select');
+    }
+
+    function createTorus() {
+        const material = createMaterial();
+        const geometry = new THREE.TorusGeometry(0.5, 0.2, 16, 50);
+        const torus = new THREE.Mesh(geometry, material);
+        const position = getMouseWorldPosition();
+        if (position) {
+            torus.position.set(position.x, 0.5, position.z);
+        } else {
+            torus.position.set(0, 0.5, 0);
+        }
+        torus.rotation.x = Math.PI / 2;
+        torus.castShadow = true;
+        torus.receiveShadow = true;
+        torus.name = `Torus ${objects.length + 1}`;
+        scene.add(torus);
+        objects.push(torus);
+        
+        deselectAll();
+        selectedObjects.push(torus);
+        transformControls.attach(torus);
+        
+        updateObjectsList();
+        document.getElementById('statusInfo').textContent = `Created: ${torus.name}`;
+        setActiveTool('select');
+    }
+
+    function createPlane() {
+        const material = createMaterial();
+        const geometry = new THREE.PlaneGeometry(100, 100);
+        const plane = new THREE.Mesh(geometry, material);
+        const position = getMouseWorldPosition();
+        if (position) {
+            plane.position.set(position.x, -0.02, position.z);
+        } else {
+            plane.position.set(0, -0.02, 0);
+        }
+        plane.rotation.x = -Math.PI / 2;
+        plane.receiveShadow = true;
+        plane.name = `Plate ${objects.length + 1}`;
+        scene.add(plane);
+        objects.push(plane);
+        
+        deselectAll();
+        selectedObjects.push(plane);
+        transformControls.attach(plane);
+        
+        updateObjectsList();
+        document.getElementById('statusInfo').textContent = `Created: ${plane.name}`;
+        setActiveTool('select');
+    }
+
+    function showLightModal() {
+        document.getElementById('lightModal').style.display = 'flex';
+        document.getElementById('lightTypeSelect').addEventListener('change', updateLightModalFields);
+        document.getElementById('lightColorInput').addEventListener('change', function() {
+            document.getElementById('lightColorPreview').style.backgroundColor = this.value;
+        });
+        document.getElementById('lightIntensityInput').addEventListener('input', function() {
+            document.getElementById('lightIntensityValue').textContent = parseFloat(this.value).toFixed(1);
+        });
+        updateLightModalFields();
+        document.getElementById('closeLightModal').addEventListener('click', function() {
+            document.getElementById('lightModal').style.display = 'none';
+        });
+        document.getElementById('cancelLightBtn').addEventListener('click', function() {
+            document.getElementById('lightModal').style.display = 'none';
+        });
+        document.getElementById('addLightBtn').addEventListener('click', createLight);
+    }
+
+    function updateLightModalFields() {
+        const lightType = document.getElementById('lightTypeSelect').value;
+        document.getElementById('lightDistanceRow').style.display = lightType === 'ambient' ? 'none' : 'block';
+        document.getElementById('lightAngleRow').style.display = lightType === 'spot' ? 'block' : 'none';
+        document.getElementById('lightShadowInput').disabled = lightType === 'ambient';
+        if (lightType === 'ambient') {
+            document.getElementById('lightShadowInput').checked = false;
+        }
+    }
+
+    // 2. Function to create a light source from the modal
+    function createLight() {
+        const lightType = document.getElementById('lightTypeSelect').value;
+        const lightColor = document.getElementById('lightColorInput').value;
+        // Ensure intensity is parsed as a float
+        const intensity = parseFloat(document.getElementById('lightIntensityInput').value);
+        const castShadow = document.getElementById('lightShadowInput').checked;
+        // Ensure distance is parsed as a float (or use 0 for infinite)
+        const distance = parseFloat(document.getElementById('lightDistanceInput').value) || 0;
+        // Ensure angle is parsed and converted to radians
+        const angle = THREE.MathUtils.degToRad(parseFloat(document.getElementById('lightAngleInput').value));
+
+        const position = getMouseWorldPosition() || new THREE.Vector3(0, 2, 0); // Default position if click fails
+        let light;
+        let helper;
+
+        switch (lightType) {
+            case 'point':
+                light = new THREE.PointLight(lightColor, intensity, distance);
+                light.name = `Point Light ${objects.filter(o => o.isPointLight).length + 1}`;
+                if (castShadow) { // Point lights can cast shadows
+                    light.castShadow = true;
+                    // Optional: Configure shadow properties for PointLight if needed
+                    // light.shadow.mapSize.width = 1024;
+                    // light.shadow.mapSize.height = 1024;
+                    // light.shadow.camera.near = 0.5;
+                    // light.shadow.camera.far = distance > 0 ? distance : 50; // Adjust far based on distance
+                }
+                helper = new THREE.PointLightHelper(light, 0.5); // Create helper
+                break;
+            case 'directional':
+                light = new THREE.DirectionalLight(lightColor, intensity);
+                light.name = `Directional Light ${objects.filter(o => o.isDirectionalLight).length + 1}`;
+                light.target = new THREE.Object3D(); // Target is important
+                light.target.position.set(position.x, 0, position.z); // Aim towards the click point on the ground
+                scene.add(light.target);
+                light.castShadow = castShadow;
+                if (castShadow) {
+                    light.shadow.mapSize.width = 1024;
+                    light.shadow.mapSize.height = 1024;
+                    light.shadow.camera.near = 0.5;
+                    light.shadow.camera.far = 50;
+                    light.shadow.camera.left = -10;
+                    light.shadow.camera.right = 10;
+                    light.shadow.camera.top = 10;
+                    light.shadow.camera.bottom = -10;
+                }
+                helper = new THREE.DirectionalLightHelper(light, 1); // Create helper
+                break;
+            case 'spot':
+                light = new THREE.SpotLight(lightColor, intensity, distance, angle);
+                light.name = `Spot Light ${objects.filter(o => o.isSpotLight).length + 1}`;
+                light.penumbra = 0.1; // Optional: soften shadow edges
+                light.decay = 1; // Physically correct decay
+                light.target = new THREE.Object3D(); // Target is important
+                light.target.position.set(position.x, 0, position.z); // Aim towards the click point on the ground
+                scene.add(light.target);
+                light.castShadow = castShadow;
+                if (castShadow) {
+                    light.shadow.mapSize.width = 1024;
+                    light.shadow.mapSize.height = 1024;
+                    light.shadow.camera.near = 0.5;
+                    light.shadow.camera.far = distance > 0 ? distance : 50; // Adjust far
+                    light.shadow.focus = 1; // Optional: Sharpens shadow focus
+                }
+                helper = new THREE.SpotLightHelper(light); // Create helper
+                break;
+            case 'ambient':
+                light = new THREE.AmbientLight(lightColor, intensity);
+                light.name = `Ambient Light ${objects.filter(o => o.isAmbientLight).length + 1}`;
+                // Ambient light doesn't have a position, direction, or cast shadows
+                // No helper needed for AmbientLight
+                break;
+            default: // Fallback to PointLight if type is unknown
+                console.warn("Unknown light type selected, defaulting to PointLight.");
+                light = new THREE.PointLight(lightColor, intensity, distance);
+                light.name = `Point Light ${objects.filter(o => o.isPointLight).length + 1}`;
+                if (castShadow) light.castShadow = true;
+                helper = new THREE.PointLightHelper(light, 0.5); // Create helper
+                break;
+        }
+
+        if (lightType !== 'ambient') {
+            light.position.copy(position);
+             // Place light slightly above the clicked point, not directly on it
+            light.position.y = Math.max(0.5, position.y + 1.0);
+        }
+
+        scene.add(light);
+        if (helper) {
+             scene.add(helper);
+             light.helper = helper; // Associate helper with light for later removal/update
+        }
+
+        objects.push(light); // Add the light to our manageable objects array
+
+        deselectAll(); // Deselect previous objects
+        selectedObjects.push(light); // Select the newly created light
+
+        if (lightType !== 'ambient') { // Don't attach transform controls to ambient light
+            transformControls.attach(light);
+        }
+
+        updateObjectsList(); // Refresh the UI list
+        document.getElementById('statusInfo').textContent = `Created: ${light.name}`;
+        document.getElementById('lightModal').style.display = 'none'; // Close the modal
+        setActiveTool('select'); // Switch back to select tool
+        saveHistoryState();
+    }
+    
+    function createLightHelper(light, type) {
+        switch (type) {
+            case 'point':
+                return new THREE.PointLightHelper(light, 0.5);
+            case 'directional':
+                return new THREE.DirectionalLightHelper(light, 1);
+            case 'spot':
+                return new THREE.SpotLightHelper(light);
+            default:
+                return null;
+        }
+    }
+
+    function deleteSelected() {
+        if (selectedObjects.length > 0) {
+            for (let obj of selectedObjects) {
+                if (lockedObjects.has(obj.uuid)) {
+                    showToast("Cannot delete locked object. Unlock it first.");
+                    continue;
+                }
+                
+                const name = obj.name || 'Object';
+                if (obj.helper) {
+                    scene.remove(obj.helper);
+                }
+                if (obj.isDirectionalLight || obj.isSpotLight) {
+                    if (obj.target) {
+                        scene.remove(obj.target);
+                    }
+                }
+                scene.remove(obj);
+                const index = objects.indexOf(obj);
+                if (index > -1) {
+                    objects.splice(index, 1);
+                }
+                if (lockedObjects.has(obj.uuid)) {
+                    lockedObjects.delete(obj.uuid);
+                }
+            }
+            
+            transformControls.detach();
+            selectedObjects = [];
+            updateObjectsList();
+            resetPropertiesPanel();
+            document.getElementById('statusInfo').textContent = `Deleted selected objects`;
+            setActiveTool('select');
+        } else {
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(objects, false);
+            if (intersects.length > 0) {
+                const object = intersects[0].object;
+                if (lockedObjects.has(object.uuid)) {
+                    showToast("Cannot delete locked object. Unlock it first.");
+                    return;
+                }
+                const name = object.name || 'Object';
+                if (object.helper) {
+                    scene.remove(object.helper);
+                }
+                if (object.isDirectionalLight || object.isSpotLight) {
+                    if (object.target) {
+                        scene.remove(object.target);
+                    }
+                }
+                scene.remove(object);
+                const index = objects.indexOf(object);
+                if (index > -1) {
+                    objects.splice(index, 1);
+                }
+                if (lockedObjects.has(object.uuid)) {
+                    lockedObjects.delete(object.uuid);
+                }
+                updateObjectsList();
+                document.getElementById('statusInfo').textContent = `Deleted: ${name}`;
+            }
+        }
+    }
+
+    function startCopyProcess() {
+        if (selectedObjects.length === 0) {
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(objects, false);
+            if (intersects.length > 0) {
+                deselectAll();
+                selectedObjects.push(intersects[0].object);
+                transformControls.attach(selectedObjects[0]);
+                updateObjectsList();
+            } else {
+                showToast("Select an object to copy first");
+                return;
+            }
+        }
+        isCopyingObject = true;
+        objectToCopy = selectedObjects[0];
+        document.querySelector('.workspace').style.cursor = 'crosshair';
+        document.getElementById('statusInfo').textContent = 'Click to place the copied object';
+        transformControls.detach();
+    }
+
+    function completeCopyProcess() {
+        if (!objectToCopy) return;
+        let newObject;
+        if (objectToCopy.isLight) {
+            if (objectToCopy.isAmbientLight) {
+                newObject = new THREE.AmbientLight(objectToCopy.color, objectToCopy.intensity);
+            } else if (objectToCopy.isDirectionalLight) {
+                newObject = new THREE.DirectionalLight(objectToCopy.color, objectToCopy.intensity);
+                if (objectToCopy.target) {
+                    newObject.target = new THREE.Object3D();
+                    newObject.target.position.copy(objectToCopy.target.position);
+                    scene.add(newObject.target);
+                }
+                newObject.castShadow = objectToCopy.castShadow;
+            } else if (objectToCopy.isSpotLight) {
+                newObject = new THREE.SpotLight(objectToCopy.color, objectToCopy.intensity);
+                newObject.angle = objectToCopy.angle;
+                newObject.distance = objectToCopy.distance;
+                if (objectToCopy.target) {
+                    newObject.target = new THREE.Object3D();
+                    newObject.target.position.copy(objectToCopy.target.position);
+                    scene.add(newObject.target);
+                }
+                newObject.castShadow = objectToCopy.castShadow;
+            } else {
+                newObject = new THREE.PointLight(objectToCopy.color, objectToCopy.intensity);
+                newObject.distance = objectToCopy.distance;
+                newObject.castShadow = objectToCopy.castShadow;
+            }
+        } else {
+            const geometry = objectToCopy.geometry.clone();
+            const material = objectToCopy.material.clone();
+            newObject = new THREE.Mesh(geometry, material);
+            newObject.castShadow = objectToCopy.castShadow;
+            newObject.receiveShadow = objectToCopy.receiveShadow;
+        }
+        newObject.name = `${objectToCopy.name} (copy)`;
+        const position = getMouseWorldPosition();
+        if (position) {
+            newObject.position.set(position.x, objectToCopy.position.y, position.z);
+        } else {
+            newObject.position.copy(objectToCopy.position);
+            newObject.position.x += 1;
+        }
+        newObject.rotation.copy(objectToCopy.rotation);
+        newObject.scale.copy(objectToCopy.scale);
+        scene.add(newObject);
+        objects.push(newObject);
+        
+        isCopyingObject = false;
+        objectToCopy = null;
+        document.querySelector('.workspace').style.cursor = 'default';
+        
+        deselectAll();
+        selectedObjects.push(newObject);
+        transformControls.attach(newObject);
+        
+        updateObjectsList();
+        document.getElementById('statusInfo').textContent = `Duplicated: ${newObject.name}`;
+        setActiveTool('select');
+        saveHistoryState();
+    }
+
+    function duplicateSelected() {
+        if (currentTool === 'duplicate') {
+            if (selectedObjects.length === 0) {
+                raycaster.setFromCamera(mouse, camera);
+                const intersects = raycaster.intersectObjects(objects, false);
+                if (intersects.length > 0) {
+                    deselectAll();
+                    selectedObjects.push(intersects[0].object);
+                    transformControls.attach(selectedObjects[0]);
+                    updateObjectsList();
+                    startCopyProcess();
+                } else {
+                    showToast("Select an object to copy first");
+                    return;
+                }
+            } else if (isCopyingObject) {
+                completeCopyProcess();
+            } else {
+                startCopyProcess();
+            }
+        } else {
+            setActiveTool('duplicate');
+        }
+    }
+
+    function updateObjectsList() {
+        const list = document.getElementById('objectsList');
+        list.innerHTML = '';
+        objects.forEach(obj => {
+            const item = document.createElement('div');
+            item.className = 'object-item';
+            if (selectedObjects.includes(obj)) {
+                item.classList.add('active');
+            }
+            const isLocked = lockedObjects.has(obj.uuid);
+            item.innerHTML = `
+                <div class="object-visibility" data-uuid="${obj.uuid}">
+                    <span style="cursor:pointer">${obj.visible ? '👁️' : ' '}</span>
+                </div>
+                <div class="object-name">${obj.name || 'Object'}</div>
+                <div class="object-actions">
+                    <span style="cursor:pointer" class="object-lock" data-uuid="${obj.uuid}">
+                        ${isLocked ? '🔑' : '🔒'}
+                    </span>
+                    <span style="cursor:pointer;margin-left:5px" class="object-delete" data-uuid="${obj.uuid}">🗑️</span>
+                </div>
+            `;
+            item.addEventListener('click', (e) => {
+                const uuid = obj.uuid;
+                if (e.shiftKey) {
+                    if (selectedObjects.includes(obj)) {
+                        const index = selectedObjects.indexOf(obj);
+                        selectedObjects.splice(index, 1);
+                        if (selectedObjects.length === 0) {
+                            transformControls.detach();
+                        } else {
+                            transformControls.attach(selectedObjects[0]);
+                        }
+                    } else {
+                        selectedObjects.push(obj);
+                        if (selectedObjects.length === 1) {
+                            transformControls.attach(obj);
+                        }
+                    }
+                } else {
+                    deselectAll();
+                    selectedObjects.push(obj);
+                    transformControls.attach(obj);
+                }
+                updateObjectsList();
+                updatePropertiesPanelForSelection();
+            });
+            list.appendChild(item);
+        });
+        
+        document.querySelectorAll('.object-visibility').forEach(el => {
+            el.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const uuid = el.getAttribute('data-uuid');
+                const obj = objects.find(o => o.uuid === uuid);
+                if (obj) {
+                    obj.visible = !obj.visible;
+                    el.querySelector('span').textContent = obj.visible ? '👁️' : ' ❌';
+                    saveHistoryState();
+                }
+            });
+        });
+        
+        document.querySelectorAll('.object-lock').forEach(el => {
+            el.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const uuid = el.getAttribute('data-uuid');
+                const obj = objects.find(o => o.uuid === uuid);
+                if (obj) {
+                    if (lockedObjects.has(uuid)) {
+                        lockedObjects.delete(uuid);
+                        el.textContent = '🔑';
+                        showToast(`Unlocked: ${obj.name || 'Object'}`);
+                    } else {
+                        lockedObjects.add(uuid);
+                        el.textContent = '🔒';
+                        showToast(`Locked: ${obj.name || 'Object'}`);
+                        if (selectedObjects.includes(obj)) {
+                            const index = selectedObjects.indexOf(obj);
+                            selectedObjects.splice(index, 1);
+                            if (selectedObjects.length === 0) {
+                                transformControls.detach();
+                            } else if (transformControls.object === obj) {
+                                transformControls.attach(selectedObjects[0]);
+                            }
+                            updateObjectsList();
+                            updatePropertiesPanelForSelection();
+                        }
+                    }
+                    saveHistoryState();
+                }
+            });
+        });
+        
+        document.querySelectorAll('.object-delete').forEach(el => {
+            el.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const uuid = el.getAttribute('data-uuid');
+                const obj = objects.find(o => o.uuid === uuid);
+                if (obj) {
+                    if (lockedObjects.has(uuid)) {
+                        showToast("Cannot delete locked object. Unlock it first.");
+                        return;
+                    }
+                    
+                    if (selectedObjects.includes(obj)) {
+                        const index = selectedObjects.indexOf(obj);
+                        selectedObjects.splice(index, 1);
+                        if (selectedObjects.length === 0) {
+                            transformControls.detach();
+                        } else if (transformControls.object === obj) {
+                            transformControls.attach(selectedObjects[0]);
+                        }
+                    }
+                    
+                    if (obj.helper) {
+                        scene.remove(obj.helper);
+                    }
+                    if (obj.isDirectionalLight || obj.isSpotLight) {
+                        if (obj.target) {
+                            scene.remove(obj.target);
+                        }
+                    }
+                    scene.remove(obj);
+                    const index = objects.indexOf(obj);
+                    if (index > -1) {
+                        objects.splice(index, 1);
+                    }
+                    if (lockedObjects.has(uuid)) {
+                        lockedObjects.delete(uuid);
+                    }
+                    updateObjectsList();
+                    if (selectedObjects.length === 0) {
+                        resetPropertiesPanel();
+                    } else {
+                        updatePropertiesPanelForSelection();
+                    }
+                    document.getElementById('statusInfo').textContent = `Deleted: ${obj.name || 'Object'}`;
+                    saveHistoryState();
+                }
+            });
+        });
+    }
+
+    function updatePropertiesPanelForSelection() {
+        if (selectedObjects.length === 0) {
+            resetPropertiesPanel();
+            return;
+        }
+        const obj = selectedObjects[0];
+        
+        document.getElementById('posX').value = obj.position.x.toFixed(2);
+        document.getElementById('posY').value = obj.position.y.toFixed(2);
+        document.getElementById('posZ').value = obj.position.z.toFixed(2);
+        document.getElementById('rotX').value = THREE.MathUtils.radToDeg(obj.rotation.x).toFixed(1);
+        document.getElementById('rotY').value = THREE.MathUtils.radToDeg(obj.rotation.y).toFixed(1);
+        document.getElementById('rotZ').value = THREE.MathUtils.radToDeg(obj.rotation.z).toFixed(1);
+        document.getElementById('scaleX').value = obj.scale.x.toFixed(2);
+        document.getElementById('scaleY').value = obj.scale.y.toFixed(2);
+        document.getElementById('scaleZ').value = obj.scale.z.toFixed(2);
+        
+        if (obj.material) {
+            if (obj.material.color) {
+                materialColor = '#' + obj.material.color.getHexString();
+                document.getElementById('colorInput').value = materialColor;
+                document.getElementById('colorPreview').style.backgroundColor = materialColor;
+            }
+            if (obj.material.metalness !== undefined) {
+                document.getElementById('metalnessInput').value = obj.material.metalness;
+                document.getElementById('metalnessValue').textContent = obj.material.metalness.toFixed(2);
+                metalness = obj.material.metalness;
+            }
+            if (obj.material.roughness !== undefined) {
+                document.getElementById('roughnessInput').value = obj.material.roughness;
+                document.getElementById('roughnessValue').textContent = obj.material.roughness.toFixed(2);
+                roughness = obj.material.roughness;
+            }
+            document.getElementById('transparentInput').checked = obj.material.transparent;
+            document.getElementById('opacityInput').disabled = !obj.material.transparent;
+            document.getElementById('opacityInput').value = obj.material.opacity;
+            document.getElementById('opacityValue').textContent = obj.material.opacity.toFixed(2);
+            isTransparent = obj.material.transparent;
+            opacity = obj.material.opacity;
+            document.getElementById('wireframeInput').checked = obj.material.wireframe;
+            isWireframe = obj.material.wireframe;
+        }
+    }
+
+    function resetPropertiesPanel() {
+        document.getElementById('posX').value = "0.0";
+        document.getElementById('posY').value = "0.0";
+        document.getElementById('posZ').value = "0.0";
+        document.getElementById('rotX').value = "0.0";
+        document.getElementById('rotY').value = "0.0";
+        document.getElementById('rotZ').value = "0.0";
+        document.getElementById('scaleX').value = "1.0";
+        document.getElementById('scaleY').value = "1.0";
+        document.getElementById('scaleZ').value = "1.0";
+        document.getElementById('colorInput').value = materialColor;
+        document.getElementById('colorPreview').style.backgroundColor = materialColor;
+        document.getElementById('metalnessInput').value = metalness;
+        document.getElementById('metalnessValue').textContent = metalness.toFixed(2);
+        document.getElementById('roughnessInput').value = roughness;
+        document.getElementById('roughnessValue').textContent = roughness.toFixed(2);
+        document.getElementById('transparentInput').checked = isTransparent;
+        document.getElementById('opacityInput').disabled = !isTransparent;
+        document.getElementById('opacityInput').value = opacity;
+        document.getElementById('opacityValue').textContent = opacity.toFixed(2);
+        document.getElementById('wireframeInput').checked = isWireframe;
+    }
+
+    function setActiveTool(tool) {
+        const oldTool = currentTool;
+        const oldToolBtn = document.getElementById(`${currentTool}Tool`);
+        if (oldToolBtn) {
+            oldToolBtn.classList.remove('active');
+        }
+        const newToolBtn = document.getElementById(`${tool}Tool`);
+        if (newToolBtn) {
+            newToolBtn.classList.add('active');
+        }
+        currentTool = tool;
+        if (oldTool === 'pan' || oldTool === 'rotate' || oldTool === 'zoomIn' || oldTool === 'zoomOut') {
+            isPanning = false;
+            isOrbiting = false;
+            isZooming = false;
+            isCopyingObject = false;
+            objectToCopy = null;
+        }
+        const workspace = document.querySelector('.workspace');
+        if (tool !== 'duplicate' && isCopyingObject) {
+            isCopyingObject = false;
+            objectToCopy = null;
+        }
+        if (tool === 'select') {
+            workspace.style.cursor = 'default';
+            controls.enablePan = true;
+            controls.enableRotate = true;
+            controls.enableZoom = true;
+        } else if (tool === 'delete') {
+            workspace.style.cursor = 'no-drop';
+        } else if (tool === 'pan') {
+            workspace.style.cursor = 'move';
+        } else if (tool === 'rotate') {
+            workspace.style.cursor = 'alias';
+        } else if (tool === 'zoomIn') {
+            workspace.style.cursor = 'zoom-in';
+        } else if (tool === 'zoomOut') {
+            workspace.style.cursor = 'zoom-out';
+        } else if (tool === 'duplicate') {
+            workspace.style.cursor = 'grab';
+            if (selectedObjects.length > 0) {
+                document.getElementById('statusInfo').textContent = 'Click to place the copied object';
+                isCopyingObject = true;
+                objectToCopy = selectedObjects[0];
+                transformControls.detach();
+            } else {
+                document.getElementById('statusInfo').textContent = 'Select object to copy';
+            }
+        } else {
+            workspace.style.cursor = 'crosshair';
+        }
+        if (tool !== 'duplicate') {
+            document.getElementById('statusInfo').textContent = `Tool: ${tool.charAt(0).toUpperCase() + tool.slice(1)}`;
+        }
+    }
+
+    function setTransformMode(mode) {
+        document.querySelectorAll('.transform-btn').forEach(btn => {
+            btn.classList.remove('active');
+        });
+        document.getElementById(`transform${mode.charAt(0).toUpperCase() + mode.slice(1)}`).classList.add('active');
+        currentTransformMode = mode;
+        transformControls.setMode(mode);
+    }
+    
+    function initImportModal() {
+        document.getElementById('importBtn').addEventListener('click', () => {
+            document.getElementById('importModal').style.display = 'flex';
+            const fileInput = document.getElementById('fileInput');
+            fileInput.value = '';
+            document.querySelector('.dropzone-text').textContent = 'Click here to open a folder and select your 3D model...';
+            document.getElementById('fileDropzone').addEventListener('click', function() {
+                document.getElementById('fileInput').click();
+            });
+        });
+        document.getElementById('closeImportModal').addEventListener('click', () => {
+            document.getElementById('importModal').style.display = 'none';
+        });
+        document.getElementById('cancelImportBtn').addEventListener('click', () => {
+            document.getElementById('importModal').style.display = 'none';
+        });
+        document.getElementById('confirmImportBtn').addEventListener('click', () => {
+            const fileInput = document.getElementById('fileInput');
+            const jsonText = document.getElementById('jsonImportText').value.trim();
+            importSettings.position = document.getElementById('importPosition').value;
+            importSettings.scale = document.getElementById('importScale').value;
+            importSettings.customScale = parseFloat(document.getElementById('customScaleInput').value);
+            if (fileInput.files.length > 0) {
+                importFile(fileInput.files[0]);
+                document.getElementById('importModal').style.display = 'none';
+            } else if (jsonText) {
+                try {
+                    const jsonData = JSON.parse(jsonText);
+                    importJsonModel(jsonData);
+                    document.getElementById('importModal').style.display = 'none';
+                } catch (e) {
+                    showToast("This is a premium feature for subscribers only.");
+                }
+            } else {
+                showToast("Please select a file or paste JSON data to import.");
+            }
+        });
+        const dropzone = document.getElementById('fileDropzone');
+        dropzone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropzone.classList.add('active');
+        });
+        dropzone.addEventListener('dragleave', () => {
+            dropzone.classList.remove('active');
+        });
+        dropzone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropzone.classList.remove('active');
+            if (e.dataTransfer.files.length) {
+                const file = e.dataTransfer.files[0];
+                document.getElementById('fileInput').files = e.dataTransfer.files;
+                const extension = file.name.split('.').pop().toLowerCase();
+                if (['obj', 'stl', 'glb', 'gltf'].includes(extension)) {
+                    importSettings.position = document.getElementById('importPosition').value;
+                    importSettings.scale = document.getElementById('importScale').value;
+                    importSettings.customScale = parseFloat(document.getElementById('customScaleInput').value);
+                    importFile(file);
+                    document.getElementById('importModal').style.display = 'none';
+                } else {
+                    showToast("Unsupported file format. Please use .obj, .stl, or .glb/.gltf files.");
+                }
+            }
+        });
+        document.getElementById('importScale').addEventListener('change', function() {
+            const customScaleRow = document.getElementById('customScaleRow');
+            customScaleRow.style.display = this.value === 'custom' ? 'block' : 'none';
+        });
+        document.getElementById('fileInput').addEventListener('change', function() {
+            const fileName = this.files.length ? this.files[0].name : 'No file selected';
+            document.querySelector('.dropzone-text').textContent = fileName;
+        });
+    }
+    
+    function importFile(file) {
+        const extension = file.name.split('.').pop().toLowerCase();
+        const reader = new FileReader();
+        showToast(`Importing ${file.name}...`);
+        reader.onload = function(e) {
+            try {
+                switch (extension) {
+                    case 'obj':
+                        loadOBJ(e.target.result, file.name);
+                        break;
+                    case 'stl':
+                        loadSTL(e.target.result, file.name);
+                        break;
+                    case 'glb':
+                    case 'gltf':
+                        loadGLTF(e.target.result, file.name);
+                        break;
+                    default:
+                        showToast("Unsupported file format");
+                }
+            } catch (error) {
+                console.error("Error importing file:", error);
+                showToast("Error importing file: " + error.message);
+            }
+        };
+        reader.onerror = function() {
+            showToast("Error reading file");
+        };
+        if (extension === 'glb' || extension === 'stl') {
+            reader.readAsArrayBuffer(file);
+        } else {
+            reader.readAsText(file);
+        }
+    }
+    
+    // Function to handle file imports (to be connected to your import UI)
+function handleFileImport(file) {
+    if (!file) return;
+    
+    const reader = new FileReader();
+    reader.onload = function(event) {
+        try {
+            const result = event.target.result;
+            if (file.name.toLowerCase().endsWith('.json')) {
+                const jsonData = JSON.parse(result);
+                importFromJSON(jsonData);
+                showToast('Model imported successfully!');
+            } else if (file.name.toLowerCase().endsWith('.obj')) {
+                importOBJ(result);
+            } else if (file.name.toLowerCase().endsWith('.gltf') || file.name.toLowerCase().endsWith('.glb')) {
+                importGLTF(result);
+            } else {
+                showToast('Unsupported file format. Please use JSON, OBJ, or GLTF/GLB.');
+            }
+        } catch (error) {
+            console.error('Error importing file:', error);
+            showToast('Error importing file: ' + error.message);
+        }
+    };
+    
+    reader.onerror = function() {
+        showToast('Error reading file.');
+    };
+    
+    if (file.name.toLowerCase().endsWith('.json') || file.name.toLowerCase().endsWith('.obj')) {
+        reader.readAsText(file);
+    } else {
+        reader.readAsArrayBuffer(file);
+    }
+}
+
+// Optional helper to clear the scene
+function clearScene() {
+    // Remove all objects except camera, lights and helpers
+    while (objects.length > 0) {
+        const obj = objects.pop();
+        scene.remove(obj);
+        if (obj.geometry) obj.geometry.dispose();
+        if (obj.material) {
+            if (Array.isArray(obj.material)) {
+                obj.material.forEach(mat => mat.dispose());
+            } else {
+                obj.material.dispose();
+            }
+        }
+    }
+    
+    // Clear selection
+    selectedObjects.clear();
+    
+    // Clear locked objects
+    lockedObjects.clear();
+    
+    // Update UI
+    updateObjectsList();
+    updatePropertiesPanel();
+    
+    // Render the scene
+    render();
+}
+    
+    function importFromJSON(jsonData) {
+    try {
+        // Parse the JSON if it's a string
+        const data = typeof jsonData === 'string' ? JSON.parse(jsonData) : jsonData;
+        
+        // Set project name if available
+        if (data.name) {
+            currentProject = data.name;
+            // Update UI elements showing project name if needed
+            const projectNameDisplay = document.querySelector('.project-name-display');
+            if (projectNameDisplay) {
+                projectNameDisplay.textContent = currentProject;
+            }
+        }
+        
+        // Clear current scene (optionally based on user preference)
+        clearScene();
+        
+        // Process each object
+        if (Array.isArray(data.objects)) {
+            data.objects.forEach(objData => {
+                let object;
+                
+                // Create geometry based on type
+                if (objData.type === 'Mesh') {
+                    let geometry;
+                    
+                    if (!objData.geometry) return;
+                    
+                    switch (objData.geometry.type) {
+                        case 'BoxGeometry':
+                            geometry = new THREE.BoxGeometry(
+                                objData.geometry.width || 1,
+                                objData.geometry.height || 1,
+                                objData.geometry.depth || 1
+                            );
+                            break;
+                        case 'SphereGeometry':
+                            geometry = new THREE.SphereGeometry(
+                                objData.geometry.radius || 0.5,
+                                objData.geometry.widthSegments || 32,
+                                objData.geometry.heightSegments || 32
+                            );
+                            break;
+                        case 'CylinderGeometry':
+                            geometry = new THREE.CylinderGeometry(
+                                objData.geometry.radiusTop || 0.5,
+                                objData.geometry.radiusBottom || 0.5,
+                                objData.geometry.height || 1,
+                                objData.geometry.radialSegments || 32
+                            );
+                            break;
+                        case 'PlaneGeometry':
+                            geometry = new THREE.PlaneGeometry(
+                                objData.geometry.width || 1,
+                                objData.geometry.height || 1
+                            );
+                            break;
+                        case 'TorusGeometry':
+                            geometry = new THREE.TorusGeometry(
+                                objData.geometry.radius || 0.5,
+                                objData.geometry.tube || 0.2,
+                                objData.geometry.radialSegments || 16,
+                                objData.geometry.tubularSegments || 50
+                            );
+                            break;
+                        case 'ConeGeometry':
+                            geometry = new THREE.ConeGeometry(
+                                objData.geometry.radius || 0.5,
+                                objData.geometry.height || 1,
+                                objData.geometry.radialSegments || 32
+                            );
+                            break;
+                        default:
+                            console.warn(`Unsupported geometry type: ${objData.geometry.type}`);
+                            return;
+                    }
+                    
+                    // Create material
+                    let material;
+                    if (objData.material) {
+                        const materialType = objData.material.type || 'MeshStandardMaterial';
+                        const color = objData.material.color || '#5D5CDE';
+                        
+                        switch (materialType) {
+                            case 'MeshBasicMaterial':
+                                material = new THREE.MeshBasicMaterial({ color });
+                                break;
+                            case 'MeshPhongMaterial':
+                                material = new THREE.MeshPhongMaterial({ color });
+                                break;
+                            case 'MeshStandardMaterial':
+                                material = new THREE.MeshStandardMaterial({ 
+                                    color,
+                                    metalness: objData.material.metalness !== undefined ? objData.material.metalness : 0,
+                                    roughness: objData.material.roughness !== undefined ? objData.material.roughness : 0.5
+                                });
+                                break;
+                            case 'MeshToonMaterial':
+                                material = new THREE.MeshToonMaterial({ color });
+                                break;
+                            case 'MeshPhysicalMaterial':
+                                material = new THREE.MeshPhysicalMaterial({ 
+                                    color,
+                                    metalness: objData.material.metalness !== undefined ? objData.material.metalness : 0,
+                                    roughness: objData.material.roughness !== undefined ? objData.material.roughness : 0.5
+                                });
+                                break;
+                            default:
+                                material = new THREE.MeshStandardMaterial({ color });
+                        }
+                        
+                        // Apply material properties
+                        if (objData.material.wireframe !== undefined) {
+                            material.wireframe = objData.material.wireframe;
+                        }
+                        
+                        if (objData.material.transparent !== undefined) {
+                            material.transparent = objData.material.transparent;
+                            if (objData.material.opacity !== undefined) {
+                                material.opacity = objData.material.opacity;
+                            }
+                        }
+                    } else {
+                        material = new THREE.MeshStandardMaterial({ color: 0x5D5CDE });
+                    }
+                    
+                    // Create mesh
+                    object = new THREE.Mesh(geometry, material);
+                } else if (objData.type.includes('Light')) {
+                    // Create light
+                    let lightColor = 0xffffff;
+                    let intensity = 1;
+                    
+                    if (objData.light) {
+                        if (objData.light.color) {
+                            lightColor = new THREE.Color(objData.light.color);
+                        }
+                        if (objData.light.intensity !== undefined) {
+                            intensity = objData.light.intensity;
+                        }
+                    }
+                    
+                    switch (objData.type) {
+                        case 'PointLight':
+                            object = new THREE.PointLight(lightColor, intensity);
+                            if (objData.light && objData.light.distance !== undefined) {
+                                object.distance = objData.light.distance;
+                            }
+                            break;
+                        case 'SpotLight':
+                            object = new THREE.SpotLight(lightColor, intensity);
+                            if (objData.light) {
+                                if (objData.light.distance !== undefined) {
+                                    object.distance = objData.light.distance;
+                                }
+                                if (objData.light.angle !== undefined) {
+                                    object.angle = THREE.MathUtils.degToRad(objData.light.angle);
+                                }
+                            }
+                            break;
+                        case 'DirectionalLight':
+                            object = new THREE.DirectionalLight(lightColor, intensity);
+                            break;
+                        case 'AmbientLight':
+                            object = new THREE.AmbientLight(lightColor, intensity);
+                            break;
+                        case 'HemisphereLight':
+                            object = new THREE.HemisphereLight(lightColor, 0x000000, intensity);
+                            break;
+                        default:
+                            object = new THREE.PointLight(lightColor, intensity);
+                    }
+                    
+                    // Apply shadow settings
+                    if (objData.light && objData.light.castShadow !== undefined && objData.type !== 'AmbientLight' && objData.type !== 'HemisphereLight') {
+                        object.castShadow = objData.light.castShadow;
+                    }
+                }
+                
+                if (object) {
+                    // Set basic properties
+                    if (objData.name) {
+                        object.name = objData.name;
+                    }
+                    
+                    // Apply UUID if possible
+                    if (objData.uuid) {
+                        try {
+                            object.uuid = objData.uuid;
+                        } catch (e) {
+                            console.warn('Could not set UUID:', e);
+                        }
+                    }
+                    
+                    // Apply position
+                    if (objData.position) {
+                        object.position.set(
+                            objData.position.x || 0,
+                            objData.position.y || 0,
+                            objData.position.z || 0
+                        );
+                    }
+                    
+                    // Apply rotation (convert from degrees to radians)
+                    if (objData.rotation) {
+                        object.rotation.set(
+                            THREE.MathUtils.degToRad(objData.rotation.x || 0),
+                            THREE.MathUtils.degToRad(objData.rotation.y || 0),
+                            THREE.MathUtils.degToRad(objData.rotation.z || 0)
+                        );
+                    }
+                    
+                    // Apply scale
+                    if (objData.scale) {
+                        object.scale.set(
+                            objData.scale.x || 1,
+                            objData.scale.y || 1,
+                            objData.scale.z || 1
+                        );
+                    }
+                    
+                    // Apply visibility
+                    if (objData.visible !== undefined) {
+                        object.visible = objData.visible;
+                    }
+                    
+                    // Apply locked status
+                    if (objData.locked) {
+                        lockedObjects.add(object.uuid);
+                    }
+                    
+                    // Add to scene
+                    scene.add(object);
+                    objects.push(object);
+                    
+                    // Update the object list in UI
+                    updateObjectsList();
+                }
+            });
+        }
+        
+        // Select the first object if available
+        if (objects.length > 0) {
+            selectObject(objects[0]);
+        }
+        
+        // Update the view
+        render();
+        
+        return true;
+    } catch (error) {
+        console.error('Error importing from JSON:', error);
+        showToast('Error importing model: ' + error.message);
+        return false;
+    }
+}
+    
+    function loadOBJ(content, filename) {
+        const object = objLoader.parse(content);
+        processImportedObject(object, filename);
+    }
+    
+    function loadSTL(buffer, filename) {
+        const geometry = stlLoader.parse(buffer);
+        const material = createMaterial();
+        const mesh = new THREE.Mesh(geometry, material);
+        processImportedObject(mesh, filename);
+    }
+    
+    function loadGLTF(buffer, filename) {
+        const bufferOrString = typeof buffer === 'string' ? new TextEncoder().encode(buffer).buffer : buffer;
+        const gltfLoader = new THREE.GLTFLoader();
+        gltfLoader.parse(bufferOrString, '', function(result) {
+            processImportedObject(result.scene, filename);
+        }, function(error) {
+            console.error('Error parsing GLTF:', error);
+            showToast("Error importing GLTF/GLB file");
+        });
+    }
+    
+    // 3. Function to process imported objects (checking/replacing MeshBasicMaterial)
+    function processImportedObject(object, filename) {
+        const name = filename.split('.')[0];
+        object.name = name; // Assign name to the root object
+
+        let meshes = []; // Keep track of meshes added
+
+        // --- Modification: Ensure light-reactive materials ---
+        object.traverse(function(child) {
+            if (child.isMesh) {
+                // Check if the material is MeshBasicMaterial or missing
+                if (!child.material || child.material.isMeshBasicMaterial) {
+                     console.log(`Replacing basic or missing material on: ${child.name || 'imported mesh'}`);
+                     // Preserve color if possible
+                     const oldColor = child.material?.color;
+                     // Assign a new standard material (or use your createMaterial function)
+                     child.material = new THREE.MeshStandardMaterial({
+                        metalness: 0.3, // Default reasonable values
+                        roughness: 0.6
+                     });
+                     if (oldColor) {
+                         child.material.color.copy(oldColor); // Restore color
+                     } else {
+                         child.material.color.set(0xcccccc); // Default grey if no color info
+                     }
+                }
+
+                // Ensure shadows are enabled for meshes
+                child.castShadow = true;
+                child.receiveShadow = true;
+
+                // Assign unique name if child has no name
+                 if (!child.name) {
+                     child.name = `${name}_part_${meshes.length + 1}`;
+                 }
+
+                // Add to scene objects list if not already added (prevents duplicates if root is also a mesh)
+                if (!objects.includes(child)) {
+                    objects.push(child);
+                    meshes.push(child);
+                }
+            } else if(child.isLight) {
+                 // Optionally handle lights within the imported model
+                 if (!child.name) {
+                     child.name = `${name}_light_${objects.filter(o => o.isLight).length + 1}`;
+                 }
+                 if (!objects.includes(child)) {
+                    objects.push(child);
+                 }
+            } else if (child.isGroup && !child.name) {
+                 child.name = `${name}_group_${objects.filter(o => o.isGroup).length + 1}`;
+                 if (!objects.includes(child)) {
+                     objects.push(child);
+                 }
+            }
+        });
+        // --- End Modification ---
+
+        // Handle positioning and scaling *after* traversing and potentially adding children to 'objects'
+        const boundingBox = new THREE.Box3().setFromObject(object);
+        const size = boundingBox.getSize(new THREE.Vector3());
+        const center = boundingBox.getCenter(new THREE.Vector3());
+
+        // Avoid scaling if size is invalid
+        if (size.x > 0 && size.y > 0 && size.z > 0) {
+             if (importSettings.scale === 'fit') {
+                 const maxDim = Math.max(size.x, size.y, size.z);
+                 const scale = 10 / maxDim; // Target max size of 10 units
+                 object.scale.set(scale, scale, scale);
+             } else if (importSettings.scale === 'custom') {
+                 const scale = Math.max(0.01, importSettings.customScale); // Prevent zero/negative scale
+                 object.scale.set(scale, scale, scale);
+             }
+             // Recompute bounding box after scaling for correct positioning
+             boundingBox.setFromObject(object);
+             center.copy(boundingBox.getCenter(new THREE.Vector3()));
+        } else {
+            console.warn(`Imported object "${name}" has zero size in at least one dimension. Skipping scaling.`);
+        }
+
+
+        // Position based on settings
+        switch (importSettings.position) {
+            case 'center':
+                // Move the object so its geometric center is at the world origin (0,0,0)
+                object.position.sub(center);
+                break;
+            case 'ground':
+                // Move the object so its bottom rests on the y=0 plane, centered horizontally
+                 object.position.set(-center.x, -boundingBox.min.y, -center.z);
+                break;
+            case 'origin': // Keep original position relative to its internal origin
+            default:
+                // Do nothing, leave object at its loaded position
+                break;
+        }
+
+        scene.add(object); // Add the potentially transformed root object
+
+        // Add the root object itself to the list if it wasn't added during traversal
+        if (!objects.includes(object) && (object.isMesh || object.isGroup || object.isLight)) {
+             objects.push(object);
+        }
+
+
+        updateObjectsList(); // Update UI list
+
+        deselectAll(); // Clear current selection
+
+        // Select the first mesh found, or the root object if no mesh
+        let objectToSelect = meshes.length > 0 ? meshes[0] : object;
+        selectedObjects.push(objectToSelect);
+        transformControls.attach(objectToSelect);
+
+
+        updatePropertiesPanelForSelection(); // Update UI properties
+
+        showToast(`Imported ${filename} successfully`);
+        saveHistoryState(); // Save this state
+    }
+        
+    function initAIGeneratePanel() {
+        document.getElementById('aiGenerateBtn').addEventListener('click', () => {
+            const panel = document.getElementById('aiGeneratePanel');
+            panel.style.display = panel.style.display === 'none' || panel.style.display === '' ? 'block' : 'none';
+        });
+                document.getElementById('subscribeBtn').addEventListener('click', () => {
+        window.Poe.sendUserMessage('@Kimi-K2-0905-Omni tip', {
+            handler: 'bot-handler',
+            stream: false,
+            openChat: false
+        });
+        });
+        
+                        document.getElementById('donateBtn').addEventListener('click', () => {
+        window.Poe.sendUserMessage('@Llama-4-Scout-Chat tip', {
+            handler: 'bot-handler',
+            stream: false,
+            openChat: false
+        });
+                window.Poe.sendUserMessage('@Mistral-3.2-Chat tip', {
+            handler: 'bot-handler',
+            stream: false,
+            openChat: false
+        });
+        });
+        
+        document.getElementById('closeAiGenerateBtn').addEventListener('click', () => {
+            document.getElementById('aiGeneratePanel').style.display = 'none';
+        });
+        const categories = document.querySelectorAll('.ai-generate-panel .template-category');
+        const modelGenerator = document.querySelector('.model-generator');
+        const textureGenerator = document.querySelector('.texture-generator');
+        categories.forEach(category => {
+            category.addEventListener('click', () => {
+                const categoryType = category.getAttribute('data-category');
+                categories.forEach(cat => cat.classList.remove('active'));
+                category.classList.add('active');
+                if (categoryType === 'model') {
+                    modelGenerator.style.display = 'block';
+                    textureGenerator.style.display = 'none';
+                } else if (categoryType === 'texture') {
+                    modelGenerator.style.display = 'none';
+                    textureGenerator.style.display = 'block';
+                }
+            });
+        });
+        document.getElementById('generateModelBtn').addEventListener('click', generateModelWithAI);
+        document.getElementById('generateTextureBtn').addEventListener('click', generateTextureWithAI);
+        document.getElementById('applyTextureBtn').addEventListener('click', applyGeneratedTexture);
+        window.Poe.registerHandler(modelHandlerId, handleModelGeneration);
+        window.Poe.registerHandler(textureHandlerId, handleTextureGeneration);
+    }
+    
+    async function generateModelWithAI() {
+        const prompt = document.getElementById('modelPrompt').value.trim();
+        if (!prompt) {
+            showToast("Please enter a 3D model description");
+            return;
+        }
+        document.getElementById('modelLoadingIndicator').style.display = 'block';
+        const format = document.querySelector('input[name="modelOutputFormat"]:checked').value;
+        try {
+            if (format === 'obj') {
+                await window.Poe.sendUserMessage(
+                    "@High-Reasoning-Bot You will respond with .obj code that represents the demanded object: " + prompt,
+                    {
+                        handler: modelHandlerId,
+                        stream: false,
+                        openChat: true
+                    }
+                );
+            } else {
+                await window.Poe.sendUserMessage(
+                    "@High-Reasoning-Bot Only respond with .json code that represents the following 3D object: " + prompt,
+                    {
+                        handler: modelHandlerId,
+                        stream: false,
+                        openChat: true
+                    }
+                );
+            }
+        } catch (error) {
+            document.getElementById('modelLoadingIndicator').style.display = 'none';
+            console.error("Error generating model:", error);
+            showToast("Error generating model: " + error.message);
+        }
+    }
+    
+    function handleModelGeneration(result) {
+        if (result.status === 'error') {
+            document.getElementById('modelLoadingIndicator').style.display = 'none';
+            showToast("Error generating 3D model");
+            return;
+        }
+        if (result.status === 'complete' && result.responses && result.responses.length > 0) {
+            const response = result.responses[0];
+            if (response.status === 'complete') {
+                document.getElementById('modelLoadingIndicator').style.display = 'none';
+                try {
+                    const content = response.content.trim();
+                    const format = document.querySelector('input[name="modelOutputFormat"]:checked').value;
+                    if (format === 'obj' && (content.startsWith('v ') || content.startsWith('# OBJ'))) {
+                        loadOBJ(content, "AI_Generated_Model.obj");
+                        showToast("3D model generated successfully!");
+                    } else if (format === 'json') {
+                        try {
+                            let jsonText = content;
+                            const jsonMatch = content.match(/```(?:json)?\s*(\{[\s\S]*?\})\s*```/);
+                            if (jsonMatch && jsonMatch[1]) {
+                                jsonText = jsonMatch[1];
+                            }
+                            const jsonData = JSON.parse(jsonText);
+                            importJsonModel(jsonData);
+                            showToast("3D model generated successfully!");
+                        } catch (error) {
+                            console.error("Error parsing JSON:", error);
+                            showToast("Invalid JSON data received from the AI");
+                        }
+                    } else {
+                        showToast("Invalid model data received from the AI");
+                    }
+                } catch (error) {
+                    console.error("Error parsing generated model:", error);
+                    showToast("Error creating model from AI response");
+                }
+            }
+        }
+    }
+    
+    async function generateTextureWithAI() {
+        const prompt = document.getElementById('texturePrompt').value.trim();
+        if (!prompt) {
+            showToast("Please enter a texture description");
+            return;
+        }
+        document.getElementById('textureLoadingIndicator').style.display = 'block';
+        document.getElementById('applyTextureBtn').style.display = 'none';
+        document.getElementById('texturePreview').innerHTML = "Generating texture...";
+        try {
+            await window.Poe.sendUserMessage(
+                "@Image-Photo " + prompt,
+                {
+                    handler: textureHandlerId,
+                    stream: true,
+                    openChat: false
+                }
+            );
+        } catch (error) {
+            document.getElementById('textureLoadingIndicator').style.display = 'none';
+            console.error("Error generating texture:", error);
+            showToast("Error generating texture: " + error.message);
+        }
+    }
+    
+    function handleTextureGeneration(result) {
+        if (result.status === 'error') {
+            document.getElementById('textureLoadingIndicator').style.display = 'none';
+            document.getElementById('texturePreview').innerHTML = "Error generating texture";
+            showToast("Error generating texture");
+            return;
+        }
+        if (result.status === 'complete' && result.responses && result.responses.length > 0) {
+            const response = result.responses[0];
+            if (response.status === 'complete') {
+                document.getElementById('textureLoadingIndicator').style.display = 'none';
+                if (response.attachments && response.attachments.length > 0) {
+                    const textureUrl = response.attachments[0].url;
+                    textureUrls.diffuse = textureUrl;
+                    const previewEl = document.getElementById('texturePreview');
+                    previewEl.innerHTML = '';
+                    const img = document.createElement('img');
+                    img.src = textureUrl;
+                    img.style.maxWidth = '100%';
+                    img.style.maxHeight = '150px';
+                    previewEl.appendChild(img);
+                    document.getElementById('applyTextureBtn').style.display = 'block';
+                    showToast("Texture generated successfully!");
+                } else {
+                    document.getElementById('texturePreview').innerHTML = "No texture was generated";
+                    showToast("No texture image was returned by the AI");
+                }
+            }
+        }
+    }
+    
+    function applyGeneratedTexture() {
+        if (selectedObjects.length === 0) {
+            showToast("Please select an object to apply the texture to");
+            return;
+        }
+        if (!textureUrls.diffuse) {
+            showToast("No texture has been generated yet");
+            return;
+        }
+        
+        try {
+            const texture = new THREE.TextureLoader().load(textureUrls.diffuse);
+            texture.wrapS = THREE.RepeatWrapping;
+            texture.wrapT = THREE.RepeatWrapping;
+            
+            selectedObjects.forEach(obj => {
+                if (!obj.material) return;
+                
+                if (obj.material.type === 'MeshBasicMaterial' || 
+                    obj.material.type === 'MeshStandardMaterial' || 
+                    obj.material.type === 'MeshPhongMaterial' || 
+                    obj.material.type === 'MeshPhysicalMaterial') {
+                    obj.material.map = texture;
+                    obj.material.needsUpdate = true;
+                } else {
+                    const oldMaterial = obj.material;
+                    obj.material = new THREE.MeshStandardMaterial({
+                        color: oldMaterial.color,
+                        map: texture,
+                        metalness: oldMaterial.metalness || 0,
+                        roughness: oldMaterial.roughness || 0.5,
+                        wireframe: oldMaterial.wireframe || false,
+                        transparent: oldMaterial.transparent || false,
+                        opacity: oldMaterial.opacity || 1
+                    });
+                }
+            });
+            
+            updatePropertiesPanelForSelection();
+            showToast("Texture applied to selected object(s)!");
+            saveHistoryState();
+        } catch (error) {
+            console.error("Error applying texture:", error);
+            showToast("Error applying texture: " + error.message);
+        }
+    }
+    
+ function initTextureModal() {
+    document.getElementById('textureMenuBtn').addEventListener('click', () => {
+        document.getElementById('textureModal').style.display = 'flex';
+    });
+    
+    document.getElementById('closeTextureModal').addEventListener('click', () => {
+        document.getElementById('textureModal').style.display = 'none';
+    });
+    
+    document.getElementById('clearTexturesBtn').addEventListener('click', () => {
+        if (selectedObjects.length > 0) {
+            selectedObjects.forEach(obj => {
+                if (!obj.material) return;
+                
+                // Handle array materials (for multi-material objects)
+                if (Array.isArray(obj.material)) {
+                    obj.material.forEach(mat => {
+                        mat.map = null;
+                        mat.normalMap = null;
+                        mat.roughnessMap = null;
+                        mat.needsUpdate = true;
+                    });
+                } else {
+                    obj.material.map = null;
+                    obj.material.normalMap = null;
+                    obj.material.roughnessMap = null;
+                    obj.material.needsUpdate = true;
+                }
+            });
+            
+            // Reset preview elements if they exist
+            const previewElements = ['diffuseMapPreview', 'normalMapModalPreview', 'roughnessMapModalPreview'];
+            previewElements.forEach(id => {
+                const element = document.getElementById(id);
+                if (element) {
+                    element.style.display = 'none';
+                    if (element.tagName === 'IMG') {
+                        element.src = '';
+                    }
+                }
+            });
+            
+            textureUrls = { diffuse: null, normal: null, roughness: null };
+            showToast("All textures cleared");
+            saveHistoryState();
+        } else {
+            showToast("No object selected");
+        }
+    });
+    
+    document.getElementById('applyTexturesBtn').addEventListener('click', () => {
+        applyAllTextures();
+        document.getElementById('textureModal').style.display = 'none';
+                        window.Poe.sendUserMessage('@Image-Photo roughness texture', {
+                                    handler: 'app-handler',
+                                    stream: true,
+                                    openChat: false
+                                });
+                         window.Poe.sendUserMessage('@Image-Photo diffuse texture', {
+                                    handler: 'app-handler',
+                                    stream: true,
+                                    openChat: false
+                                });
+    });
+    
+    setupTextureFileInput('diffuseMapInput', 'diffuseMapPreview', 'diffuse');
+    setupTextureFileInput('normalMapInput', 'normalMapModalPreview', 'normal');
+    setupTextureFileInput('roughnessMapInput', 'roughnessMapModalPreview', 'roughness');
+    
+    document.getElementById('diffuseAiBtn').addEventListener('click', () => {
+        document.getElementById('aiGeneratePanel').style.display = 'block';
+        document.getElementById('textureModal').style.display = 'none';
+        document.querySelector('.ai-generate-panel .template-category[data-category="texture"]').click();
+    });
+    
+    // Register handlers once at initialization
+    window.Poe.registerHandler("texture_normal_handler", function(result) {
+        if (result.status === 'complete' && result.responses && result.responses.length > 0) {
+            const response = result.responses[0];
+            if (response.attachments && response.attachments.length > 0) {
+                const normalUrl = response.attachments[0].url;
+                textureUrls.normal = normalUrl;
+                
+                const normalPreview = document.getElementById('normalMapModalPreview');
+                if (normalPreview) {
+                    normalPreview.src = normalUrl;
+                    normalPreview.style.display = 'block';
+                }
+                
+                const normalMapPreview = document.getElementById('normalMapPreview');
+                if (normalMapPreview) {
+                    normalMapPreview.src = normalUrl;
+                }
+                
+                showToast("Normal map generated successfully");
+            } else {
+                showToast("No normal map was generated");
+            }
+        } else if (result.status === 'error') {
+            showToast("Error generating normal map");
+        }
+    });
+    
+    window.Poe.registerHandler("texture_roughness_handler", function(result) {
+        if (result.status === 'complete' && result.responses && result.responses.length > 0) {
+            const response = result.responses[0];
+            if (response.attachments && response.attachments.length > 0) {
+                const roughnessUrl = response.attachments[0].url;
+                textureUrls.roughness = roughnessUrl;
+                
+                const roughnessPreview = document.getElementById('roughnessMapModalPreview');
+                if (roughnessPreview) {
+                    roughnessPreview.src = roughnessUrl;
+                    roughnessPreview.style.display = 'block';
+                }
+                
+                const roughnessMapPreview = document.getElementById('roughnessMapPreview');
+                if (roughnessMapPreview) {
+                    roughnessMapPreview.src = roughnessUrl;
+                }
+                
+                showToast("Roughness map generated successfully");
+            } else {
+                showToast("No roughness map was generated");
+            }
+        } else if (result.status === 'error') {
+            showToast("Error generating roughness map");
+        }
+    });
+    
+    document.getElementById('normalAiBtn').addEventListener('click', async () => {
+        if (!textureUrls.diffuse) {
+            showToast("Please generate a color texture first");
+            return;
+        }
+        
+        showToast("Generating normal map from the color texture...");
+        
+        try {
+            await window.Poe.sendUserMessage(
+                "@Image-Photo Normal map texture.",
+                {
+                    handler: "texture_normal_handler",
+                    stream: true,
+                    openChat: false
+                }
+            );
+        } catch (error) {
+            console.error("Error generating normal map:", error);
+            showToast("Error generating normal map: " + error.message);
+        }
+    });
+    
+    document.getElementById('roughnessAiBtn').addEventListener('click', async () => {
+        if (!textureUrls.diffuse) {
+            showToast("Please generate a color texture first");
+            return;
+        }
+        
+        showToast("Generating roughness map from the color texture...");
+        
+        try {
+            await window.Poe.sendUserMessage(
+                "@Image-Photo Roughness map texture.",
+                {
+                    handler: "texture_roughness_handler",
+                    stream: true,
+                    openChat: false
+                }
+            );
+        } catch (error) {
+            console.error("Error generating roughness map:", error);
+            showToast("Error generating roughness map: " + error.message);
+        }
+    });
+}    
+    function setupTextureFileInput(inputId, previewId, textureType) {
+        const input = document.getElementById(inputId);
+        const preview = document.getElementById(previewId);
+        input.addEventListener('change', function() {
+            if (this.files && this.files[0]) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    preview.src = e.target.result;
+                    preview.style.display = 'block';
+                    textureUrls[textureType] = e.target.result;
+                };
+                reader.readAsDataURL(this.files[0]);
+            }
+        });
+    }
+    
+    function applyAllTextures() {
+        if (selectedObjects.length === 0) {
+            showToast("No object selected");
+            return;
+        }
+        
+        try {
+            selectedObjects.forEach(obj => {
+                if (!obj.material) return;
+                
+                if (obj.material.type !== 'MeshStandardMaterial' && obj.material.type !== 'MeshPhysicalMaterial') {
+                    obj.material = new THREE.MeshStandardMaterial({
+                        color: obj.material.color || 0xffffff,
+                        metalness: obj.material.metalness || 0,
+                        roughness: obj.material.roughness || 0.5,
+                        wireframe: obj.material.wireframe || false,
+                        transparent: obj.material.transparent || false,
+                        opacity: obj.material.opacity || 1
+                    });
+                }
+                
+                if (textureUrls.diffuse) {
+                    const diffuseTexture = new THREE.TextureLoader().load(textureUrls.diffuse);
+                    diffuseTexture.wrapS = THREE.RepeatWrapping;
+                    diffuseTexture.wrapT = THREE.RepeatWrapping;
+                    obj.material.map = diffuseTexture;
+                }
+                
+                if (textureUrls.normal) {
+                    const normalTexture = new THREE.TextureLoader().load(textureUrls.normal);
+                    normalTexture.wrapS = THREE.RepeatWrapping;
+                    normalTexture.wrapT = THREE.RepeatWrapping;
+                    obj.material.normalMap = normalTexture;
+                }
+                
+                if (textureUrls.roughness) {
+                    const roughnessTexture = new THREE.TextureLoader().load(textureUrls.roughness);
+                    roughnessTexture.wrapS = THREE.RepeatWrapping;
+                    roughnessTexture.wrapT = THREE.RepeatWrapping;
+                    obj.material.roughnessMap = roughnessTexture;
+                }
+                
+                obj.material.needsUpdate = true;
+            });
+            
+            showToast("Textures applied successfully");
+            saveHistoryState();
+        } catch (error) {
+            console.error("Error applying textures:", error);
+            showToast("Error applying textures: " + error.message);
+        }
+    }
+    
+    function initTemplates() {
+        const templates = [
+            {
+                id: 'table',
+                name: 'Kin Dining Table',
+                category: 'furniture',
+                createFunction: createTableTemplate
+            },
+            {
+                id: 'chair',
+                name: 'Simple Chair',
+                category: 'furniture',
+                createFunction: createChairTemplate
+            },
+            {
+                id: 'house',
+                name: 'Tiny House',
+                category: 'architecture',
+                createFunction: createHouseTemplate
+            },
+            {
+                id: 'pyramid',
+                name: 'Egypt Pyramid',
+                category: 'architecture',
+                createFunction: createPyramidTemplate
+            },
+            {
+                id: 'car',
+                name: 'Sports Car',
+                category: 'basic',
+                createFunction: createCarTemplate
+            },
+            {
+                id: 'tree',
+                name: 'North Fir',
+                category: 'basic',
+                createFunction: createTreeTemplate
+            }
+        ];
+        
+        const grid = document.getElementById('templatesGrid');
+        grid.innerHTML = '';
+        templates.forEach(template => {
+            const item = document.createElement('div');
+            item.className = 'template-item';
+            item.setAttribute('data-category', template.category);
+            item.innerHTML = `
+                <div class="template-preview">${template.name}</div>
+                <div class="template-name">${template.name}</div>
+            `;
+            item.addEventListener('click', () => {
+                selectedTemplate = template;
+                showTemplateConfirmation();
+            });
+            grid.appendChild(item);
+        });
+        const categories = document.querySelectorAll('.template-category');
+        categories.forEach(category => {
+            category.addEventListener('click', () => {
+                const categoryType = category.getAttribute('data-category');
+                categories.forEach(cat => cat.classList.remove('active'));
+                category.classList.add('active');
+                const items = document.querySelectorAll('.template-item');
+                items.forEach(item => {
+                    if (categoryType === 'all' || item.getAttribute('data-category') === categoryType) {
+                        item.style.display = 'block';
+                    } else {
+                        item.style.display = 'none';
+                    }
+                });
+            });
+        });
+        document.getElementById('templatesBtn').addEventListener('click', () => {
+            const panel = document.getElementById('templatesPanel');
+            panel.style.display = panel.style.display === 'none' || panel.style.display === '' ? 'block' : 'none';
+        });
+
+        document.getElementById('confirmTemplateBtn').addEventListener('click', () => {
+            document.getElementById('templateConfirmModal').style.display = 'true';
+            if (selectedTemplate) {
+                applyTemplate(selectedTemplate);
+                selectedTemplate = null;
+            }
+            templateConfirmModal.style.display = 'none';
+        });
+        
+        document.getElementById('cancelTemplateBtn').addEventListener('click', () => {
+            document.getElementById('templateConfirmModal').style.display = 'none';
+            selectedTemplate = null;
+        });
+    }
+    
+    function showTemplateConfirmation() {
+        document.getElementById('templateConfirmModal').style.display = 'flex';
+    }
+    
+    function applyTemplate(template) {
+        clearSceneObjects();
+        template.createFunction();
+        document.getElementById('templatesPanel').style.display = 'none';
+        showToast(`Applied template: ${template.name}`);
+        saveHistoryState();
+        addLights();
+    }
+    
+    function clearSceneObjects() {
+        transformControls.detach();
+        selectedObjects = [];
+        const objectsToRemove = [...objects];
+        objectsToRemove.forEach(obj => {
+            if (obj.helper) {
+                scene.remove(obj.helper);
+            }
+            if (obj.isDirectionalLight || obj.isSpotLight) {
+                if (obj.target) {
+                    scene.remove(obj.target);
+                }
+            }
+            scene.remove(obj);
+        });
+        objects = [];
+        lockedObjects.clear();
+        updateObjectsList();
+        resetPropertiesPanel();
+    }
+    
+    function createTableTemplate() {
+        const tableTopGeometry = new THREE.BoxGeometry(2, 0.1, 1);
+        const tableMaterial = createMaterial();
+        const tableTop = new THREE.Mesh(tableTopGeometry, tableMaterial);
+        tableTop.position.set(0, 0.8, 0);
+        tableTop.castShadow = true;
+        tableTop.receiveShadow = true;
+        tableTop.name = "Table Top";
+        
+        const legGeometry = new THREE.CylinderGeometry(0.05, 0.05, 0.8, 8);
+        const leg1 = new THREE.Mesh(legGeometry, tableMaterial.clone());
+        leg1.position.set(0.8, 0.4, 0.4);
+        leg1.castShadow = true;
+        leg1.name = "Table Leg 1";
+        
+        const leg2 = new THREE.Mesh(legGeometry, tableMaterial.clone());
+        leg2.position.set(0.8, 0.4, -0.4);
+        leg2.castShadow = true;
+        leg2.name = "Table Leg 2";
+        
+        const leg3 = new THREE.Mesh(legGeometry, tableMaterial.clone());
+        leg3.position.set(-0.8, 0.4, 0.4);
+        leg3.castShadow = true;
+        leg3.name = "Table Leg 3";
+        
+        const leg4 = new THREE.Mesh(legGeometry, tableMaterial.clone());
+        leg4.position.set(-0.8, 0.4, -0.4);
+        leg4.castShadow = true;
+        leg4.name = "Table Leg 4";
+        
+        scene.add(tableTop, leg1, leg2, leg3, leg4);
+        objects.push(tableTop, leg1, leg2, leg3, leg4);
+        
+        deselectAll();
+        selectedObjects.push(tableTop);
+        transformControls.attach(tableTop);
+        
+        updateObjectsList();
+    }
+    
+    function createChairTemplate() {
+        const seatGeometry = new THREE.BoxGeometry(0.6, 0.1, 0.6);
+        const chairMaterial = createMaterial();
+        const seat = new THREE.Mesh(seatGeometry, chairMaterial);
+        seat.position.set(0, 0.5, 0);
+        seat.castShadow = true;
+        seat.receiveShadow = true;
+        seat.name = "Chair Seat";
+        
+        const backGeometry = new THREE.BoxGeometry(0.6, 0.6, 0.1);
+        const back = new THREE.Mesh(backGeometry, chairMaterial.clone());
+        back.position.set(0, 0.8, -0.25);
+        back.castShadow = true;
+        back.receiveShadow = true;
+        back.name = "Chair Back";
+        
+        const legGeometry = new THREE.CylinderGeometry(0.04, 0.04, 0.5, 8);
+        const leg1 = new THREE.Mesh(legGeometry, chairMaterial.clone());
+        leg1.position.set(0.25, 0.25, 0.25);
+        leg1.castShadow = true;
+        leg1.name = "Chair Leg 1";
+        
+        const leg2 = new THREE.Mesh(legGeometry, chairMaterial.clone());
+        leg2.position.set(0.25, 0.25, -0.25);
+        leg2.castShadow = true;
+        leg2.name = "Chair Leg 2";
+        
+        const leg3 = new THREE.Mesh(legGeometry, chairMaterial.clone());
+        leg3.position.set(-0.25, 0.25, 0.25);
+        leg3.castShadow = true;
+        leg3.name = "Chair Leg 3";
+        
+        const leg4 = new THREE.Mesh(legGeometry, chairMaterial.clone());
+        leg4.position.set(-0.25, 0.25, -0.25);
+        leg4.castShadow = true;
+        leg4.name = "Chair Leg 4";
+        
+        scene.add(seat, back, leg1, leg2, leg3, leg4);
+        objects.push(seat, back, leg1, leg2, leg3, leg4);
+        
+        deselectAll();
+        selectedObjects.push(seat);
+        transformControls.attach(seat);
+        updateObjectsList();
+    }
+    
+    function createHouseTemplate() {
+        const baseMaterial = createMaterial();
+        baseMaterial.color.set(0xDDDDDD);
+        const baseGeometry = new THREE.BoxGeometry(3, 2, 2);
+        const base = new THREE.Mesh(baseGeometry, baseMaterial);
+        base.position.set(0, 1, 0);
+        base.castShadow = true;
+        base.receiveShadow = true;
+        base.name = "House Base";
+        
+        const roofMaterial = createMaterial();
+        roofMaterial.color.set(0xA52A2A);
+        const roofGeometry = new THREE.ConeGeometry(2.2, 1.5, 4);
+        const roof = new THREE.Mesh(roofGeometry, roofMaterial);
+        roof.position.set(0, 2.75, 0);
+        roof.rotation.y = Math.PI / 4;
+        roof.castShadow = true;
+        roof.name = "House Roof";
+        
+        const doorMaterial = createMaterial();
+        doorMaterial.color.set(0x8B4513);
+        const doorGeometry = new THREE.BoxGeometry(0.6, 1.4, 0.1);
+        const door = new THREE.Mesh(doorGeometry, doorMaterial);
+        door.position.set(0, 0.7, 1.05);
+        door.castShadow = true;
+        door.name = "House Door";
+        
+        const windowMaterial = createMaterial();
+        windowMaterial.color.set(0xADD8E6);
+        const windowGeometry = new THREE.BoxGeometry(0.6, 0.6, 0.1);
+        const window1 = new THREE.Mesh(windowGeometry, windowMaterial);
+        window1.position.set(0.8, 1.2, 1.05);
+        window1.castShadow = true;
+        window1.name = "Window 1";
+        
+        const window2 = new THREE.Mesh(windowGeometry, windowMaterial);
+        window2.position.set(-0.8, 1.2, 1.05);
+        window2.castShadow = true;
+        window2.name = "Window 2";
+        
+        const window3 = new THREE.Mesh(windowGeometry, windowMaterial);
+        window3.position.set(0, 1.2, -1.05);
+        window3.castShadow = true;
+        window3.name = "Window 3";
+        
+        scene.add(base, roof, door, window1, window2, window3);
+        objects.push(base, roof, door, window1, window2, window3);
+        
+        deselectAll();
+        selectedObjects.push(base);
+        transformControls.attach(base);
+        
+        updateObjectsList();
+    }
+    
+    function createPyramidTemplate() {
+        const baseMaterial = createMaterial();
+        baseMaterial.color.set(0xDDDDDD);
+        
+        const baseGeometry = new THREE.BoxGeometry(4, 0.5, 4);
+        const base = new THREE.Mesh(baseGeometry, baseMaterial);
+        base.position.set(0, 0.25, 0);
+        base.receiveShadow = true;
+        base.name = "Pyramid Base";
+        
+        const pyramidMaterial = createMaterial();
+        pyramidMaterial.color.set(0xEAD170);
+        const pyramidGeometry = new THREE.ConeGeometry(2, 3, 4);
+        const pyramid = new THREE.Mesh(pyramidGeometry, pyramidMaterial);
+        pyramid.position.set(0, 2, 0);
+        pyramid.rotation.y = Math.PI / 4;
+        pyramid.castShadow = true;
+        pyramid.name = "Pyramid";
+        scene.add(base, pyramid);
+        objects.push(base, pyramid);
+        deselectAll();
+        selectedObjects.push(pyramid);
+        transformControls.attach(pyramid);
+        updateObjectsList();
+    }
+    
+function createCarTemplate() {
+clearSceneObjects();
+  // Create a car group to organize components
+  const car = new THREE.Group();
+  car.name = "Car";
+  
+  // Enhanced materials with physically-based rendering and environment mapping
+  const bodyMat = createMaterial();
+  bodyMat.color.set(0x3498db); // Sleek blue color
+  bodyMat.metalness = 0.8;
+  bodyMat.roughness = 0.2;
+  bodyMat.envMapIntensity = 1.5; // Enhanced reflections if environment map is available
+  
+  const cabinMat = createMaterial();
+  cabinMat.color.set(0x1c2833);
+  cabinMat.metalness = 0.1;
+  cabinMat.roughness = 0.1;
+  cabinMat.transparent = true;
+  cabinMat.opacity = 0.7;
+  cabinMat.envMapIntensity = 2.0; // Enhanced glass reflections
+  
+  const lightMat = createMaterial();
+  lightMat.color.set(0xffffcc);
+  lightMat.emissive.set(0xffffaa);
+  lightMat.emissiveIntensity = 0.8; // Brighter lights
+  
+  const headlightGlassMat = createMaterial();
+  headlightGlassMat.color.set(0xffffff);
+  headlightGlassMat.transparent = true;
+  headlightGlassMat.opacity = 0.9;
+  headlightGlassMat.roughness = 0.05;
+  
+  const wheelMat = createMaterial();
+  wheelMat.color.set(0x111111);
+  wheelMat.metalness = 0.1;
+  wheelMat.roughness = 0.8;
+  
+  const rimMat = createMaterial();
+  rimMat.color.set(0xcccccc);
+  rimMat.metalness = 0.9;
+  rimMat.roughness = 0.1;
+  rimMat.envMapIntensity = 1.8; // Enhanced chrome-like appearance
+  
+  const interiorMat = createMaterial();
+  interiorMat.color.set(0x34495e);
+  interiorMat.metalness = 0.2;
+  interiorMat.roughness = 0.7;
+  
+  // Body base with rounded edges
+  const bodyGeo = new THREE.BoxGeometry(2.2, 0.4, 1.2, 1, 1, 2);
+  const body = new THREE.Mesh(bodyGeo, bodyMat);
+  body.position.set(0, 0.4, 0);
+  body.castShadow = body.receiveShadow = true;
+  body.name = "Car Body";
+  car.add(body);
+  
+  // Front section (hood) with sloped design
+  const hoodGeometry = new THREE.BufferGeometry();
+  const hoodVertices = new Float32Array([
+    // Front face (sloped down)
+    0.6, 0.4, 0.55,  // top right
+    1.2, 0.3, 0.55,  // bottom right
+    0.6, 0.4, -0.55, // top left
+    1.2, 0.3, -0.55, // bottom left
+    
+    // Back face (connection to body)
+    0.6, 0.4, 0.55,  // top right
+    0.6, 0.4, -0.55, // top left
+    0.6, 0.2, 0.55,  // bottom right
+    0.6, 0.2, -0.55, // bottom left
+    
+    // Top face
+    0.6, 0.4, 0.55,  // back right
+    0.6, 0.4, -0.55, // back left
+    1.2, 0.3, 0.55,  // front right
+    1.2, 0.3, -0.55, // front left
+    
+    // Bottom face
+    0.6, 0.2, 0.55,  // back right
+    1.2, 0.3, 0.55,  // front right
+    0.6, 0.2, -0.55, // back left
+    1.2, 0.3, -0.55, // front left
+    
+    // Right face
+    0.6, 0.4, 0.55,  // top back
+    1.2, 0.3, 0.55,  // top front
+    0.6, 0.2, 0.55,  // bottom back
+    1.2, 0.3, 0.55,  // bottom front (same as top front for simplicity)
+    
+    // Left face
+    0.6, 0.4, -0.55, // top back
+    0.6, 0.2, -0.55, // bottom back
+    1.2, 0.3, -0.55, // top front
+    1.2, 0.3, -0.55  // bottom front (same as top front for simplicity)
+  ]);
+  
+  hoodGeometry.setAttribute('position', new THREE.BufferAttribute(hoodVertices, 3));
+  hoodGeometry.setIndex([
+    0, 1, 2, 2, 1, 3,       // front face
+    4, 5, 6, 6, 5, 7,       // back face
+    8, 9, 10, 10, 9, 11,    // top face
+    12, 13, 14, 14, 13, 15, // bottom face
+    16, 17, 18, 18, 17, 19, // right face
+    20, 21, 22, 21, 23, 22  // left face
+  ]);
+  hoodGeometry.computeVertexNormals();
+  
+  const hood = new THREE.Mesh(hoodGeometry, bodyMat);
+  hood.castShadow = hood.receiveShadow = true;
+  hood.name = "Car Hood";
+  car.add(hood);
+  
+  // Cabin with aerodynamic windshield slope
+  const cabinGeometry = new THREE.BufferGeometry();
+  const cabinVertices = new Float32Array([
+    // Front windshield (sloped)
+    0.4, 0.6, 0.5,   // bottom right
+    0.4, 0.6, -0.5,  // bottom left
+    0.1, 1.0, 0.45,  // top right
+    0.1, 1.0, -0.45, // top left
+    
+    // Rear windshield (sloped)
+    -0.4, 0.6, 0.5,   // bottom right
+    -0.4, 0.6, -0.5,  // bottom left
+    -0.1, 1.0, 0.45,  // top right
+    -0.1, 1.0, -0.45, // top left
+    
+    // Roof
+    0.1, 1.0, 0.45,  // front right
+    0.1, 1.0, -0.45, // front left
+    -0.1, 1.0, 0.45, // rear right
+    -0.1, 1.0, -0.45 // rear left
+  ]);
+  
+  cabinGeometry.setAttribute('position', new THREE.BufferAttribute(cabinVertices, 3));
+  cabinGeometry.setIndex([
+    0, 1, 2, 2, 1, 3,    // front windshield
+    4, 6, 5, 5, 6, 7,    // rear windshield
+    8, 9, 10, 10, 9, 11  // roof
+  ]);
+  cabinGeometry.computeVertexNormals();
+  
+  const cabin = new THREE.Mesh(cabinGeometry, cabinMat);
+  cabin.castShadow = cabin.receiveShadow = true;
+  cabin.name = "Car Cabin";
+  car.add(cabin);
+  
+  // Side windows
+  const windowMat = createMaterial();
+  windowMat.color.set(0x1c2833);
+  windowMat.metalness = 0.1;
+  windowMat.roughness = 0.1;
+  windowMat.transparent = true;
+  windowMat.opacity = 0.6;
+  
+  const leftWindowGeometry = new THREE.BufferGeometry();
+  const leftWindowVertices = new Float32Array([
+    0.4, 0.6, -0.5,   // front bottom
+    0.1, 1.0, -0.45,  // front top
+    -0.4, 0.6, -0.5,  // rear bottom
+    -0.1, 1.0, -0.45  // rear top
+  ]);
+  
+  leftWindowGeometry.setAttribute('position', new THREE.BufferAttribute(leftWindowVertices, 3));
+  leftWindowGeometry.setIndex([0, 1, 2, 2, 1, 3]);
+  leftWindowGeometry.computeVertexNormals();
+  
+  const leftWindow = new THREE.Mesh(leftWindowGeometry, windowMat);
+  leftWindow.castShadow = leftWindow.receiveShadow = true;
+  leftWindow.name = "Left Window";
+  car.add(leftWindow);
+  
+  const rightWindowGeometry = new THREE.BufferGeometry();
+  const rightWindowVertices = new Float32Array([
+    0.4, 0.6, 0.5,   // front bottom
+    -0.4, 0.6, 0.5,  // rear bottom
+    0.1, 1.0, 0.45,  // front top
+    -0.1, 1.0, 0.45  // rear top
+  ]);
+  
+  rightWindowGeometry.setAttribute('position', new THREE.BufferAttribute(rightWindowVertices, 3));
+  rightWindowGeometry.setIndex([0, 1, 2, 2, 1, 3]);
+  rightWindowGeometry.computeVertexNormals();
+  
+  const rightWindow = new THREE.Mesh(rightWindowGeometry, windowMat);
+  rightWindow.castShadow = rightWindow.receiveShadow = true;
+  rightWindow.name = "Right Window";
+  car.add(rightWindow);
+  
+  // Trunk with slight upward slope
+  const trunkGeometry = new THREE.BufferGeometry();
+  const trunkVertices = new Float32Array([
+    // Front face (connection to body)
+    -0.6, 0.4, 0.55,  // top right
+    -0.6, 0.4, -0.55, // top left
+    -0.6, 0.2, 0.55,  // bottom right
+    -0.6, 0.2, -0.55, // bottom left
+    
+    // Back face (slightly raised)
+    -1.1, 0.45, 0.55,  // top right
+    -1.1, 0.45, -0.55, // top left
+    -1.1, 0.2, 0.55,   // bottom right
+    -1.1, 0.2, -0.55,  // bottom left
+    
+    // Top face
+    -0.6, 0.4, 0.55,   // front right
+    -0.6, 0.4, -0.55,  // front left
+    -1.1, 0.45, 0.55,  // back right
+    -1.1, 0.45, -0.55, // back left
+    
+    // Bottom face
+    -0.6, 0.2, 0.55,   // front right
+    -0.6, 0.2, -0.55,  // front left
+    -1.1, 0.2, 0.55,   // back right
+    -1.1, 0.2, -0.55,  // back left
+    
+    // Right face
+    -0.6, 0.4, 0.55,   // top front
+    -1.1, 0.45, 0.55,  // top back
+    -0.6, 0.2, 0.55,   // bottom front
+    -1.1, 0.2, 0.55,   // bottom back
+    
+    // Left face
+    -0.6, 0.4, -0.55,  // top front
+    -0.6, 0.2, -0.55,  // bottom front
+    -1.1, 0.45, -0.55, // top back
+    -1.1, 0.2, -0.55   // bottom back
+  ]);
+  
+  trunkGeometry.setAttribute('position', new THREE.BufferAttribute(trunkVertices, 3));
+  trunkGeometry.setIndex([
+    0, 1, 2, 2, 1, 3,       // front face
+    4, 5, 6, 6, 5, 7,       // back face
+    8, 9, 10, 10, 9, 11,    // top face
+    12, 13, 14, 14, 13, 15, // bottom face
+    16, 17, 18, 18, 17, 19, // right face
+    20, 21, 22, 21, 23, 22  // left face
+  ]);
+  trunkGeometry.computeVertexNormals();
+  
+  const trunk = new THREE.Mesh(trunkGeometry, bodyMat);
+  trunk.castShadow = trunk.receiveShadow = true;
+  trunk.name = "Car Trunk";
+  car.add(trunk);
+  
+  // Bumpers
+  const frontBumperGeo = new THREE.BoxGeometry(0.2, 0.2, 1.2);
+  const frontBumper = new THREE.Mesh(frontBumperGeo, bodyMat);
+  frontBumper.position.set(1.2, 0.3, 0);
+  frontBumper.castShadow = frontBumper.receiveShadow = true;
+  frontBumper.name = "Front Bumper";
+  car.add(frontBumper);
+  
+  const rearBumperGeo = new THREE.BoxGeometry(0.2, 0.2, 1.2);
+  const rearBumper = new THREE.Mesh(rearBumperGeo, bodyMat);
+  rearBumper.position.set(-1.2, 0.3, 0);
+  rearBumper.castShadow = rearBumper.receiveShadow = true;
+  rearBumper.name = "Rear Bumper";
+  car.add(rearBumper);
+  
+  // Headlights with housing and glass
+  const headlightPositions = [
+    [1.22, 0.4, 0.4],
+    [1.22, 0.4, -0.4]
+  ];
+  
+  headlightPositions.forEach((pos, idx) => {
+    const headlightGroup = new THREE.Group();
+    headlightGroup.position.set(...pos);
+    headlightGroup.name = `Headlight ${idx + 1}`;
+    
+    // Headlight housing
+    const housingGeo = new THREE.CylinderGeometry(0.12, 0.12, 0.06, 16);
+    const housing = new THREE.Mesh(housingGeo, rimMat);
+    housing.rotation.x = Math.PI / 2; // Correct rotation
+    housing.castShadow = housing.receiveShadow = true;
+    housing.name = `Headlight ${idx + 1} Housing`;
+    headlightGroup.add(housing);
+    
+    // Headlight bulb (emissive part)
+    const bulbGeo = new THREE.SphereGeometry(0.06, 12, 12);
+    const bulb = new THREE.Mesh(bulbGeo, lightMat);
+    bulb.position.set(0, 0, -0.02);
+    bulb.castShadow = bulb.receiveShadow = true;
+    bulb.name = `Headlight ${idx + 1} Bulb`;
+    headlightGroup.add(bulb);
+    
+    // Headlight glass
+    const glassGeo = new THREE.CylinderGeometry(0.11, 0.11, 0.01, 16);
+    const glass = new THREE.Mesh(glassGeo, headlightGlassMat);
+    glass.position.set(0, 0, 0.03);
+    glass.rotation.x = Math.PI / 2; // Correct rotation
+    glass.castShadow = glass.receiveShadow = true;
+    glass.name = `Headlight ${idx + 1} Glass`;
+    headlightGroup.add(glass);
+    
+    // Create a spotlight for each headlight
+    const spotLight = new THREE.SpotLight(0xffffee, 0.5);
+    spotLight.position.set(0, 0, 0.05);
+    spotLight.angle = Math.PI / 6;
+    spotLight.penumbra = 0.2;
+    spotLight.decay = 2;
+    spotLight.distance = 10;
+    spotLight.castShadow = true;
+    spotLight.target.position.set(5, 0, 0);
+    headlightGroup.add(spotLight);
+    headlightGroup.add(spotLight.target);
+addLights();
+    car.add(headlightGroup);
+  });
+  
+  // Taillights with housing and glass
+  const taillightMat = createMaterial();
+  taillightMat.color.set(0xff0000);
+  taillightMat.emissive.set(0xff0000);
+  taillightMat.em
+  
+  // Wheels with more detail
+  const wheelPositions = [
+    [0.7, 0.25, 0.6, "Front Right Wheel"],
+    [0.7, 0.25, -0.6, "Front Left Wheel"],
+    [-0.7, 0.25, 0.6, "Rear Right Wheel"],
+    [-0.7, 0.25, -0.6, "Rear Left Wheel"]
+  ];
+  
+  wheelPositions.forEach(([x, y, z, name]) => {
+    const wheelGroup = new THREE.Group();
+    wheelGroup.name = name;
+    wheelGroup.position.set(x, y, z);
+    
+    // Tire
+    const tireGeo = new THREE.CylinderGeometry(0.25, 0.25, 0.15, 24);
+    const tire = new THREE.Mesh(tireGeo, wheelMat);
+    tire.rotation.x = Math.PI / 2; // Correct rotation for wheels facing outward
+    tire.castShadow = tire.receiveShadow = true;
+    tire.name = `${name} Tire`;
+    wheelGroup.add(tire);
+    
+    // Rim
+    const rimGeo = new THREE.CylinderGeometry(0.15, 0.15, 0.16, 8);
+    const rim = new THREE.Mesh(rimGeo, rimMat);
+    rim.rotation.x = Math.PI / 2; // Match tire rotation
+    rim.castShadow = rim.receiveShadow = true;
+    rim.name = `${name} Rim`;
+    wheelGroup.add(rim);
+    
+    // Hubcap
+    const hubcapGeo = new THREE.CircleGeometry(0.12, 16);
+    const hubcap = new THREE.Mesh(hubcapGeo, rimMat);
+    hubcap.position.set(0, 0, 0.08);
+    hubcap.castShadow = hubcap.receiveShadow = true;
+    hubcap.name = `${name} Hubcap`;
+    wheelGroup.add(hubcap);
+    
+    // Spokes
+    for (let i = 0; i < 5; i++) {
+      const spokeGeo = new THREE.BoxGeometry(0.14, 0.02, 0.02);
+      const spoke = new THREE.Mesh(spokeGeo, rimMat);
+      spoke.position.z = 0.07; // Position slightly behind hubcap
+      
+      // Calculate position for each spoke in a circular pattern
+      const angle = (i / 5) * Math.PI * 2;
+      spoke.position.x = Math.cos(angle) * 0.07;
+      spoke.position.y = Math.sin(angle) * 0.07;
+      spoke.rotation.z = angle; // Rotate spoke to point outward
+      
+      spoke.castShadow = spoke.receiveShadow = true;
+      spoke.name = `${name} Spoke ${i + 1}`;
+      wheelGroup.add(spoke);
+    }
+    
+    // Add wheel wells
+    const isLeft = name.includes("Left");
+    const wheelWellGeo = new THREE.CylinderGeometry(0.3, 0.3, 0.05, 24, 1, true, 0, Math.PI);
+    const wheelWell = new THREE.Mesh(wheelWellGeo, bodyMat);
+    wheelWell.position.set(0, 0, isLeft ? -0.1 : 0.1);
+    wheelWell.rotation.set(Math.PI/2, isLeft ? Math.PI : 0, 0);
+    wheelWell.name = `${name} Well`;
+    wheelGroup.add(wheelWell);
+    
+    car.add(wheelGroup);
+  });
+  
+  // Add axles
+  const axleGeo = new THREE.CylinderGeometry(0.05, 0.05, 1.3, 8);
+  const frontAxle = new THREE.Mesh(axleGeo, rimMat);
+  frontAxle.position.set(0.7, 0.25, 0);
+  frontAxle.rotation.x = Math.PI / 2; // Fixed rotation
+  frontAxle.castShadow = frontAxle.receiveShadow = true;
+  frontAxle.name = "Front Axle";
+  car.add(frontAxle);
+  
+  const rearAxle = new THREE.Mesh(axleGeo, rimMat);
+  rearAxle.position.set(-0.7, 0.25, 0);
+  rearAxle.rotation.x = Math.PI / 2; // Fixed rotation
+  rearAxle.castShadow = rearAxle.receiveShadow = true;
+  rearAxle.name = "Rear Axle";
+  car.add(rearAxle);
+  
+  // Add suspension
+  const suspensionGeo = new THREE.CylinderGeometry(0.03, 0.03, 0.4, 8);
+  const suspensionMat = createMaterial();
+  suspensionMat.color.set(0x777777);
+  suspensionMat.metalness = 0.8;
+  suspensionMat.roughness = 0.2;
+  
+  const suspensionPositions = [
+    [0.7, 0.4, 0.4, "Front Right Suspension"],
+    [0.7, 0.4, -0.4, "Front Left Suspension"],
+    [-0.7, 0.4, 0.4, "Rear Right Suspension"],
+    [-0.7, 0.4, -0.4, "Rear Left Suspension"]
+  ];
+  
+  suspensionPositions.forEach(([x, y, z, name]) => {
+    const suspension = new THREE.Mesh(suspensionGeo, suspensionMat);
+    suspension.position.set(x, y, z);
+    suspension.castShadow = suspension.receiveShadow = true;
+    suspension.name = name;
+    car.add(suspension);
+  });
+  
+  // Add to scene
+  scene.add(car);
+  
+  // Add all parts to objects array for selection and transform controls
+  const parts = car.children.flatMap(child => {
+    if (child.children.length > 0) {
+      return [child, ...child.children];
+    }
+    return child;
+  });
+  
+  objects.push(car, ...parts);
+  
+  // Select the car body by default
+  deselectAll();
+  
+  selectedObjects.push(body);
+  transformControls.attach(body);
+  updateObjectsList();
+  return car;
+    addlights();
+}
+    
+    function createTreeTemplate() {
+        const trunkMaterial = createMaterial();
+        trunkMaterial.color.set(0x8B4513);
+        const trunkGeometry = new THREE.CylinderGeometry(0.2, 0.2, 1.5, 8);
+        const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
+        trunk.position.set(0, 0.75, 0);
+        trunk.castShadow = true;
+        trunk.receiveShadow = true;
+        trunk.name = "Tree Trunk";
+        
+        const leavesMaterial = createMaterial();
+        leavesMaterial.color.set(0x228B22);
+        const leavesGeometry = new THREE.ConeGeometry(1, 2, 8);
+        const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial);
+        leaves.position.set(0, 2, 0);
+        leaves.castShadow = true;
+        leaves.name = "Tree Top";
+        
+        scene.add(trunk, leaves);
+        objects.push(trunk, leaves);
+        
+        deselectAll();
+        selectedObjects.push(leaves);
+        transformControls.attach(leaves);
+        updateObjectsList();
+    }
+    
+    function showProFeatureModal(featureType) {
+        const modal = document.getElementById('proFeatureModal');
+        modal.style.display = 'flex';
+        const upgradeBtn = document.getElementById('upgradeProFeatureBtn');
+        upgradeBtn.onclick = async function() {
+            try {
+                await window.Poe.sendUserMessage("@Analyse-PDF Explain to me how 3D object files work and what other 3D file formats exists and what are the use cases.", { openChat: true });
+            } catch (err) {
+                console.error("Error sending message to Gemini:", err);
+            }
+            modal.style.display = 'none';
+        };
+        document.getElementById('closeProFeatureModal').addEventListener('click', function() {
+            modal.style.display = 'none';
+        });
+        document.getElementById('cancelProFeatureBtn').addEventListener('click', function() {
+            modal.style.display = 'none';
+        });
+    }
+    
+    function initExportModal() {
+        document.getElementById('exportBtn').addEventListener('click', () => {
+            document.getElementById('exportModal').style.display = 'flex';
+        });
+        document.getElementById('closeExportModal').addEventListener('click', () => {
+            document.getElementById('exportModal').style.display = 'none';
+        });
+        document.getElementById('cancelExportBtn').addEventListener('click', () => {
+            document.getElementById('exportModal').style.display = 'none';
+        });
+        document.getElementById('confirmExportBtn').addEventListener('click', () => {
+            exportModel();
+            document.getElementById('exportModal').style.display = 'none';
+        });
+        const formatOptions = document.querySelectorAll('.export-option');
+        formatOptions.forEach(option => {
+            option.addEventListener('click', () => {
+                const format = option.getAttribute('data-format');
+                formatOptions.forEach(opt => opt.style.border = '1px solid var(--border-color)');
+                option.style.border = `2px solid var(--primary-color)`;
+                selectedExportFormat = format;
+            });
+        });
+
+    }
+    
+    function saveHistoryState() {
+        const state = {
+            objects: objects.map(obj => {
+                const objState = {
+                    uuid: obj.uuid,
+                    type: obj.type || (obj.geometry ? 'Mesh' : 'Object3D'),
+                    geometry: obj.geometry ? {
+                        type: obj.geometry.type,
+                        parameters: obj.geometry.parameters
+                    } : null,
+                    position: obj.position.clone(),
+                    rotation: obj.rotation.clone(),
+                    scale: obj.scale.clone(),
+                    visible: obj.visible,
+                    name: obj.name,
+                    isLocked: lockedObjects.has(obj.uuid)
+                };
+                
+                if (obj.material) {
+                    objState.material = {
+                        type: obj.material.type,
+                        color: obj.material.color ? obj.material.color.getHex() : 0x5D5CDE,
+                        wireframe: obj.material.wireframe || false,
+                        transparent: obj.material.transparent || false,
+                        opacity: obj.material.opacity || 1
+                    };
+                    
+                    if (obj.material.metalness !== undefined) {
+                        objState.material.metalness = obj.material.metalness;
+                    }
+                    if (obj.material.roughness !== undefined) {
+                        objState.material.roughness = obj.material.roughness;
+                    }
+                }
+                
+                if (obj.isLight) {
+                    objState.light = {
+                        type: obj.type,
+                        color: obj.color ? obj.color.getHex() : 0xffffff,
+                        intensity: obj.intensity
+                    };
+                    
+                    if (obj.isSpotLight || obj.isPointLight) {
+                        objState.light.distance = obj.distance;
+                    }
+                    if (obj.isSpotLight) {
+                        objState.light.angle = obj.angle;
+                    }
+                    if (obj.type !== 'AmbientLight') {
+                        objState.light.castShadow = obj.castShadow;
+                    }
+                }
+                
+                return objState;
+            }),
+            selectedObjectUuids: selectedObjects.map(obj => obj.uuid),
+            backgroundUrl: bgTexture ? bgTexture.image.src : null
+        };
+        
+        if (currentHistoryIndex < historyStates.length - 1) {
+            historyStates = historyStates.slice(0, currentHistoryIndex + 1);
+        }
+        
+        historyStates.push(state);
+        currentHistoryIndex = historyStates.length - 1;
+        if (historyStates.length > MAX_HISTORY_STATES) {
+            historyStates.shift();
+            currentHistoryIndex--;
+        }
+        updateUndoRedoUI();
+    }
+    
+    function undo() {
+        if (currentHistoryIndex <= 0) {
+            showToast("Nothing to undo");
+            return;
+        }
+        
+        currentHistoryIndex--;
+        applyHistoryState(currentHistoryIndex);
+        updateUndoRedoUI();
+    }
+    
+    function redo() {
+        if (currentHistoryIndex >= historyStates.length - 1) {
+            showToast("Nothing to redo");
+            return;
+        }
+        
+        currentHistoryIndex++;
+        applyHistoryState(currentHistoryIndex);
+        updateUndoRedoUI();
+    }
+    
+    function applyHistoryState(index) {
+        if (index < 0 || index >= historyStates.length) return;
+        
+        const state = historyStates[index];
+        
+        deselectAll();
+        clearSceneObjects();
+        
+        if (state.backgroundUrl) {
+            setBackgroundImage(state.backgroundUrl);
+        } else if (bgTexture) {
+            scene.background = null;
+            bgTexture = null;
+            document.getElementById('clearBgImageBtn').style.display = 'none';
+        }
+        
+        state.objects.forEach(objState => {
+            let obj;
+            
+            if (objState.type === 'Mesh' || objState.type.includes('Geometry')) {
+                let geometry;
+                
+                if (objState.geometry && objState.geometry.type) {
+                    const params = objState.geometry.parameters || {};
+                    
+                    if (objState.geometry.type.includes('Box')) {
+                        geometry = new THREE.BoxGeometry(
+                            params.width || 1, 
+                            params.height || 1, 
+                            params.depth || 1
+                        );
+                    } else if (objState.geometry.type.includes('Sphere')) {
+                        geometry = new THREE.SphereGeometry(
+                            params.radius || 0.5,
+                            params.widthSegments || 32,
+                            params.heightSegments || 32
+                        );
+                    } else if (objState.geometry.type.includes('Cylinder')) {
+                        geometry = new THREE.CylinderGeometry(
+                            params.radiusTop || 0.5,
+                            params.radiusBottom || 0.5,
+                            params.height || 1,
+                            params.radialSegments || 32
+                        );
+                    } else if (objState.geometry.type.includes('Cone')) {
+                        geometry = new THREE.ConeGeometry(
+                            params.radius || 0.5,
+                            params.height || 1,
+                            params.radialSegments || 32
+                        );
+                    } else if (objState.geometry.type.includes('Plane')) {
+                        geometry = new THREE.PlaneGeometry(
+                            params.width || 1,
+                            params.height || 1
+                        );
+                    } else if (objState.geometry.type.includes('Torus')) {
+                        geometry = new THREE.TorusGeometry(
+                            params.radius || 0.5,
+                            params.tube || 0.2,
+                            params.radialSegments || 16,
+                            params.tubularSegments || 50
+                        );
+                    } else {
+                        geometry = new THREE.BoxGeometry(1, 1, 1);
+                    }
+                } else {
+                    geometry = new THREE.BoxGeometry(1, 1, 1);
+                }
+                
+                let material;
+                if (objState.material) {
+                    const matOptions = {
+                        color: objState.material.color || 0x5D5CDE,
+                        wireframe: objState.material.wireframe || false,
+                        transparent: objState.material.transparent || false,
+                        opacity: objState.material.opacity || 1
+                    };
+                    
+                    if (objState.material.metalness !== undefined) {
+                        matOptions.metalness = objState.material.metalness;
+                    }
+                    if (objState.material.roughness !== undefined) {
+                        matOptions.roughness = objState.material.roughness;
+                    }
+                    
+                    if (objState.material.type === 'MeshBasicMaterial') {
+                        material = new THREE.MeshBasicMaterial(matOptions);
+                    } else if (objState.material.type === 'MeshPhongMaterial') {
+                        material = new THREE.MeshPhongMaterial(matOptions);
+                    } else if (objState.material.type === 'MeshToonMaterial') {
+                        material = new THREE.MeshToonMaterial(matOptions);
+                    } else if (objState.material.type === 'MeshPhysicalMaterial') {
+                        material = new THREE.MeshPhysicalMaterial(matOptions);
+                    } else {
+                        material = new THREE.MeshStandardMaterial(matOptions);
+                    }
+                } else {
+                    material = new THREE.MeshStandardMaterial({ color: 0x5D5CDE });
+                }
+                
+                obj = new THREE.Mesh(geometry, material);
+            }
+            else if (objState.light) {
+                const lightColor = objState.light.color || 0xffffff;
+                const intensity = objState.light.intensity || 1;
+                
+                if (objState.type === 'AmbientLight') {
+                    obj = new THREE.AmbientLight(lightColor, intensity);
+                } else if (objState.type === 'DirectionalLight') {
+                    obj = new THREE.DirectionalLight(lightColor, intensity);
+                    if (objState.light.castShadow) {
+                        obj.castShadow = true;
+                    }
+                    obj.target = new THREE.Object3D();
+                    obj.target.position.set(objState.position.x, 0, objState.position.z);
+                    scene.add(obj.target);
+                } else if (objState.type === 'SpotLight') {
+                    obj = new THREE.SpotLight(lightColor, intensity);
+                    obj.angle = objState.light.angle || Math.PI/3;
+                    obj.distance = objState.light.distance || 0;
+                    if (objState.light.castShadow) {
+                        obj.castShadow = true;
+                    }
+                    obj.target = new THREE.Object3D();
+                    obj.target.position.set(objState.position.x, 0, objState.position.z);
+                    scene.add(obj.target);
+                } else if (objState.type === 'PointLight') {
+                    obj = new THREE.PointLight(lightColor, intensity);
+                    obj.distance = objState.light.distance || 0;
+                    if (objState.light.castShadow) {
+                        obj.castShadow = true;
+                    }
+                } else {
+                    obj = new THREE.PointLight(lightColor, intensity);
+                }
+                
+                if (objState.type === 'DirectionalLight') {
+                    obj.helper = new THREE.DirectionalLightHelper(obj, 1);
+                    scene.add(obj.helper);
+                } else if (objState.type === 'SpotLight') {
+                    obj.helper = new THREE.SpotLightHelper(obj);
+                    scene.add(obj.helper);
+                } else if (objState.type === 'PointLight') {
+                    obj.helper = new THREE.PointLightHelper(obj, 0.5);
+                    scene.add(obj.helper);
+                }
+            }
+            
+            else {
+                obj = new THREE.Object3D();
+            }
+            obj.uuid = objState.uuid;
+            obj.name = objState.name || "Restored Object";
+            obj.position.copy(objState.position);
+            obj.rotation.copy(objState.rotation);
+            obj.scale.copy(objState.scale);
+            obj.visible = objState.visible !== undefined ? objState.visible : true;
+            
+            if (obj.isMesh) {
+                obj.castShadow = true;
+                obj.receiveShadow = true;
+            }
+            
+            scene.add(obj);
+            objects.push(obj);
+            
+            if (objState.isLocked) {
+                lockedObjects.add(obj.uuid);
+            }
+        });
+        if (state.selectedObjectUuids && state.selectedObjectUuids.length > 0) {
+            state.selectedObjectUuids.forEach(uuid => {
+                const objToSelect = objects.find(obj => obj.uuid === uuid);
+                if (objToSelect && !lockedObjects.has(objToSelect.uuid)) {
+                    selectedObjects.push(objToSelect);
+                }
+            });
+            
+            if (selectedObjects.length > 0) {
+                transformControls.attach(selectedObjects[0]);
+                updatePropertiesPanelForSelection();
+            }
+        }
+        updateObjectsList();
+    }
+    
+    function updateUndoRedoUI() {
+        const undoBtn = document.getElementById('undoBtn');
+        const redoBtn = document.getElementById('redoBtn');
+        if (currentHistoryIndex <= 0) {
+            undoBtn.style.opacity = "0.5";
+            undoBtn.style.cursor = "not-allowed";
+        } else {
+            undoBtn.style.opacity = "1";
+            undoBtn.style.cursor = "pointer";
+        }
+        if (currentHistoryIndex >= historyStates.length - 1) {
+            redoBtn.style.opacity = "0.5";
+            redoBtn.style.cursor = "not-allowed";
+        } else {
+            redoBtn.style.opacity = "1";
+            redoBtn.style.cursor = "pointer";
+        }
+    }
+    
+    function initApp() {
+        initLoaders();
+        initScene();
+        initTemplates();
+        initExportModal();
+        initImportModal();
+        initAIGeneratePanel();
+        initTextureModal();
+        initPropertyInputs();
+        setupKeyboardShortcuts();
+        setupViewControls();
+        setupAIPanel();
+        setupProFeatures();
+        setupTools();
+        setupUndoRedo();
+        setupBackgroundImage();
+        
+        document.getElementById('colorPreview').addEventListener('click', function() {
+            document.getElementById('colorInput').click();
+        });
+        
+        document.getElementById('bgColorPreview').addEventListener('click', function() {
+            document.getElementById('bgColorInput').click();
+        });
+        
+        document.getElementById('lightColorPreview').addEventListener('click', function() {
+            document.getElementById('lightColorInput').click();
+        });
+        
+        IS_MOBILE = isMobileDevice(); // Set the global mobile flag // <<< ADD THIS LINE
+
+    initThree();
+    initControls();
+    initUI();
+    initEventListeners();
+    loadDefaultScene();
+    animate();
+    updateObjectsList();
+    updateStatusBar();
+    // setupProFeatures(); // Assuming this function is defined elsewhere if needed
+
+    // --- ADD THIS BLOCK for mobile UI elements ---
+    if (IS_MOBILE) {
+        const mobilePropsToggle = document.querySelector('.mobile-properties-toggle');
+        if (mobilePropsToggle) mobilePropsToggle.style.display = 'flex'; // or 'block' if that's the default display
+
+        const mobilePropsCloseBtn = document.getElementById('mobilePropertiesCloseBtn');
+        if (mobilePropsCloseBtn) mobilePropsCloseBtn.style.display = 'block';
+    }
+    }
+    
+    function setupBackgroundImage() {
+        const bgImageInput = document.getElementById('bgImageInput');
+        const clearBgBtn = document.getElementById('clearBgImageBtn');
+        
+        bgImageInput.addEventListener('change', function() {
+            if (this.files && this.files[0]) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    setBackgroundImage(e.target.result);
+                    clearBgBtn.style.display = 'block';
+                    saveHistoryState();
+                };
+                reader.readAsDataURL(this.files[0]);
+            }
+        });
+        
+        clearBgBtn.addEventListener('click', function() {
+            scene.background = null;
+            bgTexture = null;
+            this.style.display = 'none';
+            saveHistoryState();
+        });
+    }
+    
+    function setBackgroundImage(url) {
+                                window.Poe.sendUserMessage('@@Kimi-K2-0905-Omni Set background image.', {
+                                    handler: 'bot-handler',
+                                    stream: false,
+                                    openChat: false
+                                });
+        const textureLoader = new THREE.TextureLoader();
+        bgTexture = textureLoader.load(url, function(texture) {
+            texture.mapping = THREE.EquirectangularReflectionMapping;
+            scene.background = texture;
+        });
+    }
+    
+    function initPropertyInputs() {
+        document.querySelectorAll('.panel-section-title').forEach(title => {
+            const panel = title.parentElement;
+            const content = panel.querySelector('.panel-content');
+            if (content) {
+                content.dataset.expanded = 'true';
+                title.addEventListener('click', () => {
+                    const isExpanded = content.dataset.expanded === 'true';
+                    content.dataset.expanded = !isExpanded;
+                    content.style.display = !isExpanded ? 'block' : 'none';
+                    title.querySelector('.toggle-icon').textContent = !isExpanded ? '▼' : '▶';
+                });
+            }
+        });
+        document.getElementById('posX').addEventListener('change', function() {
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    obj.position.x = parseFloat(this.value);
+                    if (obj.helper) {
+                        obj.helper.update();
+                    }
+                });
+                transformControls.update();
+                saveHistoryState();
+            }
+        });
+        document.getElementById('posY').addEventListener('change', function() {
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    obj.position.y = parseFloat(this.value);
+                    if (obj.helper) {
+                        obj.helper.update();
+                    }
+                });
+                transformControls.update();
+                saveHistoryState();
+            }
+        });
+        document.getElementById('posZ').addEventListener('change', function() {
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    obj.position.z = parseFloat(this.value);
+                    if (obj.helper) {
+                        obj.helper.update();
+                    }
+                });
+                transformControls.update();
+                saveHistoryState();
+            }
+        });
+        document.getElementById('rotX').addEventListener('change', function() {
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    obj.rotation.x = THREE.MathUtils.degToRad(parseFloat(this.value));
+                    if (obj.helper) {
+                        obj.helper.update();
+                    }
+                });
+                transformControls.update();
+                saveHistoryState();
+            }
+        });
+        document.getElementById('rotY').addEventListener('change', function() {
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    obj.rotation.y = THREE.MathUtils.degToRad(parseFloat(this.value));
+                    if (obj.helper) {
+                        obj.helper.update();
+                    }
+                });
+                transformControls.update();
+                saveHistoryState();
+            }
+        });
+        document.getElementById('rotZ').addEventListener('change', function() {
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    obj.rotation.z = THREE.MathUtils.degToRad(parseFloat(this.value));
+                    if (obj.helper) {
+                        obj.helper.update();
+                    }
+                });
+                transformControls.update();
+                saveHistoryState();
+            }
+        });
+        document.getElementById('scaleX').addEventListener('change', function() {
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    obj.scale.x = parseFloat(this.value);
+                });
+                transformControls.update();
+                saveHistoryState();
+            }
+        });
+        document.getElementById('scaleY').addEventListener('change', function() {
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    obj.scale.y = parseFloat(this.value);
+                });
+                transformControls.update();
+                saveHistoryState();
+            }
+        });
+        document.getElementById('scaleZ').addEventListener('change', function() {
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    obj.scale.z = parseFloat(this.value);
+                });
+                transformControls.update();
+                saveHistoryState();
+            }
+        });
+        document.getElementById('materialType').addEventListener('change', function() {
+            materialType = this.value;
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    if (obj.material) {
+                        obj.material.dispose();
+                        obj.material = createMaterial();
+                    }
+                });
+                saveHistoryState();
+            }
+        });
+        document.getElementById('colorInput').addEventListener('change', function() {
+            materialColor = this.value;
+            document.getElementById('colorPreview').style.backgroundColor = materialColor;
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    if (obj.material && obj.material.color) {
+                        obj.material.color.set(materialColor);
+                    }
+                });
+                saveHistoryState();
+            }
+        });
+        document.getElementById('metalnessInput').addEventListener('input', function() {
+            metalness = parseFloat(this.value);
+            document.getElementById('metalnessValue').textContent = metalness.toFixed(2);
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    if (obj.material && obj.material.metalness !== undefined) {
+                        obj.material.metalness = metalness;
+                    }
+                });
+                saveHistoryState();
+            }
+        });
+        document.getElementById('roughnessInput').addEventListener('input', function() {
+            roughness = parseFloat(this.value);
+            document.getElementById('roughnessValue').textContent = roughness.toFixed(2);
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    if (obj.material && obj.material.roughness !== undefined) {
+                        obj.material.roughness = roughness;
+                    }
+                });
+                saveHistoryState();
+            }
+        });
+        document.getElementById('transparentInput').addEventListener('change', function() {
+            isTransparent = this.checked;
+            document.getElementById('opacityInput').disabled = !isTransparent;
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    if (obj.material) {
+                        obj.material.transparent = isTransparent;
+                        if (!isTransparent) {
+                            obj.material.opacity = 1;
+                            document.getElementById('opacityInput').value = 1;
+                            document.getElementById('opacityValue').textContent = "1.00";
+                        }
+                    }
+                });
+                saveHistoryState();
+            }
+        });
+        document.getElementById('opacityInput').addEventListener('input', function() {
+            opacity = parseFloat(this.value);
+            document.getElementById('opacityValue').textContent = opacity.toFixed(2);
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    if (obj.material && obj.material.transparent) {
+                        obj.material.opacity = opacity;
+                    }
+                });
+                saveHistoryState();
+            }
+        });
+        document.getElementById('wireframeInput').addEventListener('change', function() {
+            isWireframe = this.checked;
+            if (selectedObjects.length > 0) {
+                selectedObjects.forEach(obj => {
+                    if (obj.material) {
+                        obj.material.wireframe = isWireframe;
+                    }
+                });
+                saveHistoryState();
+            }
+        });
+        document.getElementById('bgColorInput').addEventListener('change', function() {
+            backgroundColor = this.value;
+            document.getElementById('bgColorPreview').style.backgroundColor = backgroundColor;
+            renderer.setClearColor(backgroundColor);
+            saveHistoryState();
+        });
+        document.getElementById('gridToggle').addEventListener('change', function() {
+            grid.visible = this.checked;
+            saveHistoryState();
+        });
+        document.getElementById('axesToggle').addEventListener('change', function() {
+            axes.visible = this.checked;
+            saveHistoryState();
+        });
+        document.getElementById('shadowsToggle').addEventListener('change', function() {
+            renderer.shadowMap.enabled = this.checked;
+            scene.traverse(obj => {
+                if (obj.isMesh) {
+                    obj.castShadow = this.checked;
+                    obj.receiveShadow = this.checked;
+                }
+            });
+            saveHistoryState();
+        });
+        
+
+// wire up your “New” button
+document.getElementById('newBtn').addEventListener('click', async () => {
+  // Use the corrected confirmation function with a specific message for "New"
+  const confirmed = await askConfirmation("Create an empty scene? This will discard unsaved changes.");
+  if (!confirmed) return;      // user cancelled
+
+  // --- Action only happens if they clicked Yes ---
+  clearSceneObjects();           // Call the correct function to clear objects
+  addLights();                   // Add default lights back to the empty scene
+  showToast('New empty scene created');
+  saveHistoryState();            // Save the new empty state for undo/redo
+  updateObjectsList();           // Update the UI list
+  resetPropertiesPanel();        // Reset the properties panel UI
+
+  // Optional: Reset camera view
+  camera.position.set(5, 5, 5);
+  camera.lookAt(0, 0, 0);
+  controls.target.set(0,0,0);
+  controls.update();
+});
+
+
+// helper: show the modal, wait for Yes/Cancel, then hide it
+// helper: show the modal, wait for Yes/Cancel, then hide it
+function askConfirmation(message = "This action cannot be undone. Are you sure?") { // Added a parameter for the message
+    const modal     = document.getElementById('templateConfirmModal'); // Correct modal ID
+    const messageEl = modal.querySelector('.confirm-message');        // Get the message element
+    const yesBtn    = document.getElementById('confirmTemplateBtn');  // Correct Yes button ID
+    const cancelBtn = document.getElementById('cancelTemplateBtn'); // Correct Cancel button ID
+
+    // Store original message text and set the new one
+    const originalMessage = messageEl.textContent;
+    messageEl.textContent = message;
+
+    return new Promise(resolve => {
+        // show the modal
+        modal.style.display = 'flex';
+
+        // cleanup function to remove listeners, hide modal, and restore message
+        function cleanup() {
+            yesBtn.removeEventListener('click', onYes);
+            cancelBtn.removeEventListener('click', onCancel);
+            modal.style.display = 'none';
+            messageEl.textContent = originalMessage; // Restore original message
+        }
+
+        function onYes() {
+            cleanup();
+            resolve(true); // Resolve with true when Yes is clicked
+        }
+
+        function onCancel() {
+            cleanup();
+            resolve(false); // Resolve with false when Cancel is clicked
+        }
+
+        // Add temporary listeners
+        yesBtn.addEventListener('click', onYes,    { once: true });
+        cancelBtn.addEventListener('click', onCancel, { once: true });
+    });
+}}
+    
+    function setupKeyboardShortcuts() {
+        document.addEventListener('keydown', function(e) {
+            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z') {
+                if (e.shiftKey) {
+                    redo(); 
+                } else {
+                    undo(); 
+                }
+                e.preventDefault();
+                return;
+            }
+            
+            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'y') {
+                redo();
+                e.preventDefault();
+                return;
+            }
+            
+            switch (e.key.toLowerCase()) {
+                case 'v':
+                    setActiveTool('select');
+                    break;
+                case 'c':
+                    setActiveTool('cube');
+                    break;
+                case 's':
+                    if (!e.ctrlKey && !e.metaKey) {
+                        setActiveTool('sphere');
+                    }
+                    break;
+                case 'y':
+                    setActiveTool('cylinder');
+                    break;
+                case 'n':
+                    setActiveTool('cone');
+                    break;
+                case 't':
+                    setActiveTool('torus');
+                    break;
+                case 'p':
+                    setActiveTool('plane');
+                    break;
+                case 'l':
+                    setActiveTool('light');
+                    break;
+                case 'h':
+                    setActiveTool('pan');
+                    break;
+                case 'r':
+                    if (e.ctrlKey || e.metaKey || currentTransformMode === 'rotate') {
+                        setActiveTool('rotate');
+                    } else {
+                        setTransformMode('rotate');
+                    }
+                    break;
+                case 'z':
+                    if (e.ctrlKey || e.metaKey) {
+                        if (e.shiftKey) {
+                            setActiveTool('zoomOut');
+                        } else {
+                            setActiveTool('zoomIn');
+                        }
+                    } else {
+                        setActiveTool('zoom');
+                    }
+                    break;
+                case '+':
+                case '=':
+                    setActiveTool('zoomIn');
+                    break;
+                case '-':
+                case '_':
+                    setActiveTool('zoomOut');
+                    break;
+                case 'delete':
+                    deleteSelected();
+                    saveHistoryState();
+                    break;
+                case 'd':
+                    if (e.altKey) {
+                        duplicateSelected();
+                    }
+                    break;
+                case 'g':
+                    setTransformMode('translate');
+                    break;
+                case 'escape':
+                    deselectAll();
+                    setActiveTool('select');
+                    break;
+            }
+        });
+    }
+    
+    function setupViewControls() {
+        document.getElementById('topView').addEventListener('click', function() {
+            camera.position.set(0, 10, 0);
+            camera.lookAt(0, 0, 0);
+            controls.update();
+        });
+        document.getElementById('frontView').addEventListener('click', function() {
+            camera.position.set(0, 0, 10);
+            camera.lookAt(0, 0, 0);
+            controls.update();
+        });
+        document.getElementById('sideView').addEventListener('click', function() {
+            camera.position.set(10, 0, 0);
+            camera.lookAt(0, 0, 0);
+            controls.update();
+        });
+        document.getElementById('perspectiveView').addEventListener('click', function() {
+            camera.position.set(5, 5, 5);
+            camera.lookAt(0, 0, 0);
+            controls.update();
+        });
+        document.getElementById('transformTranslate').addEventListener('click', function() {
+            setTransformMode('translate');
+        });
+        document.getElementById('transformRotate').addEventListener('click', function() {
+            setTransformMode('rotate');
+        });
+        document.getElementById('transformScale').addEventListener('click', function() {
+            setTransformMode('scale');
+        });
+        document.getElementById('rotateTool').addEventListener('click', function() {
+            setActiveTool('rotate');
+            controls.enableRotate = true;
+            controls.enablePan = false;
+            controls.enableZoom = false;
+        });
+        document.getElementById('panTool').addEventListener('click', function() {
+            setActiveTool('pan');
+            controls.enablePan = true;
+            controls.enableRotate = false;
+            controls.enableZoom = false;
+        });
+        document.getElementById('zoomInTool').addEventListener('click', function() {
+            setActiveTool('zoomIn');
+        });
+        document.getElementById('zoomOutTool').addEventListener('click', function() {
+            setActiveTool('zoomOut');
+        });
+    }
+    
+    function setupUndoRedo() {
+        const undoBtn = document.getElementById('undoBtn');
+        const redoBtn = document.getElementById('redoBtn');
+        
+        undoBtn.addEventListener('click', function() {
+            undo();
+        });
+        
+        redoBtn.addEventListener('click', function() {
+            redo();
+        });
+        updateUndoRedoUI();
+    }
+    
+    function setupAIPanel() {
+        document.getElementById('aiAssistBtn').addEventListener('click', toggleAIPanel);
+        document.getElementById('chatInput').addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendChatMessage();
+            }
+        });
+    }
+    
+    function toggleAIPanel() {
+        const panel = document.getElementById('aiControlPanel');
+        panel.style.display = panel.style.display === 'none' || panel.style.display === '' ? 'flex' : 'none';
+    }
+    
+    async function sendChatMessage() {
+        const message = document.getElementById('chatInput').value;
+        if (!message.trim()) return;
+        displayChatMessage(message, 'user');
+        document.getElementById('chatInput').value = '';
+        document.getElementById('loadingIndicator').style.display = 'block';
+        try {
+            if (!isHandlerRegistered) {
+                window.Poe.registerHandler(handlerId, (result, context) => {
+                    document.getElementById('loadingIndicator').style.display = 'none';
+                    if (result.status === 'error') {
+                        displayChatMessage('Error: Failed to get a response.', 'ai');
+                        return;
+                    }
+                    if (result.status === 'complete' && result.responses && result.responses.length > 0) {
+                        const response = result.responses[0];
+                        if (response.status === 'complete') {
+                            const tempResponse = document.querySelector('.ai-message.temp-response');
+                            if (tempResponse) tempResponse.remove();
+                            displayChatMessage(response.content, 'ai');
+                        }
+                    }
+                    if (result.status === 'incomplete' && result.responses && result.responses.length > 0 && !document.querySelector('.ai-message.temp-response')) {
+                        const msg = result.responses[0];
+                        const tempMsg = document.createElement('div');
+                        tempMsg.classList.add('message', 'ai-message', 'temp-response');
+                        tempMsg.textContent = msg.content || "Thinking...";
+                        document.getElementById('chatLog').appendChild(tempMsg);
+                        document.getElementById('chatLog').scrollTop = document.getElementById('chatLog').scrollHeight;
+                    }
+                    if (result.status === 'incomplete' && result.responses && result.responses.length > 0) {
+                        const msg = result.responses[0];
+                        const tempMsg = document.querySelector('.ai-message.temp-response');
+                        if (tempMsg) {
+                            tempMsg.textContent = msg.content || "Thinking...";
+                            document.getElementById('chatLog').scrollTop = document.getElementById('chatLog').scrollHeight;
+                        }
+                    }
+                });
+                isHandlerRegistered = true;
+            }
+            const sceneInfo = {
+                objectCount: objects.length,
+                selectedObjectCount: selectedObjects.length,
+                selectedObjects: selectedObjects.map(obj => obj.name)
+            };
+            await window.Poe.sendUserMessage(
+                "@Analyse-PDF You are a 3D modeling expert. " +
+                `Help me with this 3D modeling request: ${message} ` +
+                `(Current scene: ${sceneInfo.objectCount} objects in the scene` +
+                (sceneInfo.selectedObjectCount > 0 ? `, selected objects: ${sceneInfo.selectedObjects.join(', ')}` : '') +
+                ') ' +
+                'Provide practical modeling advice focusing on Three.js techniques. Offer specific code examples when relevant.',
+                {
+                    handler: handlerId,
+                    stream: true,
+                    openChat: false
+                }
+            );
+        } catch (error) {
+            console.error('Error sending message:', error);
+            document.getElementById('loadingIndicator').style.display = 'none';
+            displayChatMessage(`Error: ${error.message}`, 'ai');
+        }
+    }
+    
+    async function askAI(prompt) {
+        document.getElementById('loadingIndicator').style.display = 'block';
+        try {
+            if (!isHandlerRegistered) {
+                window.Poe.registerHandler(handlerId, (result, context) => {
+                    document.getElementById('loadingIndicator').style.display = 'none';
+                    if (result.status === 'error') {
+                        displayChatMessage('Error: Failed to get a response.', 'ai');
+                        return;
+                    }
+                    if (result.status === 'complete' && result.responses && result.responses.length > 0) {
+                        const response = result.responses[0];
+                        if (response.status === 'complete') {
+                            const tempResponse = document.querySelector('.ai-message.temp-response');
+                            if (tempResponse) tempResponse.remove();
+                            displayChatMessage(response.content, 'ai');
+                        }
+                    }
+                    if (result.status === 'incomplete' && result.responses && result.responses.length > 0 && !document.querySelector('.ai-message.temp-response')) {
+                        const msg = result.responses[0];
+                        const tempMsg = document.createElement('div');
+                        tempMsg.classList.add('message', 'ai-message', 'temp-response');
+                        tempMsg.textContent = msg.content || "Thinking...";
+                        document.getElementById('chatLog').appendChild(tempMsg);
+                        document.getElementById('chatLog').scrollTop = document.getElementById('chatLog').scrollHeight;
+                    }
+                    if (result.status === 'incomplete' && result.responses && result.responses.length > 0) {
+                        const msg = result.responses[0];
+                        const tempMsg = document.querySelector('.ai-message.temp-response');
+                        if (tempMsg) {
+                            tempMsg.textContent = msg.content || "Thinking...";
+                            document.getElementById('chatLog').scrollTop = document.getElementById('chatLog').scrollHeight;
+                        }
+                    }
+                });
+                isHandlerRegistered = true;
+            }
+            const aiPanel = document.getElementById('aiControlPanel');
+            if (aiPanel.style.display === 'none' || aiPanel.style.display === '') {
+                toggleAIPanel();
+            }
+            const sceneInfo = {
+                objectCount: objects.length,
+                selectedObjectCount: selectedObjects.length,
+                selectedObjects: selectedObjects.map(obj => obj.name)
+            };
+            displayChatMessage(`I need help with: ${prompt}`, 'user');
+            await window.Poe.sendUserMessage(
+                "@Steve-Jobs-Clone You are a 3D modeling expert. " +
+                `${prompt} ` +
+                `(Current scene: ${sceneInfo.objectCount} objects in the scene` +
+                (sceneInfo.selectedObjectCount > 0 ? `, selected objects: ${sceneInfo.selectedObjects.join(', ')}` : '') +
+                ') ' +
+                'Provide practical modeling advice.',
+                {
+                    handler: handlerId,
+                    stream: false,
+                    openChat: false
+                }
+            );
+        } catch (error) {
+            console.error('Error sending message:', error);
+            document.getElementById('loadingIndicator').style.display = 'none';
+            displayChatMessage(`Error: ${error.message}`, 'ai');
+        }
+    }
+    
+    function displayChatMessage(message, type) {
+        const messageEl = document.createElement('div');
+        messageEl.classList.add('message');
+        if (type === 'ai') {
+            message = message
+                .replace(/```js\s*([\s\S]*?)```/g, '<pre class="code-js">$1</pre>')
+                .replace(/```([\s\S]*?)```/g, '<pre>$1</pre>')
+                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                .replace(/\*(.*?)\*/g, '<em>$1</em>')
+                .replace(/\n/g, '<br>');
+            messageEl.innerHTML = message;
+        } else {
+            messageEl.textContent = message;
+        }
+        messageEl.classList.add(type === 'user' ? 'user-message' : 'ai-message');
+        document.getElementById('chatLog').appendChild(messageEl);
+        document.getElementById('chatLog').scrollTop = document.getElementById('chatLog').scrollHeight;
+    }
+    
+    function setupProFeatures() {
+        document.querySelectorAll('.pro-badge').forEach(badge => {
+            badge.addEventListener('click', async (e) => {
+                e.stopPropagation();
+                
+                const toolType = badge.parentElement.id.replace('Tool', '');
+                showProFeatureModal(toolType);
+            });
+        });
+    }
+    
+    function exportModel() {
+        showToast(`Exporting model as ${selectedExportFormat.toUpperCase()}...`);
+                            window.Poe.sendUserMessage('@@Kimi-K2-0905-Omni Export the model', {
+                                    handler: 'bot-handler',
+                                    stream: false,
+                                    openChat: false
+                                });
+                            window.Poe.sendUserMessage('@Mistral-3.2-Chat tip', {
+                                    handler: 'bot-handler',
+                                    stream: false,
+                                    openChat: false
+                                });
+        const sceneData = getSceneData();
+        let exportContent = '';
+        let fileName = 'model';
+        switch (selectedExportFormat) {
+            case 'obj':
+                try {
+                    const exporter = new THREE.OBJExporter();
+                    const clonedScene = scene.clone();
+                    const meshes = clonedScene.children.filter(obj => obj.isMesh && !obj.isLight && !obj.isHelper);
+                    const meshScene = new THREE.Scene();
+                    meshes.forEach(mesh => meshScene.add(mesh.clone()));
+                    exportContent = exporter.parse(meshScene);
+                    fileName = 'model.obj';
+                } catch (error) {
+                    console.error("Error exporting OBJ:", error);
+                    exportContent = JSON.stringify(sceneData, null, 2);
+                    fileName = 'model.json';
+                }
+                break;
+            case 'json':
+            default:
+                exportContent = JSON.stringify(sceneData, null, 2);
+                fileName = 'model.json';
+        }
+        const modal = document.createElement('div');
+        modal.className = 'modal';
+        modal.style.display = 'flex';
+        modal.innerHTML = `
+            <div class="modal-content" style="max-width:500px">
+                <div class="modal-header">
+                    <div class="modal-title">Export Preview (${selectedExportFormat.toUpperCase()})</div>
+                    <button class="modal-close" id="closeExportPreviewModal">×</button>
+                </div>
+                <div style="padding:15px">
+                    <p>Your model has been exported to ${selectedExportFormat.toUpperCase()} format.</p>
+                    <p style="margin-top:10px">You can copy the ${selectedExportFormat === 'json' ? 'JSON representation' : 'text content'} of your model:</p>
+                    <textarea style="width:100%;height:150px;margin-top:10px;font-family:monospace;background-color:var(--bg-color);color:var(--text-color);border:1px solid var(--border-color);padding:10px">${exportContent}</textarea>
+                </div>
+                <div class="modal-footer">
+                    <button class="modal-button modal-button-primary" id="closeExportPreviewBtn">Close</button>
+                </div>
+            </div>
+        `;
+        document.body.appendChild(modal);
+        document.getElementById('closeExportPreviewModal').addEventListener('click', () => {
+            modal.remove();
+        });
+        document.getElementById('closeExportPreviewBtn').addEventListener('click', () => {
+            modal.remove();
+        });
+    }
+    
+    function getSceneData() {
+        const sceneData = {
+            name: currentProject,
+            objects: []
+        };
+        objects.forEach(obj => {
+            if (!obj.isMesh && !obj.isLight) return;
+            const objData = {
+                uuid: obj.uuid,
+                name: obj.name || 'Unnamed Object',
+                type: obj.type,
+                position: {
+                    x: obj.position.x,
+                    y: obj.position.y,
+                    z: obj.position.z
+                },
+                rotation: {
+                    x: THREE.MathUtils.radToDeg(obj.rotation.x),
+                    y: THREE.MathUtils.radToDeg(obj.rotation.y),
+                    z: THREE.MathUtils.radToDeg(obj.rotation.z)
+                },
+                scale: {
+                    x: obj.scale.x,
+                    y: obj.scale.y,
+                    z: obj.scale.z
+                },
+                visible: obj.visible,
+                locked: lockedObjects.has(obj.uuid)
+            };
+            if (obj.geometry) {
+                objData.geometry = {
+                    type: obj.geometry.type
+                };
+                if (obj.geometry.type === 'BoxGeometry') {
+                    objData.geometry.width = obj.geometry.parameters?.width || 1;
+                    objData.geometry.height = obj.geometry.parameters?.height || 1;
+                    objData.geometry.depth = obj.geometry.parameters?.depth || 1;
+                } else if (obj.geometry.type === 'SphereGeometry') {
+                    objData.geometry.radius = obj.geometry.parameters?.radius || 0.5;
+                    objData.geometry.widthSegments = obj.geometry.parameters?.widthSegments || 32;
+                    objData.geometry.heightSegments = obj.geometry.parameters?.heightSegments || 32;
+                } else if (obj.geometry.type === 'CylinderGeometry') {
+                    objData.geometry.radiusTop = obj.geometry.parameters?.radiusTop || 0.5;
+                    objData.geometry.radiusBottom = obj.geometry.parameters?.radiusBottom || 0.5;
+                    objData.geometry.height = obj.geometry.parameters?.height || 1;
+                    objData.geometry.radialSegments = obj.geometry.parameters?.radialSegments || 32;
+                } else if (obj.geometry.type === 'PlaneGeometry') {
+                    objData.geometry.width = obj.geometry.parameters?.width || 1;
+                    objData.geometry.height = obj.geometry.parameters?.height || 1;
+                } else if (obj.geometry.type === 'TorusGeometry') {
+                    objData.geometry.radius = obj.geometry.parameters?.radius || 0.5;
+                    objData.geometry.tube = obj.geometry.parameters?.tube || 0.2;
+                    objData.geometry.radialSegments = obj.geometry.parameters?.radialSegments || 16;
+                    objData.geometry.tubularSegments = obj.geometry.parameters?.tubularSegments || 50;
+                } else if (obj.geometry.type === 'ConeGeometry') {
+                    objData.geometry.radius = obj.geometry.parameters?.radius || 0.5;
+                    objData.geometry.height = obj.geometry.parameters?.height || 1;
+                    objData.geometry.radialSegments = obj.geometry.parameters?.radialSegments || 32;
+                }
+            }
+            if (obj.material) {
+                objData.material = {
+                    type: obj.material.type,
+                    color: '#' + obj.material.color.getHexString(),
+                    wireframe: obj.material.wireframe || false,
+                    transparent: obj.material.transparent || false,
+                    opacity: obj.material.opacity || 1
+                };
+                if (obj.material.type === 'MeshStandardMaterial' || obj.material.type === 'MeshPhysicalMaterial') {
+                    objData.material.metalness = obj.material.metalness;
+                    objData.material.roughness = obj.material.roughness;
+                }
+            }
+            if (obj.isLight) {
+                objData.light = {
+                    color: '#' + new THREE.Color(obj.color).getHexString(),
+                    intensity: obj.intensity
+                };
+                if (obj.type === 'SpotLight' || obj.type === 'PointLight') {
+                    objData.light.distance = obj.distance;
+                }
+                if (obj.type === 'SpotLight') {
+                    objData.light.angle = THREE.MathUtils.radToDeg(obj.angle);
+                }
+                if (obj.type !== 'AmbientLight') {
+                    objData.light.castShadow = obj.castShadow;
+                }
+            }
+            sceneData.objects.push(objData);
+        });
+        return sceneData;
+    }
+    
+    function setupTools() {
+        document.querySelectorAll('.tool-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                const tool = this.id.replace('Tool', '');
+                if (this.querySelector('.pro-badge')) {
+                    showProFeatureModal(tool);
+                    return;
+                }
+                setActiveTool(tool);
+            });
+        });
+    }
+    
+    function showToast(message, duration = 3000) {
+        const toast = document.getElementById('toastNotification');
+        toast.textContent = message;
+        toast.style.display = 'block';
+        setTimeout(() => {
+            toast.style.display = 'none';
+        }, duration);
+    }
+    document.addEventListener('pointerup', function() {
+        if (isPanning || isOrbiting || isZooming) {
+            isPanning = false;
+            isOrbiting = false;
+            isZooming = false;
+            document.querySelector('.workspace').style.cursor = currentTool === 'select' ? 'default' : 'crosshair';
+            controls.enablePan = true;
+            controls.enableRotate = true;
+            controls.enableZoom = true;
+        }
+    });
+    
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.documentElement.classList.add('dark');
+    }
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+        if (event.matches) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    });
+    window.addEventListener('load', () => {
+        initApp();
+    });</script></body></html>
\ No newline at end of file
