// Note for Rosie AI: Return the ENTIRE class we're modifying in your respone, ALWAYS. // Note for Rosie AI: This is the site adress for ThreeJS related scripts - https://cdn.jsdelivr.net/npm/three@0.167.1/examples/jsm/ ASSETS = [ { name: 'Birch Tree', path: 'https://play.rosebud.ai/assets/birch_tree_1.glb?jaiW', category: 'Trees' }, { name: 'Grass 1', path: 'https://play.rosebud.ai/assets/Grass 1.glb?tbdw', category: 'Ground Cover' }, { name: 'Grass 2', path: 'https://play.rosebud.ai/assets/Grass 2.glb?gswP', category: 'Ground Cover' }, { name: 'Grass 3', path: 'https://play.rosebud.ai/assets/Grass 3.glb?ialC', category: 'Ground Cover' }, { name: 'Grass 4', path: 'https://play.rosebud.ai/assets/Grass 4.glb?JPAH', category: 'Ground Cover' }, { name: 'Flower 1', path: 'https://play.rosebud.ai/assets/Flower 1 1.glb?tRFS', category: 'Flora' }, { name: 'Flower Patch 1', path: 'https://play.rosebud.ai/assets/Flower Patch 1.glb?lVLP', category: 'Flora' }, { name: 'Campfire', path: 'https://play.rosebud.ai/assets/Campfire.glb?GFyV', category: 'Props' }, { name: 'Campfire Ring', path: 'https://play.rosebud.ai/assets/Campfire Ring.glb?CVxW', category: 'Props' }, { name: 'Campfire Center', path: 'https://play.rosebud.ai/assets/Campfire Center.glb?3584', category: 'Props' }, { name: 'Large Evergreen Tree', path: 'https://play.rosebud.ai/assets/Large Evergreen.glb?zNDY', category: 'Trees' }, { name: 'Small Evergreen Tree', path: 'https://play.rosebud.ai/assets/Small Evergreen.glb?H0ab', category: 'Trees' }, { name: 'Bare Evergreen Tree', path: 'https://play.rosebud.ai/assets/Bare Evergreen.glb?KFX9', category: 'Trees' }, { name: 'Small Rock 1', path: 'https://play.rosebud.ai/assets/Small Rock 1.glb?PsKW', category: 'Rocks' }, { name: 'Small Rocks 1', path: 'https://play.rosebud.ai/assets/Samll Rocks 1.glb?9iqs', category: 'Rocks' }, { name: 'Small Rocks 2', path: 'https://play.rosebud.ai/assets/Samll Rocks 2.glb?N97V', category: 'Rocks' }, { name: 'Medium Rock 1', path: 'https://play.rosebud.ai/assets/Medium Rock 1.glb?sDRd', category: 'Rocks' }, { name: 'Medium Rock 2', path: 'https://play.rosebud.ai/assets/Medium Rock 2.glb?XBnu', category: 'Rocks' }, { name: 'Log 1', path: 'https://play.rosebud.ai/assets/Log_1.glb?tjZD', category: 'Logs' }, { name: 'Logs 1', path: 'https://play.rosebud.ai/assets/Logs(3).glb?czD8', category: 'Logs' }, ]; class InitializerScene extends Phaser.Scene { constructor() { super('InitializerScene'); this.loadingBar = null; this.loadingText = null; this.staticializationAttempts = 0; this.maxAttempts = 3; this.dependenciesLoaded = false; this.loadingStartTime = 0; } preload() { // Create loading bar this.createLoadingBar(); // Listen to the 'progress' event to update the loading bar this.load.on('progress', this.updateLoadingBar, this); // Listen to the 'complete' event to start initialization this.load.on('complete', this.onLoadComplete, this); // Load ThreeJS first this.load.script('threejs', 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'); this.load.script('extras', 'https://play.rosebud.ai/assets/EXTRAS.js?l4Cg'); } create() { // This will be called after preload is complete } onLoadComplete() { this.loadingStartTime = this.time.now; this.loadThreeJSDependencies(); } loadThreeJSDependencies() { // Load other scripts that depend on ThreeJS this.load.script('uikit', 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.9/js/uikit.min.js'); this.load.css('uikit-css', 'https://cdnjs.cloudflare.com/ajax/libs/uikit/3.21.9/css/uikit.min.css'); this.load.script('gltfloader', 'https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js'); this.load.script('orbitcontrols', 'https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js'); this.load.script('effectcomposer', 'https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/postprocessing/EffectComposer.js'); this.load.script('renderpass', 'https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/postprocessing/RenderPass.js'); this.load.script('outlinepass', 'https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/postprocessing/OutlinePass.js'); this.load.script('shaderpass', 'https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/postprocessing/ShaderPass.js'); this.load.script('fxaashader', 'https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/shaders/FXAAShader.js'); this.load.script('copyshader', 'https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/shaders/CopyShader.js'); // Listen to the 'complete' event to start initialization this.load.once('complete', this.initializeThreeJS, this); // Start loading this.load.start(); } initializeThreeJS() { this.waitForDependencies().then(() => { console.log('All dependencies loaded successfully'); this.scene.start('Game'); }).catch(error => { console.error('Error loading dependencies:', error); this.staticializationAttempts++; if (this.staticializationAttempts < this.maxAttempts) { console.log(`Retrying initialization (Attempt ${this.staticializationAttempts + 1})`); this.resetLoading(); this.time.delayedCall(2000, this.initializeThreeJS, [], this); } else { console.error('Max initialization attempts reached. Unable to start the game.'); this.showErrorMessage(); } }); } waitForDependencies() { return new Promise((resolve, reject) => { const checkDependencies = () => { if (typeof THREE !== 'undefined' && typeof UIkit !== 'undefined' && typeof THREE.GLTFLoader !== 'undefined' && typeof THREE.OrbitControls !== 'undefined' && typeof THREE.EffectComposer !== 'undefined' && typeof THREE.RenderPass !== 'undefined' && typeof THREE.OutlinePass !== 'undefined' && typeof THREE.ShaderPass !== 'undefined' && typeof THREE.FXAAShader !== 'undefined' && typeof THREE.CopyShader !== 'undefined') { this.dependenciesLoaded = true; resolve(); } else if (this.time.now - this.loadingStartTime > 10000) { reject(new Error('Dependencies not loaded after 10 seconds')); } else { this.time.delayedCall(100, checkDependencies, [], this); } }; checkDependencies(); }); } createLoadingBar() { const width = this.cameras.main.width; const height = this.cameras.main.height; // Create loading text this.loadingText = this.add.text(width / 2, height / 2 - 50, 'Loading...', { font: '24px Arial', fill: '#ffffff' }).setOrigin(0.5); // Create loading bar background const loadingBarBg = this.add.rectangle(width / 2, height / 2, 400, 20, 0x666666); loadingBarBg.setOrigin(0.5); // Create loading bar fill this.loadingBar = this.add.rectangle(width / 2 - 200, height / 2, 0, 20, 0x3498db); this.loadingBar.setOrigin(0, 0.5); } updateLoadingBar(value) { if (this.loadingBar) { // Update loading bar width based on progress this.loadingBar.width = 400 * value; } if (this.loadingText && this.loadingText.setText) { // Update loading text with percentage this.loadingText.setText(`Loading... ${Math.round(value * 100)}%`); } } resetLoading() { if (this.loadingBar) { this.loadingBar.width = 0; } if (this.loadingText && this.loadingText.setText) { this.loadingText.setText('Loading... 0%'); } this.loadingStartTime = this.time.now; this.dependenciesLoaded = false; } showErrorMessage() { const width = this.cameras.main.width; const height = this.cameras.main.height; this.add.text(width / 2, height / 2, 'Dependencies failed to load\nPlease reload the project', { font: '24px Arial', fill: '#ffffff', align: 'center' }).setOrigin(0.5); } } class CameraController { constructor(camera, scene, domElement) { this.camera = camera; this.scene = scene; this.domElement = domElement; this.isDevMode = false; this.moveSpeed = 0.1; this.rotateSpeed = 0.002; this.orbitPoint = new THREE.Vector3(0, 0, 0); this.orbitRadius = 10; this.orbitAngleHorizontal = 0; this.orbitAngleVertical = 0; this.zoomSpeed = 0.1; this.panSpeed = 0.01; // Pan speed for shift + middle mouse drag this.keys = this.scene.input.keyboard.addKeys({ w: Phaser.Input.Keyboard.KeyCodes.W, a: Phaser.Input.Keyboard.KeyCodes.A, s: Phaser.Input.Keyboard.KeyCodes.S, d: Phaser.Input.Keyboard.KeyCodes.D, f: Phaser.Input.Keyboard.KeyCodes.F, left: Phaser.Input.Keyboard.KeyCodes.LEFT, right: Phaser.Input.Keyboard.KeyCodes.RIGHT, up: Phaser.Input.Keyboard.KeyCodes.UP, down: Phaser.Input.Keyboard.KeyCodes.DOWN, shift: Phaser.Input.Keyboard.KeyCodes.SHIFT // Add shift key }); this.euler = new THREE.Euler(0, 0, 0, 'YXZ'); this.isMiddleMouseDown = false; this.isShiftDown = false; // Track shift key state this.domElement.addEventListener('mousedown', this.handleMouseDown.bind(this)); this.domElement.addEventListener('mouseup', this.handleMouseUp.bind(this)); this.domElement.addEventListener('mousemove', this.handleMouseMove.bind(this)); this.domElement.addEventListener('wheel', this.handleWheel.bind(this)); // Add event listener for 'f' key this.scene.input.keyboard.on('keydown-F', this.handleFocusObject.bind(this)); // Add event listeners for shift key this.scene.input.keyboard.on('keydown-SHIFT', () => this.isShiftDown = true); this.scene.input.keyboard.on('keyup-SHIFT', () => this.isShiftDown = false); // Tween object for smooth transitions this.tweenObject = null; } toggleMode() { this.isDevMode = !this.isDevMode; console.log(this.isDevMode ? "Dev mode enabled" : "Game mode enabled"); } update() { if (this.isDevMode) { this.updateDevMode(); } else { this.updateGameMode(); } // Update tween if active if (this.tweenObject && this.tweenObject.update) { this.tweenObject.update(); } } updateDevMode() { const forward = new THREE.Vector3(0, 0, -1).applyQuaternion(this.camera.quaternion); const right = new THREE.Vector3(1, 0, 0).applyQuaternion(this.camera.quaternion); if (this.keys.w.isDown) { this.camera.position.addScaledVector(forward, this.moveSpeed); this.orbitPoint.addScaledVector(forward, this.moveSpeed); } if (this.keys.s.isDown) { this.camera.position.addScaledVector(forward, -this.moveSpeed); this.orbitPoint.addScaledVector(forward, -this.moveSpeed); } if (this.keys.a.isDown) { this.camera.position.addScaledVector(right, -this.moveSpeed); this.orbitPoint.addScaledVector(right, -this.moveSpeed); } if (this.keys.d.isDown) { this.camera.position.addScaledVector(right, this.moveSpeed); this.orbitPoint.addScaledVector(right, this.moveSpeed); } if (this.keys.left.isDown) { this.orbitAngleHorizontal += this.rotateSpeed; } if (this.keys.right.isDown) { this.orbitAngleHorizontal -= this.rotateSpeed; } if (this.keys.up.isDown) { this.orbitAngleVertical += this.rotateSpeed; } if (this.keys.down.isDown) { this.orbitAngleVertical -= this.rotateSpeed; } // Clamp vertical angle to avoid flipping this.orbitAngleVertical = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, this.orbitAngleVertical)); this.updateCameraPosition(); } updateGameMode() { // Implement game mode camera behavior here // For now, we'll just keep it static } handleMouseDown(event) { if (this.isDevMode){ if (event.button === 1) { // Middle mouse button this.isMiddleMouseDown = true; this.domElement.requestPointerLock(); } } } handleMouseUp(event) { if (this.isDevMode){ if (event.button === 1) { // Middle mouse button this.isMiddleMouseDown = false; document.exitPointerLock(); } } } handleMouseMove(event) { if (this.isDevMode){ if (this.isMiddleMouseDown) { const movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0; const movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0; if (this.isShiftDown) { // Pan the camera when shift is held down const right = new THREE.Vector3(1, 0, 0).applyQuaternion(this.camera.quaternion); const up = new THREE.Vector3(0, 1, 0).applyQuaternion(this.camera.quaternion); // Update camera position this.camera.position.add(right.multiplyScalar(-movementX * this.panSpeed)); this.camera.position.add(up.multiplyScalar(-movementY * this.panSpeed)); // Update orbit point to maintain relative position this.orbitPoint.add(right.multiplyScalar(-movementX * this.panSpeed)); this.orbitPoint.add(up.multiplyScalar(-movementY * this.panSpeed)); } else { // Rotate the camera when shift is not held down this.orbitAngleHorizontal -= movementX * 0.002; this.orbitAngleVertical -= movementY * 0.002; // Clamp vertical angle to avoid flipping this.orbitAngleVertical = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, this.orbitAngleVertical)); } this.updateCameraPosition(); } } } handleWheel(event) { if (this.isDevMode){ event.preventDefault(); const zoomAmount = event.deltaY * (this.zoomSpeed/10); this.orbitRadius += zoomAmount; // Clamp the orbit radius to prevent zooming too close or too far this.orbitRadius = Math.max(1, Math.min(100, this.orbitRadius)); this.updateCameraPosition(); } } updateCameraPosition() { const phi = this.orbitAngleVertical; const theta = this.orbitAngleHorizontal; const x = this.orbitRadius * Math.sin(phi) * Math.sin(theta); const y = this.orbitRadius * Math.cos(phi); const z = this.orbitRadius * Math.sin(phi) * Math.cos(theta); this.camera.position.set( this.orbitPoint.x + x, this.orbitPoint.y + y, this.orbitPoint.z + z ); this.camera.lookAt(this.orbitPoint); } handleFocusObject() { if (this.isDevMode && this.scene.worldEditor && this.scene.worldEditor.selectedObject) { const selectedObject = this.scene.worldEditor.selectedObject; // Calculate the new orbit point (object's position) const newOrbitPoint = selectedObject.position.clone(); // Calculate the bounding sphere of the object const boundingSphere = new THREE.Box3().setFromObject(selectedObject).getBoundingSphere(new THREE.Sphere()); // Calculate the camera distance based on the object's size and field of view const fov = THREE.MathUtils.degToRad(this.camera.fov); const newOrbitRadius = boundingSphere.radius / Math.sin(fov / 2); // Store current camera rotation const currentRotation = this.camera.quaternion.clone(); // Create a tween for smooth transition const startPoint = this.orbitPoint.clone(); const startRadius = this.orbitRadius; this.tweenObject = { progress: 0, update: () => { this.tweenObject.progress += 0.02; // Adjust this value to change the speed of the transition if (this.tweenObject.progress > 1) { this.tweenObject = null; return; } // Interpolate orbit point and radius this.orbitPoint.lerpVectors(startPoint, newOrbitPoint, this.tweenObject.progress); this.orbitRadius = startRadius + (newOrbitRadius - startRadius) * this.tweenObject.progress; // Update camera position this.updateCameraPosition(); // Interpolate camera rotation this.camera.quaternion.slerp(currentRotation, 1 - this.tweenObject.progress); } }; console.log("Camera focused on selected object"); } } } // UI Class class UI { // The default Game UI - used for displaying elements in game mode. constructor(scene, camera, cube, cameraController, worldEditor) { this.scene = scene; this.camera = camera; this.cube = cube; this.cameraController = cameraController; this.worldEditor = worldEditor; this.uiContainer = null; this.init(); } init() { // Create UIkit container this.uiContainer = document.createElement('div'); this.uiContainer.id = 'uikit-container'; this.uiContainer.style.position = 'absolute'; this.uiContainer.style.top = '10px'; this.uiContainer.style.left = '10px'; this.uiContainer.style.zIndex = '1000'; this.uiContainer.style.maxWidth = '300px'; this.uiContainer.style.width = '25%'; this.uiContainer.style.border = '1px solid #4682B4'; document.body.appendChild(this.uiContainer); // Set pointer-events to none for the container this.uiContainer.style.pointerEvents = 'none'; // Create Devmode panel const devmodeHtml = `

