// ThreeJS FPS Game. // ThreeJS version: 0.147.0 // ThreeJS address: https://cdn.jsdelivr.net/npm/three@0.147.0/ // All ThreeJS example scripts have already been loaded into scope. // Initializer scene loaded into scope already (this is where scripts a preloaded before the game runs.). /* (This is here to help Rosie AI when adding new features to your game, I would suggest leaving it here.) UIKIT already loaded to scope. ThreeJS Example scripts already loaded into scope in InitializerScene: [shaders]: CopyShader, LuminosityShader, ACESFilmicToneMappingShader, AfterimageShader, BasicShader, BleachBypassShader, BlendShader, BokehShader, BokehShader2, BrightnessContrastShader, ColorCorrectionShader, ColorifyShader, ConvolutionShader, DepthLimitedBlurShader, DigitalGlitch, DOFMipMapShader, DotScreenShader, FilmShader, FocusShader, FreiChenShader, FXAAShader, GammaCorrectionShader, GodRaysShader, HalftoneShader, HorizontalBlurShader, HorizontalTiltShiftShader, HueSaturationShader, KaleidoShader, LuminosityHighPassShader, MirrorShader, MMDToonShader, NormalMapShader, RGBShiftShader, SAOShader, SepiaShader, SMAAShader, SobelOperatorShader, SSAOShader, SSRShader, SubsurfaceScatteringShader, TechnicolorShader, ToneMapShader, ToonShader, TriangleBlurShader, UnpackDepthRGBAShader, VelocityShader, VerticalBlurShader, VerticalTiltShiftShader, VignetteShader, VolumeShader, WaterRefractionShader [animation]: AnimationClipCreator, CCDIKSolver, MMDAnimationHelper, MMDPhysics [cameras]: CinematicCamera [controls]: ArcballControls, DragControls, FirstPersonControls, FlyControls, PointerLockControls, TrackballControls, TransformControls [csm]: CSM, CSMHelper, CSMShader [curves]: CurveExtras, NURBSCurve, NURBSSurface, NURBSUtils [effects]: AnaglyphEffect, AsciiEffect, OutlineEffect, ParallaxBarrierEffect, PeppersGhostEffect, StereoEffect [environments]: DebugEnvironment, RoomEnvironment [exporters]: ColladaExporter, DRACOExporter, EXRExporter, GLTFExporter, MMDExporter, OBJExporter, PLYExporter, STLExporter, USDZExporter [geometries]: BoxLineGeometry, ConvexGeometry, DecalGeometry, LightningStrike, ParametricGeometry, ParametricGeometries, RoundedBoxGeometry, TeapotGeometry, TextGeometry [helpers]: LightProbeHelper, OctreeHelper, PositionalAudioHelper, RectAreaLightHelper, VertexNormalsHelper, VertexTangentsHelper, ViewHelper [interactive]: HTMLMesh, InteractiveGroup, SelectionBox, SelectionHelper [lights]: RectAreaLightUniformsLib, LightProbeGenerator [lines]: LineMaterial, LineSegmentsGeometry, LineSegments2, Line2, LineGeometry, Wireframe, WireframeGeometry2 [loaders]: 3DMLoader, 3MFLoader, AMFLoader, BasisTextureLoader, BVHLoader, ColladaLoader, DDSLoader, DRACOLoader, EXRLoader, FBXLoader, FontLoader, GCodeLoader, HDRCubeTextureLoader, KMZLoader, KTXLoader, LDrawLoader, LogLuvLoader, LottieLoader, LUT3dlLoader, LUTCubeLoader, LWOLoader, MD2Loader, MDDLoader, MMDLoader, MTLLoader, NRRDLoader, OBJLoader, PCDLoader, PDBLoader, PLYLoader, PRWMLoader, PVRLoader, RGBELoader, RGBMLoader, STLLoader, SVGLoader, TDSLoader, TGALoader, TIFFLoader, TiltLoader, TTFLoader, VOXLoader, VTKLoader, XYZLoader [materials]: MeshGouraudMaterial [math]: Capsule, ColorConverter, ConvexHull, ImprovedNoise, Lut, MeshSurfaceSampler, OBB, Octree, SimplexNoise [misc]: ConvexObjectBreaker, GPUComputationRenderer, Gyroscope, MD2Character, MD2CharacterComplex, MorphAnimMesh, MorphBlendMesh, ProgressiveLightMap, RollerCoaster, TubePainter, Volume, VolumeSlice [modifiers]: CurveModifier, EdgeSplitModifier, SimplifyModifier, TessellateModifier [objects]: GroundProjectedEnv, Lensflare, LightningStorm, MarchingCubes, Reflector, ReflectorForSSRPass, Refractor, ShadowMesh, Sky, Water, Water2 [postprocessing]: adaptivetonemappingpass, afterimagepass, bloompass, bokehpass, clearpass, cubetexturepass, dotscreenpass, filmpass, glitchpass, halftonepass, lutpass, maskpass, pass, renderpixelatedpass, saopass, savepass, smaapass, ssaopass, ssrpass, taarenderpass, texturepass, unrealbloompass [physics]: AmmoPhysics, OimoPhysics [renderers]: CSS2DRenderer, CSS3DRenderer, Projector, SVGRenderer [textures]: FlakesTexture [utils]: BufferGeometryUtils, CameraUtils, GeometryCompressionUtils, GeometryUtils, GPUStatsPanel, LDrawUtils, PackedPhongMaterial, SceneUtils, ShadowMapViewer, SkeletonUtils, UVsDebug, WorkerPool [libs]: ammo_wasm_js, chevrotain_min, fflate_min, ktx_parse_umd, meshopt_decoder, opentype_min, stats_min */ // Preload scene - runs before the game is launched to load ThreeJS modules and dependancies. class PreloadScene extends Phaser.Scene { constructor() { super('PreloadScene'); this.scriptsLoaded = false; } preload() { this.load.image('threeSplash', 'https://play.rosebud.ai/assets/LakeNight.png?jtLO'); this.load.script('initscene', 'https://play.rosebud.ai/assets/InitializerScene.js?WM7e'); 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.scriptsLoaded = true; } create() { this.initialize(); } initialize() { if (this.scriptsLoaded) { this.scene.add('InitializerScene', InitializerScene); console.log('%c[Preload]: Preload Successful - Launching InitializerScene', 'color: #3283a8'); this.scene.start('InitializerScene'); } } } class Game extends Phaser.Scene { constructor() { super('Game'); this.threeRenderer = null; this.threeCamera = null; this.orbitCamera = null; this.orbitControls = null; this.composer = null; this.lastUpdateTime = 0; this.isPaused = false; this.cameraSpeed = 0.5; this.cameraMode = 'follow'; // 'follow' or 'orbit' } preload() { // Define StarNestShader this.StarNestShader = { uniforms: { 'time': { value: 0 }, 'zoom': { value: 1.0 }, 'speed': { value: 0.010 }, 'brightness': { value: 0.0015 }, 'saturation': { value: 0.850 }, 'tileSize': { value: 1.0 }, 'formParam': { value: 0.55 }, 'stepSize': { value: 0.1 }, 'darkMatter': { value: 0.5 }, 'distFading': { value: 0.730 }, 'moveSpeed': { value: new THREE.Vector3(1.0, 1.0, 1.0) }, 'uvScale': { value: 1.0 }, 'rotationX': { value: 0 }, 'rotationY': { value: 0 }, 'rotationZ': { value: 0 }, 'isTiled': { value: true }, 'iResolution': { value: new THREE.Vector3() } }, vertexShader: ` varying vec3 vPosition; varying vec2 vUv; uniform float uvScale; uniform float rotationX; uniform float rotationY; uniform float rotationZ; vec2 rotateUV(vec2 uv, float rotation) { float mid = 0.5; return vec2( cos(rotation) * (uv.x - mid) + sin(rotation) * (uv.y - mid) + mid, cos(rotation) * (uv.y - mid) - sin(rotation) * (uv.x - mid) + mid ); } void main() { vPosition = position; vec2 rotatedUV = uv; rotatedUV = rotateUV(rotatedUV, rotationZ); rotatedUV = rotateUV(vec2(rotatedUV.x, rotatedUV.y), rotationY); rotatedUV = rotateUV(vec2(rotatedUV.y, rotatedUV.x), rotationX); vUv = rotatedUV * uvScale; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform float time; uniform float zoom; uniform float speed; uniform float brightness; uniform float saturation; uniform float tileSize; uniform float formParam; uniform float stepSize; uniform float darkMatter; uniform float distFading; uniform vec3 moveSpeed; uniform bool isTiled; uniform vec3 iResolution; varying vec3 vPosition; varying vec2 vUv; #define iterations 17 #define volsteps 20 void main() { vec3 dir = normalize(vPosition); float t = time * speed; vec3 from = vec3(vUv * 2.0 - 1.0, 0.0); from += vec3(t * moveSpeed.x, t * moveSpeed.y, t * moveSpeed.z); float s = 0.1, fade = 1.0; vec3 v = vec3(0.0); for (int r = 0; r < volsteps; r++) { vec3 p = from + s * dir * zoom; if (isTiled) { p = abs(vec3(tileSize) - mod(p, vec3(tileSize * 2.0))); } float pa, a = pa = 0.0; for (int i = 0; i < iterations; i++) { p = abs(p) / dot(p, p) - formParam; a += abs(length(p) - pa); pa = length(p); } float dm = max(0.0, darkMatter - a * a * 0.001); a *= a * a; if (r > 6) fade *= 1.0 - dm; v += fade; v += vec3(s, s * s, s * s * s * s) * a * brightness * fade; fade *= distFading; s += stepSize; } v = mix(vec3(length(v)), v, saturation); gl_FragColor = vec4(v * 0.01, 1.0); } ` }; } create() { const splash = this.add.image(this.cameras.main.width / 2, this.cameras.main.height / 2, 'threeSplash'); // Scale the splash image to fit the screen const scaleX = this.cameras.main.width / splash.width; const scaleY = this.cameras.main.height / splash.height; const scale = Math.max(scaleX, scaleY); splash.setScale(scale); this.time.delayedCall(1000, () => { // Wait for 1 second before starting the game splash.destroy(); this.initializeScene(); this.createUI(); console.log('InputManager, PlayerController, and CharacterPanel initialized'); }, [], this); } createUI() { const uiContainer = this.createUIContainer(); uiContainer.innerHTML = `

