// Import necessary modules import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); const gltfLoader = new GLTFLoader(loadingManager); let assetsLoaded = false; let currency = 0; let currencyPerSecond = 0; let alphas = 0; let autobuyersEnabled = true; let energy = 0; let purpleBricks = 0; let autoClickTimer = null; let autoGenerators = 0; // Format style configuration const FormatStyle = { STANDARD: 'standard', SCIENTIFIC: 'scientific', ENGINEERING: 'engineering', SI: 'si', LOG: 'log' }; let currentFormatStyle = FormatStyle.STANDARD; let playerId = null; let players = new Map(); // Store player data let playerDisplays = new Map(); // Store player display elements let username = 'Player' + Math.floor(Math.random() * 1000); // WebSocket setup const ws = new WebSocket('wss://play.rosebud.ai'); ws.onopen = () => { console.log('Connected to server'); // Send initial player data ws.send(JSON.stringify({ type: 'join', username: username, currency: currency, position: { x: 0, y: 0, z: 0 }, rotation: { y: 0 } })); }; ws.onmessage = (event) => { const data = JSON.parse(event.data); switch (data.type) { case 'id': playerId = data.id; break; case 'players': updatePlayers(data.players); break; case 'playerLeft': removePlayer(data.id); break; } }; function updatePlayers(playerData) { // Update players Map with new data Object.entries(playerData).forEach(([id, data]) => { if (id !== playerId) { if (!players.has(id)) { // Create new player display const playerDisplay = document.createElement('div'); playerDisplay.style.position = 'absolute'; playerDisplay.style.color = 'white'; playerDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; playerDisplay.style.padding = '5px 10px'; playerDisplay.style.borderRadius = '5px'; playerDisplay.style.fontSize = '14px'; playerDisplay.style.fontFamily = 'Iosevka, monospace'; playerDisplay.style.textAlign = 'center'; playerDisplay.style.pointerEvents = 'none'; playerDisplay.style.zIndex = '1000'; playerDisplay.style.whiteSpace = 'pre-line'; playerDisplay.style.minWidth = '120px'; parentDiv.appendChild(playerDisplay); playerDisplays.set(id, playerDisplay); } players.set(id, data); } }); } function removePlayer(id) { const display = playerDisplays.get(id); if (display) { display.remove(); playerDisplays.delete(id); } players.delete(id); } // Function to send player updates function sendPlayerUpdate() { if (character && ws.readyState === WebSocket.OPEN) { ws.send(JSON.stringify({ type: 'update', id: playerId, username: username, currency: currency, position: { x: character.position.x, y: character.position.y, z: character.position.z }, rotation: { y: character.rotation.y } })); } } // Format number with suffixes function format(num) { switch (currentFormatStyle) { case FormatStyle.LOG: if (num < 10) { return Number(num.toFixed(1)); } return 'e' + Math.log10(num).toFixed(2); case FormatStyle.SCIENTIFIC: if (num < 10) { return Number(num.toFixed(1)); } const sciStr = num.toExponential(2); return sciStr.replace('+', ''); case FormatStyle.ENGINEERING: { if (num < 1000) { return Number(num.toFixed(1)); } const engExp = Math.floor(Math.log10(Math.abs(num))); const adjustedExp = Math.floor(engExp / 3) * 3; const mantissa = num / Math.pow(10, adjustedExp); return mantissa.toFixed(2) + 'e' + adjustedExp; } case FormatStyle.SI: { if (num < 1000) { return Number(num.toFixed(1)); } const siPrefixes = ['', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y', 'R', 'Q']; const siExp = Math.floor(Math.log10(num) / 3); if (siExp >= siPrefixes.length) { const qExp = siExp - siPrefixes.length + 1; return format(num / 1e30) + 'Q'; } return (num / Math.pow(1000, siExp)).toFixed(2) + siPrefixes[siExp]; } case FormatStyle.STANDARD: default: { if (num < 1000) { return Number(num.toFixed(1)); } const ones = ['', 'U', 'D', 'T', 'Qa', 'Qi', 'Sx', 'Sp', 'O', 'N']; const tens = ['', 'Dc', 'Vg', 'Tg', 'Qg', 'Qt', 'Sg', 'St', 'Og', 'Nn']; const hundreds = ['', 'Ce', 'Dn', 'Tc', 'Qc', 'Qe', 'Sc', 'Se', 'Oc', 'Ne']; // Basic suffixes for numbers under 1e33 const basicSuffixes = ['', 'k', 'M', 'B', 'T', 'Qa', 'Qi', 'Sx', 'Sp', 'Oc', 'No']; const standardExp = Math.floor(Math.log(num) / Math.log(1000)); if (standardExp < basicSuffixes.length) { return (num / Math.pow(1000, standardExp)).toFixed(2) + basicSuffixes[standardExp]; } // For numbers above basicSuffixes const orderIndex = standardExp - 1; const onesIndex = orderIndex % 10; const tensIndex = Math.floor(orderIndex / 10) % 10; const hundredsIndex = Math.floor(orderIndex / 100) % 10; const suffix = ones[onesIndex] + tens[tensIndex] + hundreds[hundredsIndex]; return (num / Math.pow(1000, standardExp)).toFixed(2) + suffix; } } } // Setup game loop at 20 times per second setInterval(() => { if (assetsLoaded) { // Add base currency per second (without alpha boost) currency += (currencyPerSecond*1.1**alphas) / 20; // Add auto-generator energy if (autoGenerators > 0) { energy += autoGenerators / 20; // 1 energy per second per generator } currencyDisplay.innerHTML = `§${format(currency)}`; energyDisplay.innerHTML = `⚡${format(energy)}`; // Check if we have enough energy for autobuyers if (autobuyersEnabled && purpleBricks > 0 && energy >= 0.05) { // 1/20 energy per tick energy -= 0.05; // Consume energy energyDisplay.innerHTML = `⚡${format(energy)}`; // Try to buy blue bricks based on purple bricks count if (currency >= 10) { // Check if we can afford a blue brick // Calculate how many blue bricks we can buy this tick const buyAmount = Math.min(purpleBricks, Math.floor(currency / 10)); currency -= buyAmount * 10; currencyPerSecond += buyAmount; currencyDisplay.innerHTML = `§${format(currency)}`; currencyPerSecondDisplay.innerHTML = `[§${format(currencyPerSecond*1.1**alphas)}/s]`; } } } }, 1000 / 20); // Load Iosevka font const fontFace = new FontFace('Iosevka', `url(https://play.rosebud.ai/assets/IosevkaTerm-ThinOblique.ttf?DL97)`); document.fonts.add(fontFace); // Get parent div first const parentDiv = document.getElementById('renderDiv'); // Create currency display const currencyDisplay = document.createElement('div'); currencyDisplay.style.position = 'absolute'; currencyDisplay.style.color = 'white'; currencyDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; currencyDisplay.style.padding = '5px 10px'; currencyDisplay.style.borderRadius = '5px'; currencyDisplay.style.fontSize = '16px'; currencyDisplay.style.fontWeight = 'bold'; currencyDisplay.style.pointerEvents = 'none'; currencyDisplay.style.fontFamily = 'Iosevka, monospace'; currencyDisplay.style.textAlign = 'center'; currencyDisplay.style.minWidth = '50px'; currencyDisplay.innerHTML = `§${format(currency)}`; // Create currency per second display const currencyPerSecondDisplay = document.createElement('div'); currencyPerSecondDisplay.style.position = 'absolute'; currencyPerSecondDisplay.style.color = '#a0a0a0'; currencyPerSecondDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; currencyPerSecondDisplay.style.padding = '3px 8px'; currencyPerSecondDisplay.style.borderRadius = '3px'; currencyPerSecondDisplay.style.fontSize = '12px'; currencyPerSecondDisplay.style.pointerEvents = 'none'; currencyPerSecondDisplay.style.fontFamily = 'Iosevka, monospace'; currencyPerSecondDisplay.style.textAlign = 'center'; currencyPerSecondDisplay.style.minWidth = '40px'; currencyPerSecondDisplay.innerHTML = `[§${format(currencyPerSecond)}/s]`; parentDiv.appendChild(currencyPerSecondDisplay); parentDiv.appendChild(currencyDisplay); // Create settings button const settingsButton = document.createElement('button'); settingsButton.style.position = 'absolute'; settingsButton.style.top = '10px'; settingsButton.style.right = '10px'; settingsButton.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; settingsButton.style.color = 'white'; settingsButton.style.border = '1px solid white'; settingsButton.style.padding = '8px 16px'; settingsButton.style.borderRadius = '5px'; settingsButton.style.fontFamily = 'Iosevka, monospace'; settingsButton.style.cursor = 'pointer'; settingsButton.style.zIndex = '1000'; settingsButton.textContent = '⚙️ Settings'; settingsButton.style.transition = 'background-color 0.2s'; settingsButton.onmouseover = () => settingsButton.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; settingsButton.onmouseout = () => settingsButton.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; parentDiv.appendChild(settingsButton); // Create settings panel (initially hidden) const settingsOverlay = document.createElement('div'); settingsOverlay.style.position = 'absolute'; settingsOverlay.style.top = '0'; settingsOverlay.style.left = '0'; settingsOverlay.style.width = '100%'; settingsOverlay.style.height = '100%'; settingsOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; settingsOverlay.style.display = 'none'; settingsOverlay.style.justifyContent = 'center'; settingsOverlay.style.alignItems = 'center'; settingsOverlay.style.zIndex = '2000'; const settingsPanel = document.createElement('div'); settingsPanel.style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; settingsPanel.style.padding = '20px'; settingsPanel.style.borderRadius = '10px'; settingsPanel.style.border = '1px solid white'; settingsPanel.style.color = 'white'; settingsPanel.style.fontFamily = 'Iosevka, monospace'; settingsPanel.style.minWidth = '300px'; // Create panel header const panelHeader = document.createElement('div'); panelHeader.style.display = 'flex'; panelHeader.style.justifyContent = 'space-between'; panelHeader.style.alignItems = 'center'; panelHeader.style.marginBottom = '20px'; const panelTitle = document.createElement('h2'); panelTitle.textContent = 'Settings'; panelTitle.style.margin = '0'; panelTitle.style.fontSize = '1.5em'; const closeButton = document.createElement('button'); closeButton.textContent = '×'; closeButton.style.backgroundColor = 'transparent'; closeButton.style.border = 'none'; closeButton.style.color = 'white'; closeButton.style.fontSize = '24px'; closeButton.style.cursor = 'pointer'; closeButton.style.padding = '0 5px'; closeButton.style.transition = 'color 0.2s'; closeButton.onmouseover = () => closeButton.style.color = '#ff4444'; closeButton.onmouseout = () => closeButton.style.color = 'white'; panelHeader.appendChild(panelTitle); panelHeader.appendChild(closeButton); settingsPanel.appendChild(panelHeader); // Add autobuyer toggle const autobuyerSection = document.createElement('div'); autobuyerSection.style.marginBottom = '20px'; const autobuyerButton = document.createElement('button'); autobuyerButton.style.width = '100%'; autobuyerButton.style.padding = '8px'; autobuyerButton.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'; autobuyerButton.style.border = '1px solid rgba(255, 255, 255, 0.2)'; autobuyerButton.style.borderRadius = '5px'; autobuyerButton.style.color = 'white'; autobuyerButton.style.cursor = 'pointer'; autobuyerButton.style.fontFamily = 'Iosevka, monospace'; autobuyerButton.style.transition = 'background-color 0.2s'; autobuyerButton.textContent = 'Autobuyers: Enabled'; autobuyerButton.onclick = () => { autobuyersEnabled = !autobuyersEnabled; autobuyerButton.textContent = `Autobuyers: ${autobuyersEnabled ? 'Enabled' : 'Disabled'}`; autobuyerButton.style.backgroundColor = autobuyersEnabled ? 'rgba(0, 255, 0, 0.2)' : 'rgba(255, 0, 0, 0.2)'; }; autobuyerSection.appendChild(autobuyerButton); settingsPanel.appendChild(autobuyerSection); // Add format options const formatSection = document.createElement('div'); formatSection.style.marginBottom = '25px'; // Create format demo section const demoSection = document.createElement('div'); demoSection.style.marginBottom = '20px'; demoSection.style.padding = '10px'; demoSection.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'; demoSection.style.borderRadius = '5px'; demoSection.style.border = '1px solid rgba(255, 255, 255, 0.2)'; const demoTitle = document.createElement('div'); demoTitle.textContent = 'Format Examples:'; demoTitle.style.marginBottom = '10px'; demoTitle.style.fontWeight = 'bold'; demoSection.appendChild(demoTitle); const demoContent = document.createElement('div'); demoContent.style.fontFamily = 'monospace'; demoContent.style.fontSize = '14px'; demoContent.style.lineHeight = '1.5'; demoSection.appendChild(demoContent); // Add demo section before format options settingsPanel.appendChild(demoSection); const formatLabel = document.createElement('div'); formatLabel.textContent = 'Number Format:'; formatLabel.style.marginBottom = '10px'; formatSection.appendChild(formatLabel); const formatOptions = [{ value: FormatStyle.STANDARD, text: 'Standard (k, M, B)' }, { value: FormatStyle.SCIENTIFIC, text: 'Scientific (1.23e6)' }, { value: FormatStyle.ENGINEERING, text: 'Engineering (123.45e6)' }, { value: FormatStyle.SI, text: 'SI (k, M, G)' }, { value: FormatStyle.LOG, text: 'Log (e4.50)' }]; formatOptions.forEach(option => { const formatButton = document.createElement('button'); formatButton.textContent = option.text; formatButton.style.display = 'block'; formatButton.style.width = '100%'; formatButton.style.marginBottom = '5px'; formatButton.style.padding = '8px'; formatButton.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'; formatButton.style.border = '1px solid rgba(255, 255, 255, 0.2)'; formatButton.style.borderRadius = '5px'; formatButton.style.color = 'white'; formatButton.style.cursor = 'pointer'; formatButton.style.fontFamily = 'Iosevka, monospace'; formatButton.style.transition = 'background-color 0.2s'; formatButton.onmouseover = () => { formatButton.style.backgroundColor = 'rgba(255, 255, 255, 0.2)'; }; formatButton.onmouseout = () => { formatButton.style.backgroundColor = option.value === currentFormatStyle ? 'rgba(255, 255, 255, 0.3)' : 'rgba(255, 255, 255, 0.1)'; }; formatButton.onclick = () => { currentFormatStyle = option.value; // Update displays currencyDisplay.innerHTML = `§${format(currency)}`; currencyPerSecondDisplay.innerHTML = `[§${format(currencyPerSecond)}/s]`; alphaDisplay.innerHTML = `@${format(alphas)}`; // Update demo formats updateDemoFormats(); // Update button styles formatSection.querySelectorAll('button').forEach(btn => { btn.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'; }); formatButton.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; }; if (option.value === currentFormatStyle) { formatButton.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; } formatSection.appendChild(formatButton); }); settingsPanel.appendChild(formatSection); settingsOverlay.appendChild(settingsPanel); parentDiv.appendChild(settingsOverlay); // Add event listeners for opening/closing settings settingsButton.onclick = () => { settingsOverlay.style.display = 'flex'; }; closeButton.onclick = () => { settingsOverlay.style.display = 'none'; }; // Close settings when clicking outside the panel settingsOverlay.onclick = (event) => { if (event.target === settingsOverlay) { settingsOverlay.style.display = 'none'; } }; // Create labels for buttons const greenButtonLabel = document.createElement('div'); greenButtonLabel.style.position = 'absolute'; greenButtonLabel.style.color = 'white'; greenButtonLabel.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; greenButtonLabel.style.padding = '5px 10px'; greenButtonLabel.style.borderRadius = '5px'; greenButtonLabel.style.fontSize = '14px'; greenButtonLabel.style.fontFamily = 'Iosevka, monospace'; greenButtonLabel.style.textAlign = 'center'; greenButtonLabel.style.pointerEvents = 'none'; greenButtonLabel.style.whiteSpace = 'pre-line'; greenButtonLabel.style.minWidth = '120px'; greenButtonLabel.innerHTML = '+§1'; parentDiv.appendChild(greenButtonLabel); const blueButtonLabel = document.createElement('div'); blueButtonLabel.style.position = 'absolute'; blueButtonLabel.style.color = 'white'; blueButtonLabel.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; blueButtonLabel.style.padding = '5px 10px'; blueButtonLabel.style.borderRadius = '5px'; blueButtonLabel.style.fontSize = '14px'; blueButtonLabel.style.fontFamily = 'Iosevka, monospace'; blueButtonLabel.style.textAlign = 'center'; blueButtonLabel.style.pointerEvents = 'none'; blueButtonLabel.innerHTML = '+§1/s (cost: §10)'; parentDiv.appendChild(blueButtonLabel); // Create yellow button label const yellowButtonLabel = document.createElement('div'); yellowButtonLabel.style.position = 'absolute'; yellowButtonLabel.style.color = 'white'; yellowButtonLabel.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; yellowButtonLabel.style.padding = '5px 10px'; yellowButtonLabel.style.borderRadius = '5px'; yellowButtonLabel.style.fontSize = '14px'; yellowButtonLabel.style.fontFamily = 'Iosevka, monospace'; yellowButtonLabel.style.textAlign = 'center'; yellowButtonLabel.style.pointerEvents = 'none'; yellowButtonLabel.innerHTML = 'Convert §→@ (§≥1k)'; parentDiv.appendChild(yellowButtonLabel); // Create red button label const redButtonLabel = document.createElement('div'); redButtonLabel.style.position = 'absolute'; redButtonLabel.style.color = 'white'; redButtonLabel.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; redButtonLabel.style.padding = '5px 10px'; redButtonLabel.style.borderRadius = '5px'; redButtonLabel.style.fontSize = '14px'; redButtonLabel.style.fontFamily = 'Iosevka, monospace'; redButtonLabel.style.textAlign = 'center'; redButtonLabel.style.pointerEvents = 'none'; redButtonLabel.innerHTML = '+⚡1'; parentDiv.appendChild(redButtonLabel); // Create purple button label const purpleButtonLabel = document.createElement('div'); purpleButtonLabel.style.position = 'absolute'; purpleButtonLabel.style.color = 'white'; purpleButtonLabel.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; purpleButtonLabel.style.padding = '5px 10px'; purpleButtonLabel.style.borderRadius = '5px'; purpleButtonLabel.style.fontSize = '14px'; purpleButtonLabel.style.fontFamily = 'Iosevka, monospace'; purpleButtonLabel.style.textAlign = 'center'; purpleButtonLabel.style.pointerEvents = 'none'; purpleButtonLabel.innerHTML = `Autobuyer (§50)${!autobuyersEnabled ? '\n[DISABLED]' : ''}`; parentDiv.appendChild(purpleButtonLabel); // Create orange button label const orangeButtonLabel = document.createElement('div'); orangeButtonLabel.style.position = 'absolute'; orangeButtonLabel.style.color = 'white'; orangeButtonLabel.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; orangeButtonLabel.style.padding = '5px 10px'; orangeButtonLabel.style.borderRadius = '5px'; orangeButtonLabel.style.fontSize = '14px'; orangeButtonLabel.style.fontFamily = 'Iosevka, monospace'; orangeButtonLabel.style.textAlign = 'center'; orangeButtonLabel.style.pointerEvents = 'none'; orangeButtonLabel.innerHTML = 'Auto Energy (§100)'; parentDiv.appendChild(orangeButtonLabel); // Create alpha display const alphaDisplay = document.createElement('div'); alphaDisplay.style.position = 'absolute'; alphaDisplay.style.color = '#ffff00'; alphaDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; alphaDisplay.style.padding = '5px 10px'; alphaDisplay.style.borderRadius = '5px'; alphaDisplay.style.fontSize = '16px'; alphaDisplay.style.fontWeight = 'bold'; alphaDisplay.style.pointerEvents = 'none'; alphaDisplay.style.fontFamily = 'Iosevka, monospace'; alphaDisplay.style.textAlign = 'center'; alphaDisplay.style.minWidth = '50px'; alphaDisplay.innerHTML = `@${format(alphas)}`; parentDiv.appendChild(alphaDisplay); // Create energy display const energyDisplay = document.createElement('div'); energyDisplay.style.position = 'absolute'; energyDisplay.style.color = '#ff0000'; energyDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; energyDisplay.style.padding = '5px 10px'; energyDisplay.style.borderRadius = '5px'; energyDisplay.style.fontSize = '16px'; energyDisplay.style.fontWeight = 'bold'; energyDisplay.style.pointerEvents = 'none'; energyDisplay.style.fontFamily = 'Iosevka, monospace'; energyDisplay.style.textAlign = 'center'; energyDisplay.style.minWidth = '50px'; energyDisplay.innerHTML = `⚡${format(energy)}`; parentDiv.appendChild(energyDisplay); // Optionally, add URL remapping if needed loadingManager.setURLModifier((url) => { if (url.includes('Textures/colormap.png')) { return 'https://play.rosebud.ai/assets/3D_playground_character_colormap.png?QJf8'; } return url; }); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create loading screen const loadingScreen = document.createElement('div'); loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.innerHTML = 'Loading... 0%'; parentDiv.appendChild(loadingScreen); // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = ((itemsLoaded / itemsTotal) * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; loadingManager.onLoad = function() { assetsLoaded = true; loadingScreen.style.display = 'none'; }; loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Initialize the scene const scene = new THREE.Scene(); const world = new CANNON.World(); world.gravity.set(0, -20, 0); world.defaultContactMaterial.friction = 0.01; // Reduced global friction world.defaultContactMaterial.restitution = 0; // No bounce by default world.solver.iterations = 10; world.solver.tolerance = 0.001; function randomBetween(min, max) { return Math.random() * (max - min) + min; } // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); // Define physics material for the ball const ballPhysMaterial = new CANNON.Material('ballMaterial'); // Create contact material between ball and ground const ballGroundContactMaterial = new CANNON.ContactMaterial( ballPhysMaterial, groundPhysMaterial, { friction: 0.05, // Lower friction for smoother rolling restitution: 0.95, // High restitution for bouncy balls } ); world.addContactMaterial(ballGroundContactMaterial); // Create contact material between balls const ballBallContactMaterial = new CANNON.ContactMaterial( ballPhysMaterial, ballPhysMaterial, { friction: 0.05, // Lower friction between balls for easier pushing restitution: 0.98, // High restitution between balls for bouncier collisions } ); world.addContactMaterial(ballBallContactMaterial); const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); // Adjusted camera position camera.position.set(0, 15, 30); camera.lookAt(0, 0, 0); // Camera settings for character following const cameraSettings = { offset: new THREE.Vector3(0, 5, 15), smoothSpeed: 0.1, rotationSpeed: 0.5, minPolarAngle: 0.1, maxPolarAngle: Math.PI / 2, minDistance: 8, maxDistance: 30, minFollowDistance: 12, }; // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: 'high-performance', }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0x87ceeb); // Bright sky blue const groundColor = new THREE.Color(0xffffff); // White ground reflection // Create sky dome with improved colors const vertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } `; const fragmentShader = ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 ); } `; const uniforms = { topColor: { value: skyColor }, bottomColor: { value: groundColor }, offset: { value: 33 }, exponent: { value: 0.6 }, }; const skyGeo = new THREE.SphereGeometry(500, 32, 15); const skyMat = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide, }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Modify OrbitControls setup const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.screenSpacePanning = false; controls.minPolarAngle = cameraSettings.minPolarAngle; controls.maxPolarAngle = cameraSettings.maxPolarAngle; controls.minDistance = cameraSettings.minDistance; controls.maxDistance = cameraSettings.maxDistance; controls.target = new THREE.Vector3(0, 2, 0); // Create flat terrain function createTerrain() { const size = 200; // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_diffuse.png?8Qkz'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?j50X'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(20, 20); texture.encoding = THREE.sRGBEncoding; normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; normalMap.repeat.set(20, 20); const material = new THREE.MeshStandardMaterial({ map: texture, normalMap: normalMap, normalScale: new THREE.Vector2(2, 2), roughness: 0.8, metalness: 0.1, envMapIntensity: 1.0, }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); const groundShape = new CANNON.Box(new CANNON.Vec3(size / 2, 0.1, size / 2)); const groundBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial, }); groundBody.addShape(groundShape); groundBody.position.set(0, -0.1, 0); world.addBody(groundBody); return terrain; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(skyColor, 2.0); sunLight.position.set(-50, 100, -50); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 400; sunLight.shadow.camera.left = -100; sunLight.shadow.camera.right = 100; sunLight.shadow.camera.top = 100; sunLight.shadow.camera.bottom = -100; sunLight.shadow.bias = -0.001; scene.add(sunLight); // Add hemisphere light to simulate sky and ground bounce light const hemiLight = new THREE.HemisphereLight(skyColor, groundColor, 0.6); scene.add(hemiLight); // ========================= // Character Integration // ========================= // Variables for character let character = null; let characterBody = null; let mixer = null; let isGrounded = false; let currentJumps = 0; let lastJumpTime = 0; let moveDirection = new THREE.Vector3(); let walkAction = null; let idleAction = null; let jumpAction = null; let fallAction = null; let contactNormal = new CANNON.Vec3(); let upAxis = new CANNON.Vec3(0, 1, 0); const keysPressed = { w: false, a: false, s: false, d: false, space: false, }; // Character configuration const characterConfig = { // Movement settings groundSpeed: 30, airSpeed: 25, groundDamping: 0.1, airDamping: 0.1, acceleration: 20, turnSpeed: 8, jumpForce: 12, jumpCooldown: 0.1, maxJumps: 1, // Physics settings radius: 2.5, // Collision shape radius height: 5, // Increased height to match model's visual height mass: 62, friction: 0.1, restitution: 0.0, linearDamping: 0.02, angularDamping: 0.9, // Visual and animation settings scale: 10, startHeight: 8, }; // Define physics materials for character const characterPhysMaterial = new CANNON.Material('character'); // Create contact material between character and ground const characterGroundContact = new CANNON.ContactMaterial( characterPhysMaterial, groundPhysMaterial, { friction: 0.01, restitution: 0.0, contactEquationStiffness: 1e8, contactEquationRelaxation: 3, } ); world.addContactMaterial(characterGroundContact); // Create contact material between ball and character const ballCharacterContactMaterial = new CANNON.ContactMaterial( ballPhysMaterial, characterPhysMaterial, { friction: 0.05, restitution: 0.9, } ); world.addContactMaterial(ballCharacterContactMaterial); // Add keyboard event listeners window.addEventListener('keydown', (event) => { if (event.code === 'Space') { keysPressed.space = true; } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = true; } }); window.addEventListener('keyup', (event) => { if (event.code === 'Space') { keysPressed.space = false; } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = false; } }); // Load the character model const characterUrl = 'https://play.rosebud.ai/assets/3D_playground_character.glb?I9dq'; gltfLoader.load(characterUrl, (gltf) => { const model = gltf.scene; model.scale.set( characterConfig.scale, characterConfig.scale, characterConfig.scale ); // Apply rotation correction if needed model.rotation.y = Math.PI; // Correcting the model's rotation // Adjust model's position so feet are on the ground model.position.set(0, 0, 0); model.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; child.material.envMapIntensity = 1.0; } }); // Create character physics body characterBody = new CANNON.Body({ mass: characterConfig.mass, material: characterPhysMaterial, linearDamping: characterConfig.linearDamping, angularDamping: characterConfig.angularDamping, fixedRotation: true, type: CANNON.Body.DYNAMIC, }); const characterShape = new CANNON.Cylinder( characterConfig.radius, characterConfig.radius, characterConfig.height, 8 ); // Adjust shapeOffset to align collision shape with the character model const shapeOffset = new CANNON.Vec3(0, characterConfig.height / 2, 0); characterBody.addShape(characterShape, shapeOffset); characterBody.position.set(0, characterConfig.startHeight, 0); world.addBody(characterBody); // Reset contact tracking isGrounded = false; let groundContactCount = 0; characterBody.addEventListener('collide', (event) => { const contact = event.contact; let otherBody; if (event.contact.bi === characterBody) { otherBody = event.contact.bj; contact.ni.negate(contactNormal); } else { otherBody = event.contact.bi; contactNormal.copy(contact.ni); } if (contactNormal.dot(upAxis) > 0.5) { groundContactCount++; isGrounded = true; currentJumps = 0; // Reset animations for ground state if (fallAction) { fallAction.stop(); fallAction.setEffectiveWeight(0); } if (jumpAction) { jumpAction.stop(); jumpAction.setEffectiveWeight(0); } } }); characterBody.addEventListener('endContact', (event) => { let otherBody; if (event.contact.bi === characterBody) { otherBody = event.contact.bj; event.contact.ni.negate(contactNormal); } else { otherBody = event.contact.bi; contactNormal.copy(event.contact.ni); } if (contactNormal.dot(upAxis) > 0.5) { groundContactCount = Math.max(0, groundContactCount - 1); if (groundContactCount === 0) { isGrounded = false; } } }); // Setup animations mixer = new THREE.AnimationMixer(model); const idleClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('idle')); const walkClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('walk')); const jumpClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('jump')); const fallClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('fall')); if (idleClip) { idleAction = mixer.clipAction(idleClip); idleAction.play(); idleAction.setEffectiveWeight(1); } if (walkClip) { walkAction = mixer.clipAction(walkClip); walkAction.play(); walkAction.setEffectiveWeight(0); } if (jumpClip) { jumpAction = mixer.clipAction(jumpClip); jumpAction.setLoop(THREE.LoopOnce); jumpAction.clampWhenFinished = true; jumpAction.setEffectiveWeight(0); } if (fallClip) { fallAction = mixer.clipAction(fallClip); fallAction.setLoop(THREE.LoopRepeat); fallAction.setEffectiveWeight(0); } character = model; scene.add(model); }); // Update character movement function updateCharacterMovement(deltaTime) { if (!character || !characterBody) return; // Get camera's forward and right vectors const cameraForward = new THREE.Vector3(); const cameraRight = new THREE.Vector3(); camera.getWorldDirection(cameraForward); cameraForward.y = 0; cameraForward.normalize(); cameraRight.crossVectors(new THREE.Vector3(0, 1, 0), cameraForward).normalize(); // Calculate move direction relative to camera moveDirection.set(0, 0, 0); // Add movement input if (keysPressed.w) moveDirection.add(cameraForward); if (keysPressed.s) moveDirection.sub(cameraForward); if (keysPressed.a) moveDirection.add(cameraRight); if (keysPressed.d) moveDirection.sub(cameraRight); // Normalize movement direction if it exists if (moveDirection.length() > 0) { moveDirection.normalize(); } // Get current horizontal velocity const currentVelocity = new THREE.Vector2(characterBody.velocity.x, characterBody.velocity.z); // Different handling for ground vs air movement if (isGrounded) { // Ground movement if (moveDirection.length() > 0) { // Calculate target velocity const targetVelocity = new THREE.Vector2( moveDirection.x * characterConfig.groundSpeed, moveDirection.z * characterConfig.groundSpeed ); // Interpolate current velocity towards target currentVelocity.lerp(targetVelocity, characterConfig.acceleration * deltaTime); // Update character rotation const targetAngle = Math.atan2(moveDirection.x, moveDirection.z); let currentAngle = character.rotation.y; // Calculate shortest rotation distance let angleDiff = targetAngle - currentAngle; if (angleDiff > Math.PI) angleDiff -= Math.PI * 2; if (angleDiff < -Math.PI) angleDiff += Math.PI * 2; // Smoothly rotate character character.rotation.y += angleDiff * characterConfig.turnSpeed * deltaTime; characterBody.quaternion.setFromEuler(0, character.rotation.y, 0); } else { // Apply ground damping when no input currentVelocity.multiplyScalar(1 - characterConfig.groundDamping * deltaTime); } } else { // Air movement if (moveDirection.length() > 0) { const airVelocity = new THREE.Vector2( moveDirection.x * characterConfig.airSpeed * deltaTime, moveDirection.z * characterConfig.airSpeed * deltaTime ); currentVelocity.add(airVelocity); // Clamp air speed const maxAirSpeed = characterConfig.airSpeed; if (currentVelocity.length() > maxAirSpeed) { currentVelocity.normalize().multiplyScalar(maxAirSpeed); } } else { // Apply air damping when no input currentVelocity.multiplyScalar(1 - characterConfig.airDamping * deltaTime); } } // Apply calculated velocity characterBody.velocity.x = currentVelocity.x; characterBody.velocity.z = currentVelocity.y; // Handle jumping if (keysPressed.space && isGrounded && currentJumps < characterConfig.maxJumps) { const now = performance.now(); if (now - lastJumpTime > characterConfig.jumpCooldown * 1000) { characterBody.velocity.y = characterConfig.jumpForce; currentJumps++; lastJumpTime = now; isGrounded = false; if (jumpAction) { jumpAction.reset(); jumpAction.setEffectiveWeight(1); jumpAction.play(); } } } // Update animations if (mixer && walkAction && idleAction && jumpAction && fallAction) { const verticalVelocity = characterBody.velocity.y; const horizontalSpeed = new THREE.Vector2(characterBody.velocity.x, characterBody.velocity.z).length(); if (!isGrounded) { // Air state walkAction.stop(); idleAction.stop(); if (verticalVelocity > 1) { // Rising fallAction.stop(); jumpAction.play(); jumpAction.setEffectiveWeight(1); } else { // Falling jumpAction.stop(); fallAction.play(); fallAction.setEffectiveWeight(1); } } else { // Ground state jumpAction.stop(); fallAction.stop(); if (horizontalSpeed > 0.1) { idleAction.stop(); walkAction.play(); walkAction.setEffectiveWeight(1); } else { walkAction.stop(); idleAction.play(); idleAction.setEffectiveWeight(1); } } } // Update animation mixer if (mixer) { mixer.update(deltaTime); } } // Update camera to follow the character function updateCamera() { if (!character) return; // Get character's position and current camera direction const characterPos = character.position.clone(); const cameraDir = new THREE.Vector3(); camera.getWorldDirection(cameraDir); // Calculate target position (character's upper body) let targetPosition = characterPos.clone().add(new THREE.Vector3(0, characterConfig.height / 2, 0)); // Get camera's current horizontal distance to character const cameraToCharacter = new THREE.Vector3(); cameraToCharacter.subVectors(camera.position, characterPos); cameraToCharacter.y = 0; // Ignore vertical distance const currentDistance = cameraToCharacter.length(); // Check if character is moving towards camera const movementTowardCamera = moveDirection.dot(cameraToCharacter.normalize()) < 0; // Adjust camera position if too close if (movementTowardCamera && currentDistance < cameraSettings.minFollowDistance) { const idealOffset = cameraToCharacter.normalize().multiplyScalar(cameraSettings.minFollowDistance); idealOffset.y = camera.position.y - characterPos.y; const newCameraPos = characterPos.clone().add(idealOffset); camera.position.lerp(newCameraPos, cameraSettings.smoothSpeed * 2); } // Update OrbitControls target controls.target.lerp(targetPosition, cameraSettings.smoothSpeed); // Update controls controls.update(); } // ========================= // End of Character Integration // ========================= // Create initial scene const terrain = createTerrain(); // Create button cubes const buttonGeometry = new THREE.BoxGeometry(3, 3, 3); // Green button (currency +1) const greenButtonMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, metalness: 0.5, roughness: 0.5, emissive: 0x00ff00, emissiveIntensity: 0.2 }); const greenButtonMesh = new THREE.Mesh(buttonGeometry, greenButtonMaterial); greenButtonMesh.position.set(10, 1.5, 10); greenButtonMesh.castShadow = true; greenButtonMesh.receiveShadow = true; scene.add(greenButtonMesh); // Blue button (currency/s upgrade) const blueButtonMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff, metalness: 0.5, roughness: 0.5, emissive: 0x0000ff, emissiveIntensity: 0.2 }); const blueButtonMesh = new THREE.Mesh(buttonGeometry, blueButtonMaterial); blueButtonMesh.position.set(-10, 1.5, 10); blueButtonMesh.castShadow = true; blueButtonMesh.receiveShadow = true; scene.add(blueButtonMesh); // Yellow block (alpha conversion) const yellowButtonMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00, metalness: 0.5, roughness: 0.5, emissive: 0xffff00, emissiveIntensity: 0.2 }); const yellowButtonMesh = new THREE.Mesh(buttonGeometry, yellowButtonMaterial); yellowButtonMesh.position.set(0, 1.5, -10); yellowButtonMesh.castShadow = true; yellowButtonMesh.receiveShadow = true; scene.add(yellowButtonMesh); // Red block (energy generation) const redButtonMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, metalness: 0.5, roughness: 0.5, emissive: 0xff0000, emissiveIntensity: 0.2 }); const redButtonMesh = new THREE.Mesh(buttonGeometry, redButtonMaterial); redButtonMesh.position.set(10, 1.5, -10); redButtonMesh.castShadow = true; redButtonMesh.receiveShadow = true; scene.add(redButtonMesh); // Orange block (auto-generator) const orangeButtonMaterial = new THREE.MeshStandardMaterial({ color: 0xffa500, metalness: 0.5, roughness: 0.5, emissive: 0xffa500, emissiveIntensity: 0.2 }); const orangeButtonMesh = new THREE.Mesh(buttonGeometry, orangeButtonMaterial); orangeButtonMesh.position.set(0, 1.5, 10); orangeButtonMesh.castShadow = true; orangeButtonMesh.receiveShadow = true; scene.add(orangeButtonMesh); // Purple block (autobuyer) const purpleButtonMaterial = new THREE.MeshStandardMaterial({ color: 0x800080, metalness: 0.5, roughness: 0.5, emissive: 0x800080, emissiveIntensity: 0.2 }); const purpleButtonMesh = new THREE.Mesh(buttonGeometry, purpleButtonMaterial); purpleButtonMesh.position.set(-10, 1.5, -10); purpleButtonMesh.castShadow = true; purpleButtonMesh.receiveShadow = true; scene.add(purpleButtonMesh); // Create physics bodies for buttons const buttonShape = new CANNON.Box(new CANNON.Vec3(1.5, 1.5, 1.5)); // Green button physics const greenButtonBody = new CANNON.Body({ mass: 0, position: new CANNON.Vec3(10, 1.5, 10), shape: buttonShape }); world.addBody(greenButtonBody); // Blue button physics const blueButtonBody = new CANNON.Body({ mass: 0, position: new CANNON.Vec3(-10, 1.5, 10), shape: buttonShape }); world.addBody(blueButtonBody); // Yellow button physics const yellowButtonBody = new CANNON.Body({ mass: 0, position: new CANNON.Vec3(0, 1.5, -10), shape: buttonShape }); world.addBody(yellowButtonBody); // Red button physics const redButtonBody = new CANNON.Body({ mass: 0, position: new CANNON.Vec3(10, 1.5, -10), shape: buttonShape }); world.addBody(redButtonBody); // Orange button physics const orangeButtonBody = new CANNON.Body({ mass: 0, position: new CANNON.Vec3(0, 1.5, 10), shape: buttonShape }); world.addBody(orangeButtonBody); // Purple button physics const purpleButtonBody = new CANNON.Body({ mass: 0, position: new CANNON.Vec3(-10, 1.5, -10), shape: buttonShape }); world.addBody(purpleButtonBody); // Add click detection const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function onMouseClick(event) { // Calculate mouse position in normalized device coordinates const rect = canvas.getBoundingClientRect(); mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; // Update the picking ray with the camera and mouse position raycaster.setFromCamera(mouse, camera); // Calculate objects intersecting the picking ray const greenIntersects = raycaster.intersectObject(greenButtonMesh); const blueIntersects = raycaster.intersectObject(blueButtonMesh); const yellowIntersects = raycaster.intersectObject(yellowButtonMesh); const redIntersects = raycaster.intersectObject(redButtonMesh); const purpleIntersects = raycaster.intersectObject(purpleButtonMesh); const orangeIntersects = raycaster.intersectObject(orangeButtonMesh); if (greenIntersects.length > 0) { // Green button was clicked greenButtonMaterial.emissiveIntensity = 0.8; setTimeout(() => { greenButtonMaterial.emissiveIntensity = 0.2; }, 200); // Increase currency currency += 1; currencyDisplay.innerHTML = `§${format(currency)}`; } else if (blueIntersects.length > 0) { // Blue button was clicked if (currency >= 10) { blueButtonMaterial.emissiveIntensity = 0.8; setTimeout(() => { blueButtonMaterial.emissiveIntensity = 0.2; }, 200); // Purchase currency/s upgrade currency -= 10; currencyPerSecond += 1; currencyDisplay.innerHTML = `§${format(currency)}`; } } else if (yellowIntersects.length > 0 && currency >= 1000) { // Yellow button was clicked and currency is sufficient yellowButtonMaterial.emissiveIntensity = 0.8; setTimeout(() => { yellowButtonMaterial.emissiveIntensity = 0.2; }, 200); // Calculate new alphas const log10Value = Math.log10(currency); const newAlphas = Math.pow(log10Value, 2); alphas += newAlphas; // Reset currency and currency per second currency = 0; currencyPerSecond = 0; // Update displays currencyDisplay.innerHTML = `§${format(currency)}`; currencyPerSecondDisplay.innerHTML = `[§${format(currencyPerSecond)}/s]`; alphaDisplay.innerHTML = `@${format(alphas)}`; } else if (redIntersects.length > 0) { // Red button was clicked redButtonMaterial.emissiveIntensity = 0.8; setTimeout(() => { redButtonMaterial.emissiveIntensity = 0.2; }, 200); // Increase energy energy += 1; energyDisplay.innerHTML = `⚡${format(energy)}`; } else if (purpleIntersects.length > 0 && currency >= 50) { // Purple button was clicked purpleButtonMaterial.emissiveIntensity = 0.8; setTimeout(() => { purpleButtonMaterial.emissiveIntensity = 0.2; }, 200); // Purchase autobuyer currency -= 50; purpleBricks += 1; currencyDisplay.innerHTML = `§${format(currency)}`; } else if (orangeIntersects.length > 0 && currency >= 100) { // Orange button was clicked orangeButtonMaterial.emissiveIntensity = 0.8; setTimeout(() => { orangeButtonMaterial.emissiveIntensity = 0.2; }, 200); // Purchase auto-generator currency -= 100; autoGenerators += 1; currencyDisplay.innerHTML = `§${format(currency)}`; } } // Add click event listener canvas.addEventListener('click', onMouseClick); function animate() { requestAnimationFrame(animate); const deltaTime = Math.min(clock.getDelta(), 0.1); if (assetsLoaded) { world.step(deltaTime); updateCharacterMovement(deltaTime); // Update character movement updateCamera(); // Update camera to follow character if (character && characterBody) { // Adjust the character model's position based on the physics body character.position.copy(characterBody.position); } // Update currency display position above character if (character) { // Update currency display position const currencyVector = character.position.clone(); currencyVector.y += characterConfig.height + 1; currencyVector.project(camera); const currencyX = (currencyVector.x * 0.5 + 0.5) * parentDiv.clientWidth; const currencyY = (-currencyVector.y * 0.5 + 0.5) * parentDiv.clientHeight; currencyDisplay.style.transform = `translate(${currencyX}px, ${currencyY}px) translate(-50%, -50%)`; // Update currency per second display position slightly below currency display currencyPerSecondDisplay.style.transform = `translate(${currencyX}px, ${currencyY + 20}px) translate(-50%, -50%)`; currencyPerSecondDisplay.innerHTML = `[§${format(currencyPerSecond)}/s]`; // Send player update sendPlayerUpdate(); // Update other players' displays players.forEach((playerData, id) => { const display = playerDisplays.get(id); if (display) { const playerPos = new THREE.Vector3( playerData.position.x, playerData.position.y + characterConfig.height + 1.5, playerData.position.z ); playerPos.project(camera); const x = (playerPos.x * 0.5 + 0.5) * parentDiv.clientWidth; const y = (-playerPos.y * 0.5 + 0.5) * parentDiv.clientHeight; display.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%)`; display.innerHTML = `${playerData.username}\n§${format(playerData.currency)}${!autobuyersEnabled ? '\n[Autobuyers OFF]' : ''}`; } }); // Update green button label position const greenVector = greenButtonMesh.position.clone(); greenVector.y += 2.5; greenVector.project(camera); const greenX = (greenVector.x * 0.5 + 0.5) * parentDiv.clientWidth; const greenY = (-greenVector.y * 0.5 + 0.5) * parentDiv.clientHeight; greenButtonLabel.style.transform = `translate(${greenX}px, ${greenY}px) translate(-50%, -50%)`; // Update blue button label position const blueVector = blueButtonMesh.position.clone(); blueVector.y += 2.5; blueVector.project(camera); const blueX = (blueVector.x * 0.5 + 0.5) * parentDiv.clientWidth; const blueY = (-blueVector.y * 0.5 + 0.5) * parentDiv.clientHeight; blueButtonLabel.style.transform = `translate(${blueX}px, ${blueY}px) translate(-50%, -50%)`; // Update yellow button label position const yellowVector = yellowButtonMesh.position.clone(); yellowVector.y += 2.5; yellowVector.project(camera); const yellowX = (yellowVector.x * 0.5 + 0.5) * parentDiv.clientWidth; const yellowY = (-yellowVector.y * 0.5 + 0.5) * parentDiv.clientHeight; yellowButtonLabel.style.transform = `translate(${yellowX}px, ${yellowY}px) translate(-50%, -50%)`; // Update red button label position const redVector = redButtonMesh.position.clone(); redVector.y += 2.5; redVector.project(camera); const redX = (redVector.x * 0.5 + 0.5) * parentDiv.clientWidth; const redY = (-redVector.y * 0.5 + 0.5) * parentDiv.clientHeight; redButtonLabel.style.transform = `translate(${redX}px, ${redY}px) translate(-50%, -50%)`; // Update purple button label position const purpleVector = purpleButtonMesh.position.clone(); purpleVector.y += 2.5; purpleVector.project(camera); const purpleX = (purpleVector.x * 0.5 + 0.5) * parentDiv.clientWidth; const purpleY = (-purpleVector.y * 0.5 + 0.5) * parentDiv.clientHeight; purpleButtonLabel.style.transform = `translate(${purpleX}px, ${purpleY}px) translate(-50%, -50%)`; // Update orange button label position const orangeVector = orangeButtonMesh.position.clone(); orangeVector.y += 2.5; orangeVector.project(camera); const orangeX = (orangeVector.x * 0.5 + 0.5) * parentDiv.clientWidth; const orangeY = (-orangeVector.y * 0.5 + 0.5) * parentDiv.clientHeight; orangeButtonLabel.style.transform = `translate(${orangeX}px, ${orangeY}px) translate(-50%, -50%)`; // Update energy display position const energyVector = character.position.clone(); energyVector.y += characterConfig.height + 3; energyVector.project(camera); const energyX = (energyVector.x * 0.5 + 0.5) * parentDiv.clientWidth; const energyY = (-energyVector.y * 0.5 + 0.5) * parentDiv.clientHeight; energyDisplay.style.transform = `translate(${energyX}px, ${energyY}px) translate(-50%, -50%)`; // Update alpha display position const alphaVector = character.position.clone(); alphaVector.y += characterConfig.height + 2; alphaVector.project(camera); const alphaX = (alphaVector.x * 0.5 + 0.5) * parentDiv.clientWidth; const alphaY = (-alphaVector.y * 0.5 + 0.5) * parentDiv.clientHeight; alphaDisplay.style.transform = `translate(${alphaX}px, ${alphaY}px) translate(-50%, -50%)`; } // No need to call controls.update() here as it's called in updateCamera() } composer.render(); } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; // Update camera camera.aspect = width / height; camera.updateProjectionMatrix(); // Update renderer and composer renderer.setSize(width, height); composer.setSize(width, height); // Update post-processing passes bloomPass.resolution.set(width, height); smaaPass.setSize(width, height); } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Start animation animate(); // Initialize format demonstration values const demoValues = [{ raw: 1000, label: '1k' }, { raw: 10000, label: '10k' }, { raw: 1000000, label: '1M' }, { raw: 1e100, label: '10DTg' }, { raw: 1.79e308, label: '179UCe' }]; // Function to update demo formats in settings panel function updateDemoFormats() { demoContent.innerHTML = demoValues.map(val => `${val.label} → ${format(val.raw)}` ).join('
'); } // Initial update of demo formats updateDemoFormats();