Devmode

Enable Dev Mode

`; this.uiContainer.innerHTML = devmodeHtml; // Apply pointer-events: auto to specific interactive elements const interactiveElements = this.uiContainer.querySelectorAll('button, input, select, .uk-accordion-title'); interactiveElements.forEach(element => { element.style.pointerEvents = 'auto'; }); // Add event listeners const devmodeToggle = document.getElementById('devmode-toggle'); const launchWorldEditorBtn = document.getElementById('launch-world-editor'); const clearWorldBtn = document.getElementById('clear-world'); if (devmodeToggle) { devmodeToggle.addEventListener('change', (event) => { this.cameraController.isDevMode = event.target.checked; if (launchWorldEditorBtn) launchWorldEditorBtn.style.display = event.target.checked ? 'block' : 'none'; if (clearWorldBtn) clearWorldBtn.style.display = event.target.checked ? 'block' : 'none'; if (!event.target.checked) { this.worldEditor.hide(); } console.log(this.cameraController.isDevMode ? "Dev mode enabled" : "Dev mode disabled"); }); } if (launchWorldEditorBtn) { launchWorldEditorBtn.addEventListener('click', () => { if (this.worldEditor.isVisible) { this.worldEditor.hide(); launchWorldEditorBtn.textContent = 'Launch World Editor'; } else { this.worldEditor.show(); launchWorldEditorBtn.textContent = 'Close World Editor'; } }); } if (clearWorldBtn) { clearWorldBtn.addEventListener('click', () => { this.showClearWorldConfirmation(); }); } // Add key for toggling camera mode this.scene.input.keyboard.on('keydown-M', () => { this.cameraController.toggleMode(); if (devmodeToggle) devmodeToggle.checked = this.cameraController.isDevMode; if (launchWorldEditorBtn) launchWorldEditorBtn.style.display = this.cameraController.isDevMode ? 'block' : 'none'; if (clearWorldBtn) clearWorldBtn.style.display = this.cameraController.isDevMode ? 'block' : 'none'; if (!this.cameraController.isDevMode) { this.worldEditor.hide(); if (launchWorldEditorBtn) launchWorldEditorBtn.textContent = 'Launch World Editor'; } }); } update() { // Update UI if needed } showClearWorldConfirmation() { // Create a modal dialog const modal = document.createElement('div'); modal.innerHTML = ` `; // Add the modal to the document body document.body.appendChild(modal); // Create and show the modal const uiKitModal = UIkit.modal(modal); uiKitModal.show(); // Add event listener for the confirm button document.getElementById('confirm-clear-world').addEventListener('click', () => { this.worldEditor.clearWorld(); uiKitModal.hide(); }); // Remove the modal from the DOM when it's hidden modal.addEventListener('hidden', () => { document.body.removeChild(modal); }); } resize() { // Adjust UI based on window size if (window.innerWidth < 600) { this.uiContainer.style.width = '50%'; } else { this.uiContainer.style.width = '25%'; } } } // WorldEditor Class Related. class WorldEditor { constructor(scene, threeScene, camera, cube, world) { this.scene = scene; this.threeScene = threeScene; this.camera = camera; this.debugColours = { wireframe: 0xed9209, colliders: 0x03f2ff, rayCasts: 0xff0000 }; this.cube = cube; this.world = world; this.uiContainer = null; this.isVisible = false; this.selectedObject = null; this.defaultFloor = null; this.defaultCube = null; this.wireframeMaterial = new THREE.MeshBasicMaterial({ color: this.debugColours.wireframe, wireframe: true }); this.originalMaterials = new Map(); this.motionEditor = new MotionEditor(this); this.assetViewer = new AssetViewer(scene, threeScene, camera, this); this.ObjectEditor = new ObjectEditor(this, scene, threeScene, camera); this.settingsTab = new SettingsTab(scene, threeScene, camera, this); this.sceneTree = new SceneTree(this); this.dungeonGenerator = new DungeonGenerator(this, threeScene); // Move mode properties this.moveMode = false; this.moveAxis = null; this.movePlane = new THREE.Plane(); this.moveIntersection = new THREE.Vector3(); this.raycaster = new THREE.Raycaster(); this.mouse = new THREE.Vector2(); // Outline effect for highlighting this.outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), this.threeScene, this.camera); this.outlinePass.edgeStrength = 3; this.outlinePass.edgeGlow = 0; this.outlinePass.edgeThickness = 1; this.outlinePass.pulsePeriod = 0; this.outlinePass.visibleEdgeColor.set('#ffffff'); this.outlinePass.hiddenEdgeColor.set('#190a05'); this.createUIContainer(); // Use setTimeout to ensure the DOM is ready before initializing setTimeout(() => { this.init(); }, 0); this.setupPeriodicUpdate(); this.setupMoveControls(); } init() { // Create WorldEditor panel const worldEditorHtml = `