Scene Controls

${this.createOuterSkyboxControls()} ${this.createInnerSkyboxControls()} ${this.createAdditionalSkyboxControls()} ${this.createMountainsControls()} `; document.body.appendChild(uiContainer); this.setupUIListeners(); } createUIContainer() { const uiContainer = document.createElement('div'); uiContainer.style.position = 'absolute'; uiContainer.style.right = '10px'; uiContainer.style.top = '10px'; uiContainer.style.width = '300px'; uiContainer.style.height = '500px'; uiContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; uiContainer.style.padding = '10px'; uiContainer.style.borderRadius = '5px'; uiContainer.style.color = 'white'; uiContainer.style.overflowY = 'auto'; return uiContainer; } createOuterSkyboxControls() { return `

${this.createSlider('Zoom', 'zoom', 0.1, 5, 0.01, 1.0)} ${this.createSlider('Speed', 'speed', 0.001, 0.05, 0.001, 0.010)} ${this.createSlider('Brightness', 'brightness', 0.0001, 0.01, 0.0001, 0.0015)} ${this.createSlider('Saturation', 'saturation', 0, 1, 0.01, 0.850)}
${this.createSlider('Tile Size', 'tileSize', 0.1, 5, 0.01, 1.0)} ${this.createSlider('Form Parameter', 'formParam', 0.1, 1, 0.01, 0.53)} ${this.createSlider('Step Size', 'stepSize', 0.01, 0.5, 0.01, 0.1)} ${this.createSlider('Dark Matter', 'darkMatter', 0, 5, 0.01, 0.5)}
${this.createSlider('Rotation X', 'outerRotationX', 0, 6.28, 0.01, 0)} ${this.createSlider('Rotation Y', 'outerRotationY', 0, 6.28, 0.01, 0)} ${this.createSlider('Rotation Z', 'outerRotationZ', 0, 6.28, 0.01, 0)}