World Editor

Add Objects

`; this.uiContainer.innerHTML = worldEditorHtml; // Add the settings tab content const settingsTabContent = document.getElementById('settings-tab-content'); if (settingsTabContent) { settingsTabContent.appendChild(this.settingsTab.getPanel()); } const dungeonGeneratorTab = document.getElementById('dungeon-generator-tab'); if (dungeonGeneratorTab) { this.dungeonGenerator.createUI(dungeonGeneratorTab); } // Add event listeners const addCubeButton = document.getElementById('add-cube'); if (addCubeButton) { addCubeButton.addEventListener('click', () => this.addCube()); } const addSphereButton = document.getElementById('add-sphere'); if (addSphereButton) { addSphereButton.addEventListener('click', () => this.addSphere()); } const addCylinderButton = document.getElementById('add-cylinder'); if (addCylinderButton) { addCylinderButton.addEventListener('click', () => this.addCylinder()); } const addCircleButton = document.getElementById('add-circle'); if (addCircleButton) { addCircleButton.addEventListener('click', () => this.addCircle()); } const addPyramidButton = document.getElementById('add-pyramid'); if (addPyramidButton) { addPyramidButton.addEventListener('click', () => this.addPyramid()); } const addDirectionalLightButton = document.getElementById('add-directional-light'); if (addDirectionalLightButton) { addDirectionalLightButton.addEventListener('click', () => this.addDirectionalLight()); } const addAmbientLightButton = document.getElementById('add-ambient-light'); if (addAmbientLightButton) { addAmbientLightButton.addEventListener('click', () => this.addAmbientLight()); } const addSpotLightButton = document.getElementById('add-spot-light'); if (addSpotLightButton) { addSpotLightButton.addEventListener('click', () => this.addSpotLight()); } const addPointLightButton = document.getElementById('add-point-light'); if (addPointLightButton) { addPointLightButton.addEventListener('click', () => this.addPointLight()); } const addAssetButton = document.getElementById('add-asset'); if (addAssetButton) { addAssetButton.addEventListener('click', () => this.assetViewer.show()); } // Initial update of the scene tree this.updateSceneTree(); // Add CSS for hover effect const style = document.createElement('style'); style.textContent = ` .uk-accordion-title:hover { background-color: #add8e6 !important; color: #000000 !important; } `; document.head.appendChild(style); } setupPeriodicUpdate() { // Update the scene tree every second setInterval(() => { if (this.isVisible) { this.updateSceneTree(); } }, 1000); } createUIContainer() { // Create WorldEditor container this.uiContainer = document.createElement('div'); this.uiContainer.id = 'world-editor-container'; this.uiContainer.style.position = 'absolute'; this.uiContainer.style.top = '10px'; this.uiContainer.style.right = '10px'; this.uiContainer.style.zIndex = '1000'; this.uiContainer.style.maxWidth = '300px'; this.uiContainer.style.width = '25%'; this.uiContainer.style.display = 'none'; this.uiContainer.style.border = '1px solid #4682B4'; document.body.appendChild(this.uiContainer); } createFresnelMaterial() { const fresnelShader = { uniforms: { color: { value: new THREE.Color(0xffff00) }, power: { value: 1.0 }, intensity: { value: 0.8 } }, vertexShader: ` varying vec3 vNormal; varying vec3 vViewPosition; void main() { vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_Position = projectionMatrix * mvPosition; vNormal = normalize(normalMatrix * normal); vViewPosition = -mvPosition.xyz; } `, fragmentShader: ` uniform vec3 color; uniform float power; uniform float intensity; varying vec3 vNormal; varying vec3 vViewPosition; void main() { vec3 normal = normalize(vNormal); vec3 viewDir = normalize(vViewPosition); float fresnel = pow(1.0 - clamp(dot(normal, viewDir), 0.0, 1.0), power); gl_FragColor = vec4(color, fresnel * intensity); } ` }; return new THREE.ShaderMaterial({ uniforms: fresnelShader.uniforms, vertexShader: fresnelShader.vertexShader, fragmentShader: fresnelShader.fragmentShader, transparent: true, side: THREE.FrontSide, blending: THREE.AdditiveBlending }); } show() { this.isVisible = true; this.uiContainer.style.display = 'block'; this.updateSceneTree(); } hide() { this.isVisible = false; this.uiContainer.style.display = 'none'; this.ObjectEditor.hidePanel(); this.clearHighlight(); } updateSceneTree() { this.sceneTree.update(); } selectObject(objectId) { this.clearHighlight(); const object = this.threeScene.getObjectByProperty('name', objectId) || this.threeScene.getObjectById(objectId); if (object) { this.selectedObject = object; this.ObjectEditor.updatePanel(object); this.updateSceneTree(); // Apply outline effect to the selected object this.highlightObject(object); } } highlightObject(object) { this.outlinePass.selectedObjects = [object]; } clearHighlight() { this.outlinePass.selectedObjects = []; } update() { if (this.isVisible) { this.settingsTab.update(); } } setupMoveControls() { this.scene.input.keyboard.on('keydown-G', () => { if (this.selectedObject && this.isVisible) { this.moveMode = !this.moveMode; if (this.moveMode) { console.log('Move mode activated'); this.scene.input.on('pointermove', this.handleMove, this); this.scene.input.on('pointerdown', this.endMove, this); } else { console.log('Move mode deactivated'); this.scene.input.off('pointermove', this.handleMove, this); this.scene.input.off('pointerdown', this.endMove, this); } } }); this.scene.input.keyboard.on('keydown-X', () => { if (this.moveMode) this.moveAxis = 'x'; }); this.scene.input.keyboard.on('keydown-Y', () => { if (this.moveMode) this.moveAxis = 'y'; }); this.scene.input.keyboard.on('keydown-Z', () => { if (this.moveMode) this.moveAxis = 'z'; }); } handleMove(pointer) { if (!this.moveMode || !this.selectedObject) return; // Convert pointer position to normalized device coordinates this.mouse.x = (pointer.x / this.scene.scale.width) * 2 - 1; this.mouse.y = -(pointer.y / this.scene.scale.height) * 2 + 1; this.raycaster.setFromCamera(this.mouse, this.camera); if (this.moveAxis) { // Move along a specific axis const axisVector = new THREE.Vector3(); axisVector[this.moveAxis] = 1; const startPoint = this.selectedObject.position.clone(); const endPoint = startPoint.clone().add(axisVector); const line = new THREE.Line3(startPoint, endPoint); const closestPoint = new THREE.Vector3(); this.raycaster.ray.closestPointToPoint(startPoint, closestPoint); line.closestPointToPoint(closestPoint, true, this.moveIntersection); } else { // Move on a plane perpendicular to the camera this.movePlane.setFromNormalAndCoplanarPoint(this.camera.getWorldDirection(this.movePlane.normal), this.selectedObject.position); this.raycaster.ray.intersectPlane(this.movePlane, this.moveIntersection); } this.selectedObject.position.copy(this.moveIntersection); this.ObjectEditor.updatePanel(this.selectedObject); } endMove() { if (this.moveMode && this.selectedObject) { this.moveMode = false; this.moveAxis = null; this.scene.input.off('pointermove', this.handleMove, this); this.scene.input.off('pointerdown', this.endMove, this); this.world.updateObject(this.selectedObject.name, { position: this.selectedObject.position.toArray() }); console.log('Move mode ended, position saved'); } } resize() { // Adjust UI based on window size if (window.innerWidth < 600) { this.uiContainer.style.width = '50%'; } else { this.uiContainer.style.width = '25%'; } this.ObjectEditor.resize(); } clearWorld() { // Remove all objects from the scene except lights and camera for (let i = this.threeScene.children.length - 1; i >= 0; i--) { const child = this.threeScene.children[i]; if (child.type !== 'Camera' && child.type !== 'Light') { this.threeScene.remove(child); } } // Clear the world's object list this.world.clearObjects(); // Add default floor this.addDefaultFloor(); // Add default cube this.addDefaultCube(); // Update the scene tree this.updateSceneTree(); // Clear selected object this.selectedObject = null; this.ObjectEditor.hidePanel(); console.log('World cleared, default floor and cube added, lights ensured'); } deleteSelectedObject() { if (this.selectedObject) { const objectName = this.selectedObject.name; // Remove the object from the scene this.removeObjectAndChildren(this.selectedObject); // Remove the object from the world this.world.removeObject(objectName); // Find and remove the object from the world.objects dictionary for (let key in this.world.objects) { if (this.world.objects[key].name === objectName) { delete this.world.objects[key]; break; } } // Clear the selected object this.selectedObject = null; this.clearHighlight(); // Hide the selected object panel this.ObjectEditor.hidePanel(); // Update the scene tree this.updateSceneTree(); console.log(`Object ${objectName} deleted from scene and world.objects`); } else { console.warn("No object selected for deletion"); } } removeObjectAndChildren(object) { // Remove all children recursively while (object.children.length > 0) { this.removeObjectAndChildren(object.children[0]); } // Remove the object from its parent if (object.parent) { object.parent.remove(object); } // If the object has a geometry, dispose of it if (object.geometry) { object.geometry.dispose(); } // If the object has a material, dispose of it if (object.material) { if (Array.isArray(object.material)) { object.material.forEach(material => material.dispose()); } else { object.material.dispose(); } } } // Add Objects: addDefaultCube() { const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); this.defaultCube =new THREE.Mesh(geometry, material); this.defaultCube.position.set(0, 0, 0); this.defaultCube.castShadow = true; this.defaultCube.receiveShadow = true; this.threeScene.add(this.defaultCube); const objectId = this.world.addObject(this.defaultCube); this.defaultCube.name = `DefaultCube_${objectId}`; } addPyramid() { const geometry = new THREE.ConeGeometry(1, 1, 4); const material = new THREE.MeshPhongMaterial({ color: 0xffffff * Math.random() }); const pyramid = new THREE.Mesh(geometry, material); pyramid.position.set( Math.random() * 4 - 2, Math.random() * 4 - 2, Math.random() * 4 - 2 ); pyramid.castShadow = true; pyramid.receiveShadow = true; this.threeScene.add(pyramid); const objectId = this.world.addObject(pyramid); pyramid.name = `Pyramid_${objectId}`; this.updateSceneTree(); this.selectObject(pyramid.name); } addCylinder() { const geometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32); const material = new THREE.MeshPhongMaterial({ color: 0xffffff * Math.random() }); const cylinder = new THREE.Mesh(geometry, material); cylinder.position.set( Math.random() * 4 - 2, Math.random() * 4 - 2, Math.random() * 4 - 2 ); cylinder.castShadow = true; cylinder.receiveShadow = true; this.threeScene.add(cylinder); const objectId = this.world.addObject(cylinder); cylinder.name = `Cylinder_${objectId}`; this.updateSceneTree(); this.selectObject(cylinder.name); } addCircle() { const geometry = new THREE.CircleGeometry(0.5, 32); const material = new THREE.MeshPhongMaterial({ color: 0xffffff * Math.random(), side: THREE.DoubleSide }); const circle = new THREE.Mesh(geometry, material); circle.position.set( Math.random() * 4 - 2, Math.random() * 4 - 2, Math.random() * 4 - 2 ); circle.castShadow = true; circle.receiveShadow = true; this.threeScene.add(circle); const objectId = this.world.addObject(circle); circle.name = `Circle_${objectId}`; this.updateSceneTree(); this.selectObject(circle.name); } addCube() { const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshPhongMaterial({ color: 0xffffff * Math.random() }); const cube = new THREE.Mesh(geometry, material); cube.position.set( Math.random() * 4 - 2, Math.random() * 4 - 2, Math.random() * 4 - 2 ); cube.castShadow = true; cube.receiveShadow = true; this.threeScene.add(cube); const objectId = this.world.addObject(cube); cube.name = `Cube_${objectId}`; this.updateSceneTree(); this.selectObject(cube.name); } addSphere() { const geometry = new THREE.SphereGeometry(0.5, 32, 32); const material = new THREE.MeshPhongMaterial({ color: 0xffffff * Math.random() }); const sphere = new THREE.Mesh(geometry, material); sphere.position.set( Math.random() * 4 - 2, Math.random() * 4 - 2, Math.random() * 4 - 2 ); sphere.castShadow = true; sphere.receiveShadow = true; this.threeScene.add(sphere); const objectId = this.world.addObject(sphere); sphere.name = `Sphere_${objectId}`; this.updateSceneTree(); this.selectObject(sphere.name); } addDefaultFloor() { const floorGeometry = new THREE.PlaneGeometry(10, 10); const floorMaterial = new THREE.MeshPhongMaterial({ color: 0xcccccc, side: THREE.DoubleSide }); this.defaultFloor = new THREE.Mesh(floorGeometry, floorMaterial); this.defaultFloor.rotation.x = Math.PI / 2; this.defaultFloor.position.y = -2; this.defaultFloor.receiveShadow = true; this.threeScene.add(this.defaultFloor); const objectId = this.world.addObject(this.defaultFloor); this.defaultFloor.name = `DefaultFloor_${objectId}`; } addDirectionalLight() { const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(5, 10, 7.5); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 1024; directionalLight.shadow.mapSize.height = 1024; directionalLight.shadow.camera.near = 1; directionalLight.shadow.camera.far = 20; this.threeScene.add(directionalLight); const objectId = this.world.addObject(directionalLight); directionalLight.name = `DirectionalLight_${objectId}`; this.updateSceneTree(); this.selectObject(directionalLight.name); } addAmbientLight() { const ambientLight = new THREE.AmbientLight(0x404040, 0.5); this.threeScene.add(ambientLight); const objectId = this.world.addObject(ambientLight); ambientLight.name = `AmbientLight_${objectId}`; this.updateSceneTree(); this.selectObject(ambientLight.name); } addSpotLight() { const spotLight = new THREE.SpotLight(0xffffff, 1); spotLight.position.set(0, 5, 0); spotLight.angle = Math.PI / 4; spotLight.penumbra = 0.1; spotLight.decay = 2; spotLight.distance = 200; spotLight.castShadow = true; spotLight.shadow.mapSize.width = 512; spotLight.shadow.mapSize.height = 512; spotLight.shadow.camera.near = 1; spotLight.shadow.camera.far = 200; this.threeScene.add(spotLight); const objectId = this.world.addObject(spotLight); spotLight.name = `SpotLight_${objectId}`; this.updateSceneTree(); this.selectObject(spotLight.name); } addPointLight() { const pointLight = new THREE.PointLight(0xffffff, 1, 100); pointLight.position.set(0, 5, 0); pointLight.castShadow = true; this.threeScene.add(pointLight); const objectId = this.world.addObject(pointLight); pointLight.name = `PointLight_${objectId}`; this.updateSceneTree(); this.selectObject(pointLight.name); } } class ObjectEditor { constructor(worldEditor, scene, threeScene, camera) { this.worldEditor = worldEditor; this.scene = scene; this.threeScene = threeScene; this.camera = camera; this.panel = null; this.selectedObject = null; this.materialEditor = new MaterialEditor(worldEditor); this.initPanel(); } initPanel() { this.panel = document.createElement('div'); this.panel.id = 'selected-object-panel'; this.panel.style.position = 'absolute'; this.panel.style.left = '10px'; this.panel.style.zIndex = '1001'; this.panel.style.maxWidth = '300px'; this.panel.style.width = '25%'; this.panel.style.border = '1px solid #4682B4'; this.panel.style.display = 'none'; document.body.appendChild(this.panel); } updatePanel(object) { if (object && this.worldEditor.isVisible) { this.selectedObject = object; this.panel.style.display = 'block'; this.panel.innerHTML = `

Selected Object: ${object.name}

`; this.updateInfo(this.panel.querySelector('#selected-object-info')); this.updatePanelPosition(); // Add event listener for delete button document.getElementById('delete-object').addEventListener('click', () => this.worldEditor.deleteSelectedObject()); } else { this.hidePanel(); } } updateInfo(container) { if (this.selectedObject && container) { const objectData = this.worldEditor.world.objects[this.selectedObject.name]; let infoHtml = `

Object Name
Transforms

Position

X:

Y:

Z:

Rotation

X:

Y:

Z:

Scale

X:

Y:

Z:
Material

`; infoHtml += `

Rendering

Cast Shadow:

Receive Shadow:

`; container.innerHTML = infoHtml; // Add material editor this.materialEditor.createMaterialPanel(document.getElementById('material-editor-container'), this.selectedObject); // Add motion editor this.worldEditor.motionEditor.createMotionPanel(document.getElementById('motion-editor-container')); // Add event listeners for input fields this.addInputListeners('object', 'x', 'y', 'z', (axis, value) => { this.selectedObject.position[axis] = parseFloat(value); this.worldEditor.world.updateObject(this.selectedObject.name, { position: this.selectedObject.position.toArray() }); }); this.addInputListeners('object-rotation', 'x', 'y', 'z', (axis, value) => { this.selectedObject.rotation[axis] = parseFloat(value); this.worldEditor.world.updateObject(this.selectedObject.name, { rotation: this.selectedObject.rotation.toArray() }); }); this.addInputListeners('object-scale', 'x', 'y', 'z', (axis, value) => { this.selectedObject.scale[axis] = parseFloat(value); this.worldEditor.world.updateObject(this.selectedObject.name, { scale: this.selectedObject.scale.toArray() }); }); // Add event listeners for checkboxes document.getElementById('object-cast-shadow').addEventListener('change', (event) => { this.selectedObject.castShadow = event.target.checked; this.worldEditor.world.updateObject(this.selectedObject.name, { castShadow: event.target.checked }); }); document.getElementById('object-receive-shadow').addEventListener('change', (event) => { this.selectedObject.receiveShadow = event.target.checked; this.worldEditor.world.updateObject(this.selectedObject.name, { receiveShadow: event.target.checked }); }); // Add event listener for object name update document.getElementById('update-object-name').addEventListener('click', () => { const newName = document.getElementById('object-name').value; this.updateObjectName(newName); }); const materialEditorContainer = container.querySelector('#material-editor-container'); if (materialEditorContainer) { this.materialEditor.createMaterialPanel(materialEditorContainer, this.selectedObject); } // Add event listener for motion type changes const motionTypeSelect = document.getElementById('motion-type'); if (motionTypeSelect) { motionTypeSelect.addEventListener('change', (event) => { const motionType = event.target.value; const motionParameters = this.getMotionParameters(motionType); this.worldEditor.motionEditor.applyMotion(this.selectedObject, motionType, motionParameters); const motionData = this.worldEditor.motionEditor.saveMotionData(this.selectedObject); this.worldEditor.world.updateObject(this.selectedObject.name, { motion: motionData }); console.log('Motion updated:', motionData); // Add this line for debugging }); } } } getMotionParameters(motionType) { const parameters = {}; switch (motionType) { case 'Linear': parameters.speed = parseFloat(document.getElementById('linear-speed').value); parameters.direction = new THREE.Vector3( parseFloat(document.getElementById('linear-direction-x').value), parseFloat(document.getElementById('linear-direction-y').value), parseFloat(document.getElementById('linear-direction-z').value) ); parameters.travelDistance = parseFloat(document.getElementById('linear-travel-distance').value); break; case 'Circular': parameters.radius = parseFloat(document.getElementById('circular-radius').value); parameters.speed = parseFloat(document.getElementById('circular-speed').value); parameters.axis = document.getElementById('circular-axis').value; break; case 'Oscillation': parameters.amplitude = parseFloat(document.getElementById('oscillation-amplitude').value); parameters.frequency = parseFloat(document.getElementById('oscillation-frequency').value); parameters.axis = document.getElementById('oscillation-axis').value; break; case 'Elevator': parameters.height = parseFloat(document.getElementById('elevator-height').value); parameters.speed = parseFloat(document.getElementById('elevator-speed').value); parameters.pauseTime = parseFloat(document.getElementById('elevator-pause-time').value); parameters.startDirection = document.getElementById('elevator-start-direction').value; break; } return parameters; } hidePanel() { if (this.panel) { this.panel.style.display = 'none'; } } updatePanelPosition() { const devmodePanel = document.getElementById('uikit-container'); if (devmodePanel) { const devmodePanelRect = devmodePanel.getBoundingClientRect(); this.panel.style.top = `${devmodePanelRect.bottom + 10}px`; } } addInputListeners(prefix, ...axes) { const callback = axes.pop(); axes.forEach(axis => { const element = document.getElementById(`${prefix}-${axis}`); if (element) { element.addEventListener('input', (event) => { callback(axis, event.target.value); }); } }); } updateObjectName(newName) { if (this.selectedObject) { const oldName = this.selectedObject.name; // Update the object's name this.selectedObject.name = newName; // Update the world object this.worldEditor.world.updateObjectName(oldName, newName); // Update the scene tree this.worldEditor.updateSceneTree(); // Update the selected object panel this.updatePanel(this.selectedObject); console.log(`Object name updated from ${oldName} to ${newName}`); } } resize() { // Adjust UI based on window size if (window.innerWidth < 600) { this.panel.style.width = '50%'; } else { this.panel.style.width = '25%'; } this.updatePanelPosition(); } } class SettingsTab { constructor(scene, threeScene, camera, worldEditor) { this.scene = scene; this.threeScene = threeScene; this.camera = camera; this.worldEditor = worldEditor; this.settingsPanel = null; this.createSettingsPanel(); } createSettingsPanel() { this.settingsPanel = document.createElement('div'); this.settingsPanel.innerHTML = `

Settings

Camera Settings

Position

X:

Y:

Z:

Rotation

X:

Y:

Z:

FOV

75
Scene Settings

Background Color:

`; // Add event listeners after the DOM elements are created this.addEventListeners(); } addEventListeners() { const cameraX = this.settingsPanel.querySelector('#camera-x'); const cameraY = this.settingsPanel.querySelector('#camera-y'); const cameraZ = this.settingsPanel.querySelector('#camera-z'); [cameraX, cameraY, cameraZ].forEach((input, index) => { if (input) { input.addEventListener('change', (event) => { this.camera.position[['x', 'y', 'z'][index]] = parseFloat(event.target.value); this.worldEditor.cameraController.updateCameraPosition(); }); } }); const cameraRotationX = this.settingsPanel.querySelector('#camera-rotation-x'); const cameraRotationY = this.settingsPanel.querySelector('#camera-rotation-y'); const cameraRotationZ = this.settingsPanel.querySelector('#camera-rotation-z'); [cameraRotationX, cameraRotationY, cameraRotationZ].forEach((input, index) => { if (input) { input.addEventListener('change', (event) => { this.camera.rotation[['x', 'y', 'z'][index]] = parseFloat(event.target.value); this.camera.updateProjectionMatrix(); }); } }); const fovSlider = this.settingsPanel.querySelector('#camera-fov'); const fovValue = this.settingsPanel.querySelector('#fov-value'); if (fovSlider && fovValue) { fovSlider.addEventListener('input', (event) => { const fov = parseInt(event.target.value); this.camera.fov = fov; this.camera.updateProjectionMatrix(); fovValue.textContent = fov; }); } const backgroundColorInput = this.settingsPanel.querySelector('#background-color'); if (backgroundColorInput) { backgroundColorInput.addEventListener('change', (event) => { this.changeBackgroundColor(event.target.value); }); } } changeBackgroundColor(color) { this.threeScene.background = new THREE.Color(color); } update() { const cameraX = this.settingsPanel.querySelector('#camera-x'); const cameraY = this.settingsPanel.querySelector('#camera-y'); const cameraZ = this.settingsPanel.querySelector('#camera-z'); const cameraRotationX = this.settingsPanel.querySelector('#camera-rotation-x'); const cameraRotationY = this.settingsPanel.querySelector('#camera-rotation-y'); const cameraRotationZ = this.settingsPanel.querySelector('#camera-rotation-z'); const cameraFov = this.settingsPanel.querySelector('#camera-fov'); const fovValue = this.settingsPanel.querySelector('#fov-value'); if (cameraX && cameraY && cameraZ) { cameraX.value = this.camera.position.x.toFixed(2); cameraY.value = this.camera.position.y.toFixed(2); cameraZ.value = this.camera.position.z.toFixed(2); } if (cameraRotationX && cameraRotationY && cameraRotationZ) { cameraRotationX.value = this.camera.rotation.x.toFixed(2); cameraRotationY.value = this.camera.rotation.y.toFixed(2); cameraRotationZ.value = this.camera.rotation.z.toFixed(2); } if (cameraFov && fovValue) { cameraFov.value = this.camera.fov; fovValue.textContent = this.camera.fov; } } getPanel() { return this.settingsPanel; } } class MotionEditor { constructor(worldEditor) { this.worldEditor = worldEditor; this.motionTypes = { 'None': null, 'Linear': this.linearMotion, 'Circular': this.circularMotion, 'Oscillation': this.oscillationMotion, 'Elevator': this.elevatorMotion }; } createMotionPanel(container) { const motionPanel = document.createElement('div'); motionPanel.innerHTML = `

Motion

Type:

`; container.appendChild(motionPanel); const motionTypeSelect = document.getElementById('motion-type'); motionTypeSelect.addEventListener('change', () => this.updateMotionParameters(motionTypeSelect.value)); // Set initial motion type if exists if (this.worldEditor.selectedObject && this.worldEditor.selectedObject.motion) { motionTypeSelect.value = this.worldEditor.selectedObject.motion.type; this.updateMotionParameters(this.worldEditor.selectedObject.motion.type); } } updateMotionParameters(motionType) { const parametersContainer = document.getElementById('motion-parameters'); parametersContainer.innerHTML = ''; switch (motionType) { case 'Linear': this.createLinearMotionInputs(parametersContainer); break; case 'Circular': this.createCircularMotionInputs(parametersContainer); break; case 'Oscillation': this.createOscillationMotionInputs(parametersContainer); break; case 'Elevator': this.createElevatorMotionInputs(parametersContainer); break; } // Add event listeners to the new inputs this.addMotionInputListeners(motionType); // Set initial values if motion exists if (this.worldEditor.selectedObject && this.worldEditor.selectedObject.motion) { this.setInitialMotionValues(motionType); } } createLinearMotionInputs(container) { container.innerHTML = `

Speed:

Direction:

Travel Distance:

`; } createCircularMotionInputs(container) { container.innerHTML = `

Radius:

Speed:

Axis:

`; } createOscillationMotionInputs(container) { container.innerHTML = `

Amplitude:

Frequency:

Axis:

`; } createElevatorMotionInputs(container) { container.innerHTML = `

Height:

Speed:

Pause Time:

Start Direction:

`; } addMotionInputListeners(motionType) { const inputs = document.querySelectorAll('#motion-parameters input, #motion-parameters select'); inputs.forEach(input => { input.addEventListener('change', () => { this.updateObjectMotion(motionType); }); }); } setInitialMotionValues(motionType) { const motion = this.worldEditor.selectedObject.motion; if (!motion || motion.type !== motionType) return; switch (motionType) { case 'Linear': document.getElementById('linear-speed').value = motion.parameters.speed; document.getElementById('linear-direction-x').value = motion.parameters.direction.x; document.getElementById('linear-direction-y').value = motion.parameters.direction.y; document.getElementById('linear-direction-z').value = motion.parameters.direction.z; document.getElementById('linear-travel-distance').value = motion.parameters.travelDistance; break; case 'Circular': document.getElementById('circular-radius').value = motion.parameters.radius; document.getElementById('circular-speed').value = motion.parameters.speed; document.getElementById('circular-axis').value = motion.parameters.axis; break; case 'Oscillation': document.getElementById('oscillation-amplitude').value = motion.parameters.amplitude; document.getElementById('oscillation-frequency').value = motion.parameters.frequency; document.getElementById('oscillation-axis').value = motion.parameters.axis; break; case 'Elevator': document.getElementById('elevator-height').value = motion.parameters.height; document.getElementById('elevator-speed').value = motion.parameters.speed; document.getElementById('elevator-pause-time').value = motion.parameters.pauseTime; document.getElementById('elevator-start-direction').value = motion.parameters.startDirection; break; } } updateObjectMotion(motionType) { const selectedObject = this.worldEditor.selectedObject; if (!selectedObject) return; const motionParameters = this.getMotionParameters(motionType); this.applyMotion(selectedObject, motionType, motionParameters); // Update the motion type in the UI const motionTypeSelect = document.getElementById('motion-type'); if (motionTypeSelect) { motionTypeSelect.value = motionType; } // Log the saved motion data console.log(`Motion data updated for object ${selectedObject.name}:`); console.log(` Motion Type: ${motionType}`); console.log(` Parameters:`, JSON.stringify(motionParameters, null, 2)); } getMotionParameters(motionType) { const parameters = {}; switch (motionType) { case 'Linear': parameters.speed = parseFloat(document.getElementById('linear-speed').value); parameters.direction = new THREE.Vector3( parseFloat(document.getElementById('linear-direction-x').value), parseFloat(document.getElementById('linear-direction-y').value), parseFloat(document.getElementById('linear-direction-z').value) ); parameters.travelDistance = parseFloat(document.getElementById('linear-travel-distance').value); break; case 'Circular': parameters.radius = parseFloat(document.getElementById('circular-radius').value); parameters.speed = parseFloat(document.getElementById('circular-speed').value); parameters.axis = document.getElementById('circular-axis').value; break; case 'Oscillation': parameters.amplitude = parseFloat(document.getElementById('oscillation-amplitude').value); parameters.frequency = parseFloat(document.getElementById('oscillation-frequency').value); parameters.axis = document.getElementById('oscillation-axis').value; break; case 'Elevator': parameters.height = parseFloat(document.getElementById('elevator-height').value); parameters.speed = parseFloat(document.getElementById('elevator-speed').value); parameters.pauseTime = parseFloat(document.getElementById('elevator-pause-time').value); parameters.startDirection = document.getElementById('elevator-start-direction').value; break; } return parameters; } applyMotion(object, motionType, parameters) { // Reset object to its default position if (object.userData.defaultPosition) { object.position.copy(object.userData.defaultPosition); } if (motionType === 'None') { // Reset to default position and remove motion object.motion = null; } else { const motionFunction = this.motionTypes[motionType]; if (motionFunction) { object.motion = { type: motionType, parameters: parameters, update: (delta) => motionFunction(object, parameters, delta), initialPosition: object.position.clone() }; } } // Update the object in the world this.worldEditor.world.updateObject(object.name, { motion: this.saveMotionData(object), position: object.position.toArray() }); } linearMotion(object, parameters, delta) { const speed = parameters.speed * delta; const direction = new THREE.Vector3(parameters.direction.x, parameters.direction.y, parameters.direction.z).normalize(); const displacement = direction.multiplyScalar(speed); // Calculate total distance traveled if (!object.motion.totalDistance) { object.motion.totalDistance = 0; } object.motion.totalDistance += displacement.length(); // Check if the object has traveled the specified distance if (object.motion.totalDistance >= parameters.travelDistance) { // Reset position and make invisible object.position.copy(object.userData.defaultPosition); object.visible = false; object.motion.totalDistance = 0; // Set a timeout to make the object visible again setTimeout(() => { object.visible = true; }, 0); // You can adjust this delay if needed } else { // Update position object.position.add(displacement); } } circularMotion(object, parameters, delta) { const angle = (object.motion.currentAngle || 0) + parameters.speed * delta; object.motion.currentAngle = angle; const radius = parameters.radius; const displacement = new THREE.Vector3(); switch (parameters.axis) { case 'x': displacement.set(0, Math.cos(angle) * radius, Math.sin(angle) * radius); break; case 'y': displacement.set(Math.cos(angle) * radius, 0, Math.sin(angle) * radius); break; case 'z': displacement.set(Math.cos(angle) * radius, Math.sin(angle) * radius, 0); break; } object.position.copy(object.userData.defaultPosition).add(displacement); } oscillationMotion(object, parameters, delta) { const time = (object.motion.time || 0) + delta; object.motion.time = time; const displacement = Math.sin(time * parameters.frequency) * parameters.amplitude; const oscillationDisplacement = new THREE.Vector3(); switch (parameters.axis) { case 'x': oscillationDisplacement.set(displacement, 0, 0); break; case 'y': oscillationDisplacement.set(0, displacement, 0); break; case 'z': oscillationDisplacement.set(0, 0, displacement); break; } object.position.copy(object.userData.defaultPosition).add(oscillationDisplacement); } elevatorMotion(object, parameters, delta) { if (!object || !object.position) { console.error('Invalid object for elevator motion'); return; } if (!object.motion) { console.error('Motion data not initialized for elevator motion'); return; } if (!object.motion.elevatorState) { object.motion.elevatorState = { currentHeight: 0, isRising: parameters.startDirection === 'rising', pauseTimer: 0 }; } const state = object.motion.elevatorState; const speed = parameters.speed * delta; if (state.pauseTimer > 0) { state.pauseTimer -= delta; return; } if (state.isRising) { state.currentHeight += speed; if (state.currentHeight >= parameters.height) { state.currentHeight = parameters.height; state.isRising = false; state.pauseTimer = parameters.pauseTime; } } else { state.currentHeight -= speed; if (state.currentHeight <= 0) { state.currentHeight = 0; state.isRising = true; state.pauseTimer = parameters.pauseTime; } } if (!object.userData.defaultPosition) { console.warn('Default position not set for elevator motion. Using current position.'); object.userData.defaultPosition = object.position.clone(); } const elevatorDisplacement = new THREE.Vector3(0, state.currentHeight, 0); object.position.copy(object.userData.defaultPosition).add(elevatorDisplacement); } saveMotionData(object) { if (object.motion) { return { type: object.motion.type, parameters: object.motion.parameters, initialPosition: object.motion.initialPosition ? object.motion.initialPosition.toArray() : null, elevatorState: object.motion.elevatorState }; } return null; } loadMotionData(object, motionData) { if (motionData) { this.applyMotion(object, motionData.type, motionData.parameters); if (motionData.initialPosition) { object.motion.initialPosition = new THREE.Vector3().fromArray(motionData.initialPosition); } if (motionData.elevatorState) { object.motion.elevatorState = motionData.elevatorState; } // Update the motion type in the UI const motionTypeSelect = document.getElementById('motion-type'); if (motionTypeSelect) { motionTypeSelect.value = motionData.type; } // Update motion parameters in the UI this.updateMotionParameters(motionData.type); this.setInitialMotionValues(motionData.type); // Log the loaded motion data console.log(`Motion data loaded for object ${object.name}:`); console.log(` Motion Type: ${motionData.type}`); console.log(` Parameters:`, JSON.stringify(motionData.parameters, null, 2)); } } } class SceneTree { constructor(worldEditor) { this.worldEditor = worldEditor; this.container = document.getElementById('scene-tree'); } update() { if (this.container) { this.container.innerHTML = ''; // Clear existing content const sceneUl = document.createElement('ul'); sceneUl.style.listStyleType = 'none'; sceneUl.style.paddingLeft = '10px'; const sceneItem = document.createElement('li'); sceneItem.textContent = 'Scene'; sceneItem.style.color = '#ffffff'; sceneUl.appendChild(sceneItem); const objectsUl = document.createElement('ul'); objectsUl.style.listStyleType = 'none'; objectsUl.style.paddingLeft = '10px'; // Use worldObjects from the World class Object.entries(this.worldEditor.world.objects).forEach(([objectId, objectData]) => { const objectItem = document.createElement('li'); const objectName = objectData.name || `${objectData.type}_${objectId}`; objectItem.textContent = `${objectName} (${objectData.type})`; objectItem.style.color = '#cccccc'; objectItem.style.cursor = 'pointer'; objectItem.onclick = () => this.worldEditor.selectObject(objectName); if (this.worldEditor.selectedObject && this.worldEditor.selectedObject.name === objectName) { objectItem.style.color = '#FFA500'; // Highlight in orange objectItem.style.fontWeight = 'bold'; } objectsUl.appendChild(objectItem); }); sceneUl.appendChild(objectsUl); this.container.appendChild(sceneUl); } } } class WorldObject{ constructor(){ this.id = null; this.type = null; this.properties = { material: { hasMaterial: null, type: null, modulationColour: 0xffffff, }, materialType: null, motion: {hasMotion: null} } } } class World { constructor(scene, threeScene) { this.scene = scene; this.threeScene = threeScene; this.objects = {}; this.nextObjectId = 1; this.saveInterval = null; this.logInterval = null; // Start the automatic saving this.startAutoSave(); // Start the logging this.startLogging(); } startAutoSave() { this.saveInterval = setInterval(() => { this.saveObjects(); }, 50); // Save every 50 ms } stopAutoSave() { if (this.saveInterval) { clearInterval(this.saveInterval); } } startLogging() { this.logInterval = setInterval(() => { this.logObjectProperties(); }, 30000); // Log every 30 seconds } stopLogging() { if (this.logInterval) { clearInterval(this.logInterval); } } logObjectProperties() { console.groupCollapsed(`World Objects Log (Total objects: ${Object.keys(this.objects).length})`); console.log(`Total objects: ${Object.keys(this.objects).length}`); Object.entries(this.objects).forEach(([objectId, objectData]) => { console.log(`Object ID: ${objectId}`); console.log(` Name: ${objectData.name}`); console.log(` Type: ${objectData.type}`); console.log(` Position: ${JSON.stringify(objectData.position)}`); console.log(` Rotation: ${JSON.stringify(objectData.rotation)}`); console.log(` Scale: ${JSON.stringify(objectData.scale)}`); if (objectData.motion) { console.log(` Motion: ${objectData.motion.type}`); console.log(` Motion Parameters: ${JSON.stringify(objectData.motion.parameters)}`); } else { console.log(` Motion: None`); } }); console.groupEnd(); } addObject(object) { const objectId = `${this.nextObjectId++}`; this.objects[objectId] = this.serializeObject(object); this.objects[objectId].id = objectId; this.objects[objectId].name = object.name || `Object_${objectId}`; // Add the object to the Three.js scene this.threeScene.add(object); return objectId; } serializeObject(object) { const serialized = { type: object.type, name: object.name || `Object_${this.nextObjectId}`, position: object.position.toArray(), rotation: object.rotation.toArray(), scale: object.scale.toArray(), castShadow: object.castShadow, receiveShadow: object.receiveShadow, defaultPosition: object.userData.defaultPosition ? object.userData.defaultPosition.toArray() : object.position.toArray() }; // Serialize motion data if (object.motion) { serialized.motion = { type: object.motion.type, parameters: JSON.parse(JSON.stringify(object.motion.parameters)), // Deep copy initialPosition: object.motion.initialPosition ? object.motion.initialPosition.toArray() : null, elevatorState: object.motion.elevatorState ? JSON.parse(JSON.stringify(object.motion.elevatorState)) : null }; } if (object.isLight) { serialized.lightColor = object.color.getHex(); serialized.intensity = object.intensity; if (object.type === 'SpotLight' || object.type === 'PointLight') { serialized.distance = object.distance; } if (object.type === 'SpotLight') { serialized.angle = object.angle; serialized.penumbra = object.penumbra; serialized.decay = object.decay; } } else if (object.isMesh) { serialized.geometryType = object.geometry.type; serialized.geometryParameters = this.serializeGeometry(object.geometry); serialized.materialType = object.material.type; serialized.color = object.material.color.getHex(); } if (object.isAsset) { serialized.isAsset = true; serialized.assetPath = object.userData.assetPath; } return serialized; } serializeGeometry(geometry) { const parameters = {}; if (geometry.type === 'BoxGeometry') { parameters.width = geometry.parameters.width; parameters.height = geometry.parameters.height; parameters.depth = geometry.parameters.depth; } else if (geometry.type === 'SphereGeometry') { parameters.radius = geometry.parameters.radius; parameters.widthSegments = geometry.parameters.widthSegments; parameters.heightSegments = geometry.parameters.heightSegments; } else if (geometry.type === 'PlaneGeometry') { parameters.width = geometry.parameters.width; parameters.height = geometry.parameters.height; } return parameters; } removeObject(objectId) { if (this.objects[objectId]) { // Remove the object from the Three.js scene const object = this.threeScene.getObjectByName(this.objects[objectId].name); if (object) { this.threeScene.remove(object); // Dispose of geometries and materials if (object.geometry) object.geometry.dispose(); if (object.material) { if (Array.isArray(object.material)) { object.material.forEach(material => material.dispose()); } else { object.material.dispose(); } } } // Remove the object from our objects list delete this.objects[objectId]; } } updateObject(objectId, data) { if (this.objects[objectId]) { Object.assign(this.objects[objectId], data); // Update the Three.js object const object = this.threeScene.getObjectByName(this.objects[objectId].name); if (object) { if (data.position) object.position.fromArray(data.position); if (data.rotation) object.rotation.fromArray(data.rotation); if (data.scale) object.scale.fromArray(data.scale); if (data.color && object.material) object.material.color.setHex(data.color); if (data.castShadow !== undefined) object.castShadow = data.castShadow; if (data.receiveShadow !== undefined) object.receiveShadow = data.receiveShadow; if (data.intensity !== undefined && object.isLight) object.intensity = data.intensity; if (data.lightColor !== undefined && object.isLight) object.color.setHex(data.lightColor); if (data.name) object.name = data.name; // Update motion data if (data.motion !== undefined) { if (data.motion === null) { object.motion = null; this.objects[objectId].motion = null; } else { object.motion = data.motion; this.objects[objectId].motion = JSON.parse(JSON.stringify(data.motion)); if (this.scene.worldEditor && this.scene.worldEditor.motionEditor) { this.scene.worldEditor.motionEditor.loadMotionData(object, data.motion); } } } // Update default position if (data.defaultPosition) { object.userData.defaultPosition = new THREE.Vector3().fromArray(data.defaultPosition); this.objects[objectId].defaultPosition = data.defaultPosition; } } } } updateObjectName(oldName, newName) { const objectId = Object.keys(this.objects).find(key => this.objects[key].name === oldName); if (objectId) { this.objects[objectId].name = newName; // Update the name in the Three.js object const object = this.threeScene.getObjectByName(oldName); if (object) { object.name = newName; } } } saveObjects() { localStorage.setItem('worldObjects', JSON.stringify(this.objects)); } loadObjects() { const savedObjects = localStorage.getItem('worldObjects'); if (savedObjects) { this.objects = JSON.parse(savedObjects); this.nextObjectId = Math.max(...Object.keys(this.objects).map(key => parseInt(key))) + 1; this.recreateObjects(); } else { // If no objects are saved, add default lights this.addDefaultLights(); } } recreateObjects() { // Clear existing objects from the scene while(this.threeScene.children.length > 0){ this.threeScene.remove(this.threeScene.children[0]); } let hasDirectionalLight = false; let hasAmbientLight = false; const objectPromises = Object.entries(this.objects).map(([objectId, objectData]) => { return this.createObject(objectData).then(object => { if (object) { object.name = objectData.name; this.threeScene.add(object); if (objectData.type === 'DirectionalLight') hasDirectionalLight = true; if (objectData.type === 'AmbientLight') hasAmbientLight = true; // Apply motion data if (objectData.motion && this.scene.worldEditor && this.scene.worldEditor.motionEditor) { this.scene.worldEditor.motionEditor.loadMotionData(object, objectData.motion); } } }); }); Promise.all(objectPromises).then(() => { // Add default lights if they don't exist if (!hasDirectionalLight) this.addDirectionalLight(); if (!hasAmbientLight) this.addAmbientLight(); }); } createObject(objectData) { return new Promise((resolve, reject) => { let object; if (objectData.isAsset) { // Load GLTF asset const loader = new THREE.GLTFLoader(); loader.load(objectData.assetPath, (gltf) => { object = gltf.scene; object.isAsset = true; object.userData.assetPath = objectData.assetPath; this.applyObjectProperties(object, objectData); resolve(object); }, undefined, reject); } else { switch (objectData.type) { case 'Mesh': const geometry = this.createGeometry(objectData.geometryType, objectData.geometryParameters); const material = this.createMaterial(objectData.materialType, { color: objectData.color }); object = new THREE.Mesh(geometry, material); break; case 'DirectionalLight': object = new THREE.DirectionalLight(objectData.lightColor, objectData.intensity); break; case 'AmbientLight': object = new THREE.AmbientLight(objectData.lightColor, objectData.intensity); break; case 'SpotLight': object = new THREE.SpotLight(objectData.lightColor, objectData.intensity); object.angle = objectData.angle || Math.PI / 4; object.penumbra = objectData.penumbra || 0.1; object.decay = objectData.decay || 2; object.distance = objectData.distance || 200; break; case 'PointLight': object = new THREE.PointLight(objectData.lightColor, objectData.intensity, objectData.distance || 100); break; } if (object) { this.applyObjectProperties(object, objectData); resolve(object); } else { reject(new Error(`Unknown object type: ${objectData.type}`)); } } }); } createGeometry(type, parameters) { switch (type) { case 'BoxGeometry': return new THREE.BoxGeometry( parameters.width || 1, parameters.height || 1, parameters.depth || 1 ); case 'SphereGeometry': return new THREE.SphereGeometry( parameters.radius || 0.5, parameters.widthSegments || 32, parameters.heightSegments || 32 ); case 'PlaneGeometry': return new THREE.PlaneGeometry( parameters.width || 10, parameters.height || 10 ); // Add more geometry types as needed default: console.warn(`Unknown geometry type: ${type}`); return new THREE.BoxGeometry(1, 1, 1); } } createMaterial(type, parameters) { switch (type) { case 'MeshPhongMaterial': return new THREE.MeshPhongMaterial(parameters); case 'MeshStandardMaterial': return new THREE.MeshStandardMaterial(parameters); // Add more material types as needed default: console.warn(`Unknown material type: ${type}`); return new THREE.MeshPhongMaterial(parameters); } } applyObjectProperties(object, objectData) { object.position.fromArray(objectData.position); object.rotation.fromArray(objectData.rotation); object.scale.fromArray(objectData.scale); object.castShadow = objectData.castShadow; object.receiveShadow = objectData.receiveShadow; object.name = objectData.name; object.userData.defaultPosition = new THREE.Vector3().fromArray(objectData.defaultPosition || objectData.position); // Apply motion data if (objectData.motion) { object.motion = { type: objectData.motion.type, parameters: objectData.motion.parameters, initialPosition: objectData.motion.initialPosition ? new THREE.Vector3().fromArray(objectData.motion.initialPosition) : null, elevatorState: objectData.motion.elevatorState }; if (this.scene.worldEditor && this.scene.worldEditor.motionEditor) { this.scene.worldEditor.motionEditor.loadMotionData(object, object.motion); } } } clearObjects() { // Remove all objects from the Three.js scene while(this.threeScene.children.length > 0){ this.threeScene.remove(this.threeScene.children[0]); } // Clear the objects list this.objects = {}; this.nextObjectId = 1; // Add default lights this.addDefaultLights(); } addDefaultLights() { this.addDirectionalLight(); this.addAmbientLight(); } addDirectionalLight() { const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(5, 10, 7.5); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 1024; directionalLight.shadow.mapSize.height = 1024; directionalLight.shadow.camera.near = 1; directionalLight.shadow.camera.far = 20; this.threeScene.add(directionalLight); const objectId = this.addObject(directionalLight); directionalLight.name = `DirectionalLight_${objectId}`; } addAmbientLight() { const ambientLight = new THREE.AmbientLight(0x404040, 0.5); this.threeScene.add(ambientLight); const objectId = this.addObject(ambientLight); ambientLight.name = `AmbientLight_${objectId}`; } } // Game class Game extends Phaser.Scene { constructor() { super('Game'); this.threeScene = null; this.threeCamera = null; this.threeRenderer = null; this.cameraController = null; this.ui = null; this.worldEditor = null; this.world = null; this.raycaster = null; this.mouse = null; this.isSceneReady = false; this.composer = null; } create() { this.initializeScene(); } initializeScene() { this.threeScene = new THREE.Scene(); console.log('Three.js scene created'); this.threeCamera = new THREE.PerspectiveCamera(75, this.cameras.main.width / this.cameras.main.height, 0.1, 1000); this.threeRenderer = new THREE.WebGLRenderer({ alpha: true }); this.threeRenderer.setSize(this.cameras.main.width, this.cameras.main.height); this.threeRenderer.shadowMap.enabled = true; this.threeRenderer.shadowMap.type = THREE.PCFSoftShadowMap; const threeContainer = this.add.dom(this.cameras.main.width / 2, this.cameras.main.height / 2, this.threeRenderer.domElement); if (document.body.contains(this.threeRenderer.domElement)) { console.log("Three.js renderer successfully added to the DOM"); } else { console.error("Three.js renderer not found in the DOM"); } threeContainer.node.style.border = '1px solid #4682B4'; threeContainer.node.style.backgroundColor = '#000000'; this.cameraController = new CameraController(this.threeCamera, this, this.threeRenderer.domElement); this.threeCamera.position.set(5, 5, 5); this.threeCamera.lookAt(0, 0, 0); this.scale.on('resize', this.resize, this); this.world = new World(this, this.threeScene); this.world.loadObjects(); // Load saved objects when initializing the scene this.worldEditor = new WorldEditor(this, this.threeScene, this.threeCamera, null, this.world); window.worldEditor = this.worldEditor; this.ui = new UI(this, this.threeCamera, null, this.cameraController, this.worldEditor); this.input.on('pointerdown', (pointer) => { if (pointer.middleButtonDown()) { this.input.mouse.requestPointerLock(); } }); this.input.on('pointerlockchange', (isLocked) => { this.cameraController.orbitControls.enabled = this.cameraController.isDevMode && !isLocked; }); this.input.keyboard.on('keydown-E', () => { if (this.cameraController.isDevMode) { if (this.worldEditor.isVisible) { this.worldEditor.hide(); document.getElementById('launch-world-editor').textContent = 'Launch World Editor'; } else { this.worldEditor.show(); document.getElementById('launch-world-editor').textContent = 'Close World Editor'; } } }); this.raycaster = new THREE.Raycaster(); this.mouse = new THREE.Vector2(); this.threeRenderer.domElement.addEventListener('mousedown', this.onMouseClick.bind(this)); console.log("Click event listener added to Three.js renderer"); this.input.on('pointerdown', (pointer) => { console.log("Phaser pointerdown event detected:", pointer.x, pointer.y); }); this.input.on('pointerdown', this.onMouseClick, this); // Set up EffectComposer and passes this.composer = new THREE.EffectComposer(this.threeRenderer); const renderPass = new THREE.RenderPass(this.threeScene, this.threeCamera); this.composer.addPass(renderPass); // Add OutlinePass to the composer this.composer.addPass(this.worldEditor.outlinePass); // Add anti-aliasing pass const effectFXAA = new THREE.ShaderPass(THREE.FXAAShader); effectFXAA.uniforms['resolution'].value.set(1 / this.cameras.main.width, 1 / this.cameras.main.height); this.composer.addPass(effectFXAA); this.isSceneReady = true; } onMouseClick(event) { if (event.button !== 0) { console.log("Click ignored: Not a left mouse click"); return; } console.log("Three.js mousedown event detected:", event.clientX, event.clientY); console.log("Dev mode:", this.cameraController.isDevMode); console.log("World Editor visible:", this.worldEditor.isVisible); if (!this.cameraController.isDevMode || !this.worldEditor.isVisible) { console.log("Click ignored: Dev mode or World Editor not active"); return; } const rect = this.threeRenderer.domElement.getBoundingClientRect(); this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; console.log("Normalized mouse coordinates:", this.mouse.x, this.mouse.y); console.log("Camera position:", this.threeCamera.position); console.log("Camera rotation:", this.threeCamera.rotation); this.raycaster.setFromCamera(this.mouse, this.threeCamera); const intersects = this.raycaster.intersectObjects(this.threeScene.children, true); console.log("Raycaster direction:", this.raycaster.ray.direction); console.log("Number of intersected objects:", intersects.length); if (intersects.length > 0) { let selectedObject = intersects[0].object; // If the selected object is part of a group (like in GLTF models), // select the topmost parent that is a direct child of the scene while (selectedObject.parent && selectedObject.parent !== this.threeScene) { selectedObject = selectedObject.parent; } console.log("Selected object:", selectedObject); console.log("Selected object position:", selectedObject.position); this.worldEditor.selectObject(selectedObject.name || selectedObject.id); } else { console.log("No object selected"); } } update(time, delta) { if (!this.isSceneReady) return; if (this.cameraController) { this.cameraController.update(); } if (this.composer) { this.composer.render(); } if (this.threeScene) { this.threeScene.traverse((object) => { if (object.motion && object.motion.update) { object.motion.update(delta / 1000); } }); } } resize(gameSize) { if (this.threeCamera && this.threeRenderer) { this.threeCamera.aspect = gameSize.width / gameSize.height; this.threeCamera.updateProjectionMatrix(); this.threeRenderer.setSize(gameSize.width, gameSize.height); // Update EffectComposer size if (this.composer) { this.composer.setSize(gameSize.width, gameSize.height); } // Update OutlinePass size if (this.worldEditor && this.worldEditor.outlinePass) { this.worldEditor.outlinePass.resolution.set(gameSize.width, gameSize.height); } // Update FXAA resolution const effectFXAA = this.composer.passes.find(pass => pass instanceof THREE.ShaderPass && pass.material.uniforms.resolution); if (effectFXAA) { effectFXAA.uniforms['resolution'].value.set(1 / gameSize.width, 1 / gameSize.height); } } if (this.ui) { this.ui.resize(); } if (this.worldEditor) { this.worldEditor.resize(); } } } // Phaser window config. const config = { type: Phaser.WebGLRenderer, parent: 'renderDiv', scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, width: 1280, height: 720, fps: 60, backgroundColor: '#000000', physics: { default: 'arcade', arcade: { gravity: { y: 200 }, debug: true } }, scene:[ InitializerScene, Game], dom: { createContainer: true } }; // Main. window.phaserGame = new Phaser.Game(config); console.log('Phaser game instance created');

Devmode

Clear World

World Editor

Add Objects

Selected Object: ${object.name}

Position

Rotation

Scale

Rendering

Settings

Position

Rotation

FOV

Motion