`; } createInnerSkyboxControls() { return `

${this.createSlider('Cloud Scale', 'cloudScale', 0.1, 5, 0.1, 1.1)} ${this.createSlider('Cloud Speed', 'cloudSpeed', 0.01, 0.1, 0.01, 0.03)} ${this.createSlider('Cloud Cover', 'cloudCover', 0, 1, 0.01, 0.2)}
${this.createSlider('Sky Tint', 'skyTint', 0, 1, 0.01, 0.5)} ${this.createSlider('Cloud Dark', 'cloudDark', 0, 1, 0.01, 0.5)} ${this.createSlider('Cloud Light', 'cloudLight', 0, 1, 0.01, 0.3)}
${this.createSlider('Rotation X', 'innerRotationX', 0, 6.28, 0.01, 0)} ${this.createSlider('Rotation Y', 'innerRotationY', 0, 6.28, 0.01, 0)} ${this.createSlider('Rotation Z', 'innerRotationZ', 0, 6.28, 0.01, 0)}

${this.createSlider('Cloud Opacity', 'innerCloudOpacity', 0, 1, 0.01, 1.0)} ${this.createSlider('Sky Opacity', 'innerSkyOpacity', 0, 1, 0.01, 1.0)} ${this.createSlider('Inner Skybox Y Position', 'innerSkyboxYPosition', -500, 500, 1, -50)} ${this.createColorPicker('Sky Color 1', 'skyColor1', '#336699')} ${this.createColorPicker('Sky Color 2', 'skyColor2', '#66b3ff')}

`; } createAdditionalSkyboxControls() { return `

${this.createSlider('Cloud Scale', 'additionalCloudScale', 0.1, 5, 0.1, 1.1)} ${this.createSlider('Cloud Speed', 'additionalCloudSpeed', 0.01, 0.1, 0.01, 0.03)} ${this.createSlider('Cloud Cover', 'additionalCloudCover', 0, 1, 0.01, 0.2)}
${this.createSlider('Sky Tint', 'additionalSkyTint', 0, 1, 0.01, 0.5)} ${this.createSlider('Cloud Dark', 'additionalCloudDark', 0, 1, 0.01, 0.5)} ${this.createSlider('Cloud Light', 'additionalCloudLight', 0, 1, 0.01, 0.3)}
${this.createSlider('Rotation X', 'additionalRotationX', 0, 6.28, 0.01, 0)} ${this.createSlider('Rotation Y', 'additionalRotationY', 0, 6.28, 0.01, 0)} ${this.createSlider('Rotation Z', 'additionalRotationZ', 0, 6.28, 0.01, 0)}

${this.createSlider('Cloud Opacity', 'additionalCloudOpacity', 0, 1, 0.01, 1.0)} ${this.createSlider('Sky Opacity', 'additionalSkyOpacity', 0, 1, 0.01, 1.0)} ${this.createSlider('Additional Skybox Y Position', 'additionalSkyboxYPosition', -500, 500, 1, -50)} ${this.createColorPicker('Sky Color 1', 'additionalSkyColor1', '#336699')} ${this.createColorPicker('Sky Color 2', 'additionalSkyColor2', '#66b3ff')}

`; } createMountainsControls() { return `

${this.createSlider('Mountain Texture Scale', 'mountainTextureScale', 0.1, 10, 0.1, 1)} ${this.createSlider('Mountain Y Position', 'mountainYPosition', -100, 100, 1, 0)}

`; } createSlider(label, id, min, max, step, value) { return `

${label}: ${value}

`; } createColorPicker(label, id, value) { return `

${label}:

`; } setupUIListeners() { const updateOuterShaderParam = (param, value) => { if (this.starNestUniforms && this.starNestUniforms[param]) { if (param === 'moveSpeed') { const [x, y, z] = value.split(',').map(Number); this.starNestUniforms[param].value.set(x, y, z); } else if (param === 'isTiled') { this.starNestUniforms[param].value = value; } else { this.starNestUniforms[param].value = parseFloat(value); } } }; const updateInnerShaderParam = (param, value) => { if (this.innerSkybox && this.innerSkybox.material.uniforms[param]) { if (param === 'isTiled') { this.innerSkybox.material.uniforms[param].value = value; } else { this.innerSkybox.material.uniforms[param].value = parseFloat(value); } } }; const outerSkyboxSliders = ['zoom', 'speed', 'brightness', 'saturation', 'tileSize', 'formParam', 'stepSize', 'darkMatter' ]; const innerSkyboxSliders = ['cloudScale', 'cloudSpeed', 'cloudCover', 'skyTint', 'cloudDark', 'cloudLight' ]; outerSkyboxSliders.forEach(param => { const slider = document.getElementById(`${param}Slider`); const valueSpan = document.getElementById(`${param}Value`); if (slider && valueSpan) { slider.addEventListener('input', (event) => { const value = event.target.value; valueSpan.textContent = value; updateOuterShaderParam(param, value); }); } }); innerSkyboxSliders.forEach(param => { const slider = document.getElementById(`${param}Slider`); const valueSpan = document.getElementById(`${param}Value`); if (slider && valueSpan) { slider.addEventListener('input', (event) => { const value = event.target.value; valueSpan.textContent = value; updateInnerShaderParam(param, value); }); } }); // Inner skybox cloud opacity slider const innerCloudOpacitySlider = document.getElementById('innerCloudOpacitySlider'); const innerCloudOpacityValue = document.getElementById('innerCloudOpacityValue'); if (innerCloudOpacitySlider && innerCloudOpacityValue) { innerCloudOpacitySlider.addEventListener('input', (event) => { const value = event.target.value; innerCloudOpacityValue.textContent = value; updateInnerShaderParam('cloudOpacity', value); }); } // Inner skybox sky opacity slider const innerSkyOpacitySlider = document.getElementById('innerSkyOpacitySlider'); const innerSkyOpacityValue = document.getElementById('innerSkyOpacityValue'); if (innerSkyOpacitySlider && innerSkyOpacityValue) { innerSkyOpacitySlider.addEventListener('input', (event) => { const value = event.target.value; innerSkyOpacityValue.textContent = value; updateInnerShaderParam('skyOpacity', value); }); } // Inner skybox Y position slider const innerSkyboxYPositionSlider = document.getElementById('innerSkyboxYPositionSlider'); const innerSkyboxYPositionValue = document.getElementById('innerSkyboxYPositionValue'); if (innerSkyboxYPositionSlider && innerSkyboxYPositionValue) { innerSkyboxYPositionSlider.addEventListener('input', (event) => { const value = parseFloat(event.target.value); innerSkyboxYPositionValue.textContent = value; if (this.innerSkybox) { this.innerSkybox.position.y = value; } }); } // Outer skybox tiling toggle button const toggleTilingBtn = document.getElementById('toggleTilingBtn'); if (toggleTilingBtn) { toggleTilingBtn.addEventListener('click', () => { const currentValue = this.starNestUniforms.isTiled.value; updateOuterShaderParam('isTiled', !currentValue); toggleTilingBtn.textContent = currentValue ? 'Enable Tiling' : 'Disable Tiling'; }); } // Inner skybox tiling toggle button const toggleInnerTilingBtn = document.getElementById('toggleInnerTilingBtn'); if (toggleInnerTilingBtn) { toggleInnerTilingBtn.addEventListener('click', () => { const currentValue = this.innerSkybox.material.uniforms.isTiled.value; updateInnerShaderParam('isTiled', !currentValue); toggleInnerTilingBtn.textContent = currentValue ? 'Enable Tiling' : 'Disable Tiling'; }); } // Outer skybox rotation sliders ['X', 'Y', 'Z'].forEach(axis => { const slider = document.getElementById(`outerRotation${axis}Slider`); const valueSpan = document.getElementById(`outerRotation${axis}Value`); if (slider && valueSpan) { slider.addEventListener('input', (event) => { const value = parseFloat(event.target.value); valueSpan.textContent = value.toFixed(2); updateOuterShaderParam(`rotation${axis}`, value); }); } }); // Inner skybox rotation sliders ['X', 'Y', 'Z'].forEach(axis => { const slider = document.getElementById(`innerRotation${axis}Slider`); const valueSpan = document.getElementById(`innerRotation${axis}Value`); if (slider && valueSpan) { slider.addEventListener('input', (event) => { const value = parseFloat(event.target.value); valueSpan.textContent = value.toFixed(2); if (this.innerSkybox && this.innerSkybox.material.uniforms) { this.innerSkybox.material.uniforms[`rotation${axis}`].value = value; } }); } }); // Sky color pickers const skyColor1Picker = document.getElementById('skyColor1Picker'); const skyColor2Picker = document.getElementById('skyColor2Picker'); if (skyColor1Picker) { skyColor1Picker.addEventListener('input', (event) => { const color = new THREE.Color(event.target.value); if (this.innerSkybox && this.innerSkybox.material.uniforms) { this.innerSkybox.material.uniforms.skyColor1.value = color; } }); } if (skyColor2Picker) { skyColor2Picker.addEventListener('input', (event) => { const color = new THREE.Color(event.target.value); if (this.innerSkybox && this.innerSkybox.material.uniforms) { this.innerSkybox.material.uniforms.skyColor2.value = color; } }); } // Mountain texture scale slider const mountainTextureScaleSlider = document.getElementById('mountainTextureScaleSlider'); const mountainTextureScaleValue = document.getElementById('mountainTextureScaleValue'); if (mountainTextureScaleSlider && mountainTextureScaleValue) { mountainTextureScaleSlider.addEventListener('input', (event) => { const value = parseFloat(event.target.value); mountainTextureScaleValue.textContent = value.toFixed(1); if (this.mountainMaterial && this.mountainMaterial.map) { this.mountainMaterial.map.repeat.set(value, value); this.mountainMaterial.needsUpdate = true; } }); } // Additional Skybox Controls const additionalSkyboxSliders = ['cloudScale', 'cloudSpeed', 'cloudCover', 'skyTint', 'cloudDark', 'cloudLight' ]; additionalSkyboxSliders.forEach(param => { const slider = document.getElementById(`additional${param.charAt(0).toUpperCase() + param.slice(1)}Slider`); const valueSpan = document.getElementById(`additional${param.charAt(0).toUpperCase() + param.slice(1)}Value`); if (slider && valueSpan) { slider.addEventListener('input', (event) => { const value = parseFloat(event.target.value); valueSpan.textContent = value; if (this.additionalSkybox && this.additionalSkybox.material.uniforms) { this.additionalSkybox.material.uniforms[param].value = value; } }); } }); // Additional Skybox Cloud Opacity Slider const additionalCloudOpacitySlider = document.getElementById('additionalCloudOpacitySlider'); const additionalCloudOpacityValue = document.getElementById('additionalCloudOpacityValue'); if (additionalCloudOpacitySlider && additionalCloudOpacityValue) { additionalCloudOpacitySlider.addEventListener('input', (event) => { const value = parseFloat(event.target.value); additionalCloudOpacityValue.textContent = value; if (this.additionalSkybox && this.additionalSkybox.material.uniforms) { this.additionalSkybox.material.uniforms.cloudOpacity.value = value; } }); } // Additional Skybox Sky Opacity Slider const additionalSkyOpacitySlider = document.getElementById('additionalSkyOpacitySlider'); const additionalSkyOpacityValue = document.getElementById('additionalSkyOpacityValue'); if (additionalSkyOpacitySlider && additionalSkyOpacityValue) { additionalSkyOpacitySlider.addEventListener('input', (event) => { const value = parseFloat(event.target.value); additionalSkyOpacityValue.textContent = value; if (this.additionalSkybox && this.additionalSkybox.material.uniforms) { this.additionalSkybox.material.uniforms.skyOpacity.value = value; } }); } // Additional Skybox Rotation Sliders ['X', 'Y', 'Z'].forEach(axis => { const slider = document.getElementById(`additionalRotation${axis}Slider`); const valueSpan = document.getElementById(`additionalRotation${axis}Value`); if (slider && valueSpan) { slider.addEventListener('input', (event) => { const value = parseFloat(event.target.value); valueSpan.textContent = value.toFixed(2); if (this.additionalSkybox && this.additionalSkybox.material.uniforms) { this.additionalSkybox.material.uniforms[`rotation${axis}`].value = value; } }); } }); // Additional Skybox Opacity Slider const additionalSkyboxOpacitySlider = document.getElementById('additionalSkyboxOpacitySlider'); const additionalSkyboxOpacityValue = document.getElementById('additionalSkyboxOpacityValue'); if (additionalSkyboxOpacitySlider && additionalSkyboxOpacityValue) { additionalSkyboxOpacitySlider.addEventListener('input', (event) => { const value = event.target.value; additionalSkyboxOpacityValue.textContent = value; if (this.additionalSkybox && this.additionalSkybox.material.uniforms) { this.additionalSkybox.material.uniforms.opacity.value = parseFloat(value); } }); } // Additional Skybox Y Position Slider const additionalSkyboxYPositionSlider = document.getElementById('additionalSkyboxYPositionSlider'); const additionalSkyboxYPositionValue = document.getElementById('additionalSkyboxYPositionValue'); if (additionalSkyboxYPositionSlider && additionalSkyboxYPositionValue) { additionalSkyboxYPositionSlider.addEventListener('input', (event) => { const value = parseFloat(event.target.value); additionalSkyboxYPositionValue.textContent = value; if (this.additionalSkybox) { this.additionalSkybox.position.y = value; } }); } // Additional Skybox Color Pickers const additionalSkyColor1Picker = document.getElementById('additionalSkyColor1Picker'); const additionalSkyColor2Picker = document.getElementById('additionalSkyColor2Picker'); if (additionalSkyColor1Picker) { additionalSkyColor1Picker.addEventListener('input', (event) => { const color = new THREE.Color(event.target.value); if (this.additionalSkybox && this.additionalSkybox.material.uniforms) { this.additionalSkybox.material.uniforms.skyColor1.value = color; } }); } if (additionalSkyColor2Picker) { additionalSkyColor2Picker.addEventListener('input', (event) => { const color = new THREE.Color(event.target.value); if (this.additionalSkybox && this.additionalSkybox.material.uniforms) { this.additionalSkybox.material.uniforms.skyColor2.value = color; } }); } } async initializeScene() { console.groupCollapsed(`%cInitializing ThreeJS scene:`, 'color: #3283a8'); this.setupRenderer(); this.setupCamera(); this.setupScene(); this.setupControls(); this.scale.on('resize', this.resize, this); console.log('Scene initialization complete'); console.groupEnd(); } setupControls() { this.cursors = this.input.keyboard.createCursorKeys(); this.wasdKeys = this.input.keyboard.addKeys('W,A,S,D'); this.spaceKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE); this.cameraToggleKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.C); this.cameraToggleKey.on('down', () => this.toggleCameraMode()); } setupScene() { // Create a new THREE.Scene this.scene = new THREE.Scene(); // Setup skybox this.setupSkybox(); // Load grass texture const textureLoader = new THREE.TextureLoader(); const grassTexture = textureLoader.load('https://play.rosebud.ai/assets/grass_2.png?9snu'); grassTexture.wrapS = THREE.RepeatWrapping; grassTexture.wrapT = THREE.RepeatWrapping; grassTexture.repeat.set(150, 150); // Increased tiling to cover the larger floor // Add floor const floorGeometry = new THREE.PlaneGeometry(2000, 2000); // Increased size to 600x600 const floorMaterial = new THREE.MeshStandardMaterial({ map: grassTexture, roughness: 0.8, metalness: 0.2 }); const floorMesh = new THREE.Mesh(floorGeometry, floorMaterial); floorMesh.rotation.x = -Math.PI / 2; floorMesh.receiveShadow = true; this.scene.add(floorMesh); // Add ambient light const ambientLight = new THREE.AmbientLight(0x404040, 0.05); this.scene.add(ambientLight); // Add directional light const directionalLight = new THREE.DirectionalLight(0xffffff, 0.05); directionalLight.position.set(50, 200, 100); directionalLight.castShadow = true; this.scene.add(directionalLight); // Configure shadow properties for the light directionalLight.shadow.mapSize.width = 4096; directionalLight.shadow.mapSize.height = 4096; directionalLight.shadow.camera.near = 10; directionalLight.shadow.camera.far = 500; directionalLight.shadow.camera.left = -200; directionalLight.shadow.camera.right = 200; directionalLight.shadow.camera.top = 200; directionalLight.shadow.camera.bottom = -200; directionalLight.shadow.bias = -0.0005; // Add a helper to visualize the light's shadow camera (optional, for debugging) //const helper = new THREE.CameraHelper(directionalLight.shadow.camera); //this.scene.add(helper); // Load and add mountains const loader = new THREE.GLTFLoader(); const dracoLoader = new THREE.DRACOLoader(); dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/'); loader.setDRACOLoader(dracoLoader); loader.load( 'https://play.rosebud.ai/assets/mountains.glb?3YME', (gltf) => { const mountains = gltf.scene; mountains.position.set(0, 0, 0); // Set initial position const uniformScale = 2200; // Set a uniform scale factor mountains.scale.set(uniformScale, uniformScale, uniformScale); mountains.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; if (child.material.map) { child.material.map.wrapS = THREE.RepeatWrapping; child.material.map.wrapT = THREE.RepeatWrapping; child.material.map.repeat.set(1, 1); } this.mountainMaterial = child.material; } }); this.scene.add(mountains); console.log('Mountains added to the scene'); // Set initial Y position to match the slider's default value const initialYPosition = 0; mountains.position.y = initialYPosition; // Store the mountains object for later reference this.mountains = mountains; }, (xhr) => { console.log((xhr.loaded / xhr.total) * 100 + '% loaded'); }, (error) => { console.error('An error happened while loading the mountains:', error); } ); } setupAmmo() { // Ammo.js setup const collisionConfiguration = new Ammo.btDefaultCollisionConfiguration(); const dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration); const broadphase = new Ammo.btDbvtBroadphase(); const solver = new Ammo.btSequentialImpulseConstraintSolver(); this.physicsWorld = new Ammo.btDiscreteDynamicsWorld(dispatcher, broadphase, solver, collisionConfiguration); this.physicsWorld.setGravity(new Ammo.btVector3(0, -9.8, 0)); } setupSkybox() { // Create outer skybox this.createOuterSkybox(); // Create inner skybox this.createInnerSkybox(); } createOuterSkybox() { const outerMaterial = new THREE.ShaderMaterial({ uniforms: THREE.UniformsUtils.clone(this.StarNestShader.uniforms), vertexShader: this.StarNestShader.vertexShader, fragmentShader: this.StarNestShader.fragmentShader, side: THREE.BackSide, }); // Initialize uniform values outerMaterial.uniforms.time.value = 0; outerMaterial.uniforms.iResolution.value.set(this.cameras.main.width, this.cameras.main.height, 1); const loader = new THREE.GLTFLoader(); loader.load('https://play.rosebud.ai/assets/SkyDome.glb?y0yO', (gltf) => { this.outerSkybox = gltf.scene.children[0]; this.outerSkybox.material = outerMaterial; this.outerSkybox.scale.setScalar(4500); // Larger scale for the outer skybox this.scene.add(this.outerSkybox); // Store the uniforms for easy access later this.starNestUniforms = outerMaterial.uniforms; }, undefined, (error) => { console.error('An error happened while loading the outer SkyDome:', error); }); } createInnerSkybox() { const cloudShader = { uniforms: { // Leave uniform format as is to save on vertical script space. iTime: {value: 0}, iResolution: {value: new THREE.Vector3(this.cameras.main.width, this.cameras.main.height, 1)}, cloudOpacity: {value: 1.0}, skyOpacity: {value: 1.0}, cloudScale: {value: 1.1}, cloudSpeed: {value: 0.03}, cloudCover: {value: 0.2}, skyTint: {value: 0.5}, cloudDark: {value: 0.5}, cloudLight: {value: 0.3}, skyColor1: {value: new THREE.Color(0.2, 0.4, 0.6)}, skyColor2: {value: new THREE.Color(0.4, 0.7, 1.0)}, rotationX: {value: 0}, rotationY: {value: 0}, rotationZ: {value: 0} }, vertexShader: ` uniform float rotationX; uniform float rotationY; uniform float rotationZ; varying vec2 vUv; vec2 rotateUV(vec2 uv, float rotation) { float mid = 0.5; return vec2( cos(rotation) * (uv.x - mid) + sin(rotation) * (uv.y - mid) + mid, cos(rotation) * (uv.y - mid) - sin(rotation) * (uv.x - mid) + mid ); } void main() { vec2 rotatedUV = uv; rotatedUV = rotateUV(rotatedUV, rotationZ); rotatedUV = rotateUV(vec2(rotatedUV.x, rotatedUV.y), rotationY); rotatedUV = rotateUV(vec2(rotatedUV.y, rotatedUV.x), rotationX); vUv = rotatedUV; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform float iTime; uniform vec3 iResolution; uniform float cloudScale; uniform float cloudSpeed; uniform float cloudCover; uniform float skyTint; uniform float cloudDark; uniform float cloudLight; uniform vec3 skyColor1; uniform vec3 skyColor2; uniform float skyOpacity; uniform float cloudOpacity; varying vec2 vUv; const float cloudalpha = 8.0; const mat2 m = mat2( 1.6, 1.2, -1.2, 1.6 ); vec2 hash( vec2 p ) { p = vec2(dot(p,vec2(127.1,311.7)), dot(p,vec2(269.5,183.3))); return -1.0 + 2.0*fract(sin(p)*43758.5453123); } float noise( in vec2 p ) { const float K1 = 0.366025404; // (sqrt(3)-1)/2; const float K2 = 0.211324865; // (3-sqrt(3))/6; vec2 i = floor(p + (p.x+p.y)*K1); vec2 a = p - i + (i.x+i.y)*K2; vec2 o = (a.x>a.y) ? vec2(1.0,0.0) : vec2(0.0,1.0); vec2 b = a - o + K2; vec2 c = a - 1.0 + 2.0*K2; vec3 h = max(0.5-vec3(dot(a,a), dot(b,b), dot(c,c) ), 0.0 ); vec3 n = h*h*h*h*vec3( dot(a,hash(i+0.0)), dot(b,hash(i+o)), dot(c,hash(i+1.0))); return dot(n, vec3(70.0)); } float fbm(vec2 n) { float total = 0.0, amplitude = 0.1; for (int i = 0; i < 7; i++) { total += noise(n) * amplitude; n = m * n; amplitude *= 0.4; } return total; } void main() { vec2 p = vUv; vec2 uv = p*vec2(iResolution.x/iResolution.y,1.0); float time = iTime * cloudSpeed; float q = fbm(uv * cloudScale * 0.5); float r = 0.0; uv *= cloudScale; uv -= q - time; float weight = 0.8; for (int i=0; i<8; i++){ r += abs(weight*noise( uv )); uv = m*uv + time; weight *= 0.7; } float f = 0.0; uv = p*vec2(iResolution.x/iResolution.y,1.0); uv *= cloudScale; uv -= q - time; weight = 0.7; for (int i=0; i<8; i++){ f += weight*noise( uv ); uv = m*uv + time; weight *= 0.6; } f *= r + f; float c = 0.0; time = iTime * cloudSpeed * 2.0; uv = p*vec2(iResolution.x/iResolution.y,1.0); uv *= cloudScale*2.0; uv -= q - time; weight = 0.4; for (int i=0; i<7; i++){ c += weight*noise( uv ); uv = m*uv + time; weight *= 0.6; } float c1 = 0.0; time = iTime * cloudSpeed * 3.0; uv = p*vec2(iResolution.x/iResolution.y,1.0); uv *= cloudScale*3.0; uv -= q - time; weight = 0.4; for (int i=0; i<7; i++){ c1 += abs(weight*noise( uv )); uv = m*uv + time; weight *= 0.6; } c += c1; vec3 skycolour = mix(skyColor2, skyColor1, p.y); vec3 cloudcolour = vec3(1.1, 1.1, 0.9) * clamp((cloudDark + cloudLight*c), 0.0, 1.0); f = cloudCover + cloudalpha*f*r; vec3 skyResult = mix(skycolour, clamp(skyTint * skycolour, 0.0, 1.0), clamp(c, 0.0, 1.0)); vec3 cloudResult = clamp(cloudcolour, 0.0, 1.0); vec3 result = mix(skyResult, cloudResult, clamp(f, 0.0, 1.0)); float finalOpacity = mix(skyOpacity, cloudOpacity, clamp(f, 0.0, 1.0)); gl_FragColor = vec4(result, finalOpacity); } ` }; const innerMaterial = new THREE.ShaderMaterial({ uniforms: cloudShader.uniforms, vertexShader: cloudShader.vertexShader, fragmentShader: cloudShader.fragmentShader, side: THREE.DoubleSide, transparent: true, depthWrite: false, blending: THREE.NormalBlending }); const loader = new THREE.GLTFLoader(); loader.load('https://play.rosebud.ai/assets/SkyDome.glb?y0yO', (gltf) => { this.innerSkybox = gltf.scene.children[0]; this.innerSkybox.material = innerMaterial; this.innerSkybox.scale.setScalar(2500); // Adjust the scale as needed this.innerSkybox.position.y = -50; // Move the inner skybox down by 50 units this.scene.add(this.innerSkybox); // Create the additional skydome this.additionalSkybox = this.innerSkybox.clone(); // Create a new instance of the material for the additional skybox this.additionalSkybox.material = new THREE.ShaderMaterial({ uniforms: THREE.UniformsUtils.clone(cloudShader.uniforms), vertexShader: cloudShader.vertexShader, fragmentShader: cloudShader.fragmentShader, side: THREE.DoubleSide, transparent: true, depthWrite: false, blending: THREE.NormalBlending }); this.additionalSkybox.scale.setScalar(2700); // 200 more than the inner skybox this.additionalSkybox.position.y = 0; // Same position as inner skybox this.scene.add(this.additionalSkybox); }, undefined, (error) => { console.error('An error happened while loading the SkyDome:', error); }); } setupRenderer() { //console.groupCollapsed('[setupRenderer]:') this.threeRenderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, dithering: true, // Enable dithering }); this.threeRenderer.dithering = true; this.threeRenderer.outputEncoding = THREE.sRGBEncoding; this.threeRenderer.setSize(this.cameras.main.width, this.cameras.main.height); this.threeRenderer.shadowMap.enabled = true; this.threeRenderer.shadowMap.type = THREE.PCFSoftShadowMap; this.threeRenderer.outputEncoding = THREE.sRGBEncoding; this.threeRenderer.toneMapping = THREE.ACESFilmicToneMapping; this.threeRenderer.toneMappingExposure = 1; const threeContainer = this.add.dom(this.cameras.main.width / 2, this.cameras.main.height / 2, this.threeRenderer.domElement); threeContainer.node.style.border = '1px solid #4682B4'; threeContainer.node.style.backgroundColor = '#000000'; if (document.body.contains(this.threeRenderer.domElement)) { console.log(`%cThree.js renderer successfully added to the DOM`, 'color: #3283a8'); console.groupEnd(); } else { console.error("Three.js renderer not found in the DOM"); } //console.groupEnd(); } setupCamera() { // Player camera this.playerCamera = new THREE.PerspectiveCamera(100, this.cameras.main.width / this.cameras.main.height, 0.1, 5000); this.playerCamera.position.set(0, 5, 10); this.playerCamera.lookAt(0, 0, 0); // Orbit camera this.orbitCamera = new THREE.PerspectiveCamera(75, this.cameras.main.width / this.cameras.main.height, 0.1, 5000); this.orbitCamera.position.set(0, 10, 20); this.orbitControls = new THREE.OrbitControls(this.orbitCamera, this.threeRenderer.domElement); this.orbitControls.enableDamping = true; this.orbitControls.dampingFactor = 0.05; this.orbitControls.screenSpacePanning = false; this.orbitControls.minDistance = 5; this.orbitControls.maxDistance = 50; this.orbitControls.maxPolarAngle = Math.PI / 2; // Set the active camera this.activeCamera = this.playerCamera; // For backwards compatibility, also set threeCamera this.threeCamera = this.activeCamera; } toggleCameraMode() { this.cameraMode = this.cameraMode === 'follow' ? 'orbit' : 'follow'; this.activeCamera = this.cameraMode === 'follow' ? this.playerCamera : this.orbitCamera; this.threeCamera = this.activeCamera; console.log(`Camera mode switched to: ${this.cameraMode}`); } update(time, delta) { if (this.isPaused) { return; // Don't update game logic when paused } // Ensure delta is a valid number const deltaSeconds = (typeof delta === 'number' && delta > 0) ? delta / 1000 : 1 / 60; // Update outer skybox (StarNest) uniforms if (this.starNestUniforms) { this.starNestUniforms.time.value += deltaSeconds; } // Update inner skybox (cloud) uniforms if (this.innerSkybox && this.innerSkybox.material.uniforms) { this.innerSkybox.material.uniforms.iTime.value += deltaSeconds; } // Update additional skybox (cloud) uniforms if (this.additionalSkybox && this.additionalSkybox.material.uniforms) { this.additionalSkybox.material.uniforms.iTime.value += deltaSeconds; } if (this.cameraMode === 'orbit' && this.orbitControls) { this.orbitControls.update(); } // Step the physics world if (this.physicsWorld) { this.physicsWorld.stepSimulation(deltaSeconds, 10); } if (this.composer) { // Use the composer for rendering this.composer.render(deltaSeconds); } else if (this.scene && this.threeRenderer && this.activeCamera) { // Render the scene this.threeRenderer.render(this.scene, this.activeCamera); } } getInputMap() { return { 'w': this.wasdKeys.W.isDown || this.cursors.up.isDown, 's': this.wasdKeys.S.isDown || this.cursors.down.isDown, 'a': this.wasdKeys.A.isDown || this.cursors.left.isDown, 'd': this.wasdKeys.D.isDown || this.cursors.right.isDown, ' ': this.spaceKey.isDown }; } 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 outer skybox (StarNest) resolution if (this.starNestUniforms) { this.starNestUniforms.iResolution.value.set(gameSize.width, gameSize.height, 1); } // Update inner skybox (cloud) resolution and ensure opacity is maintained if (this.innerSkybox && this.innerSkybox.material.uniforms) { this.innerSkybox.material.uniforms.iResolution.value.set(gameSize.width, gameSize.height, 1); // Ensure the opacity value is maintained during resize const opacitySlider = document.getElementById('innerSkyboxOpacitySlider'); if (opacitySlider) { this.innerSkybox.material.uniforms.opacity.value = parseFloat(opacitySlider.value); } } if (this.composer) { this.composer.setSize(gameSize.width, gameSize.height); // Update FXAA uniforms const fxaaPass = this.composer.passes.find(pass => pass instanceof THREE.ShaderPass && pass.material.uniforms['resolution']); if (fxaaPass) { fxaaPass.material.uniforms['resolution'].value.x = 1 / (gameSize.width * window.devicePixelRatio); fxaaPass.material.uniforms['resolution'].value.y = 1 / (gameSize.height * window.devicePixelRatio); } // Update SSAO pass const ssaoPass = this.composer.passes.find(pass => pass instanceof THREE.SSAOPass); if (ssaoPass) { ssaoPass.setSize(gameSize.width, gameSize.height); } } } } } // 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', scene: [PreloadScene, Game], dom: { createContainer: true } }; window.phaserGame = new Phaser.Game(config); console.log('Phaser game instance created');