// Import necessary modules import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { FontLoader } from 'three/addons/loaders/FontLoader.js'; import { TextGeometry } from 'three/addons/geometries/TextGeometry.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; // 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?b3Bg'; } return url; }); const parentDiv = document.getElementById('renderDiv'); 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); // Create title screen const titleScreen = document.createElement('div'); titleScreen.style.position = 'absolute'; titleScreen.style.top = '0'; titleScreen.style.left = '0'; titleScreen.style.width = '100%'; titleScreen.style.height = '100%'; titleScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.85)'; titleScreen.style.color = 'white'; titleScreen.style.display = 'flex'; titleScreen.style.flexDirection = 'column'; titleScreen.style.justifyContent = 'center'; titleScreen.style.alignItems = 'center'; titleScreen.style.fontSize = '24px'; titleScreen.style.fontFamily = 'Arial, sans-serif'; titleScreen.style.zIndex = '1000'; // Add title and controls information titleScreen.innerHTML = `

Village Adventure

Controls:

WASD - Move around

SPACE - Jump

Mouse - Look around

E - Interact with enemies (dice game)

I - Toggle inventory

P - Save game

ESC - Save game

Click anywhere to start

`; parentDiv.appendChild(titleScreen); // Handle title screen click // Handle new game and load game buttons document.getElementById('newGameBtn').addEventListener('click', () => { startNewGame(); titleScreen.style.display = 'none'; canvas.requestPointerLock(); }); document.getElementById('loadGameBtn').addEventListener('click', () => { loadGame(); titleScreen.style.display = 'none'; canvas.requestPointerLock(); }); // 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(); // Add fog for distance fade scene.fog = new THREE.Fog(0x87ceeb, 100, 1500); 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'); const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 2000 // Increased far plane for larger world ); // Adjusted camera position camera.position.set(0, 15, 30); camera.lookAt(0, 0, 0); // Camera settings for first person view const cameraSettings = { height: 4.5, // Eye height from ground smoothSpeed: 0.1, rotationSpeed: 0.5, minPolarAngle: 0.1, maxPolarAngle: Math.PI - 0.1, sensitivity: 0.002, // Mouse look sensitivity }; // 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(1800, 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); // Setup first person controls let yaw = 0; let pitch = 0; // Lock pointer for first person view canvas.addEventListener('click', () => { if (titleScreen.style.display === 'none') { canvas.requestPointerLock(); } }); // Mouse move handler for first person view document.addEventListener('mousemove', (event) => { if (document.pointerLockElement === canvas && titleScreen.style.display === 'none') { yaw -= event.movementX * cameraSettings.sensitivity; pitch -= event.movementY * cameraSettings.sensitivity; // Clamp pitch to prevent camera flipping pitch = Math.max(-Math.PI / 2 + 0.1, Math.min(Math.PI / 2 - 0.1, pitch)); } }); // Create flat terrain function createTerrain() { const size = 1000; // Much larger terrain // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size, 100, 100); // Added segments for better detail const texture = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_diffuse.png?CEVh'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?oF66'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(100, 100); // Increased texture repeat for larger terrain 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; } // Create basic house function createHouse(x, z, rotation = 0) { const house = new THREE.Group(); // House base (cube) const baseGeometry = new THREE.BoxGeometry(8, 6, 8); const baseMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc, roughness: 0.7, metalness: 0.1 }); const base = new THREE.Mesh(baseGeometry, baseMaterial); base.position.y = 3; base.castShadow = true; base.receiveShadow = true; // Roof (pyramid) const roofGeometry = new THREE.ConeGeometry(6, 4, 4); const roofMaterial = new THREE.MeshStandardMaterial({ color: 0x8b4513, roughness: 0.8, metalness: 0.1 }); const roof = new THREE.Mesh(roofGeometry, roofMaterial); roof.position.y = 8; roof.rotation.y = Math.PI / 4; roof.castShadow = true; // Add door const doorGeometry = new THREE.PlaneGeometry(2, 3); const doorMaterial = new THREE.MeshStandardMaterial({ color: 0x4a3520, roughness: 0.9, metalness: 0.1 }); const door = new THREE.Mesh(doorGeometry, doorMaterial); door.position.z = 4.01; door.position.y = 1.5; // Add windows const windowGeometry = new THREE.PlaneGeometry(1.5, 1.5); const windowMaterial = new THREE.MeshStandardMaterial({ color: 0x87ceeb, roughness: 0.3, metalness: 0.8 }); const window1 = new THREE.Mesh(windowGeometry, windowMaterial); window1.position.set(-2, 3.5, 4.01); const window2 = new THREE.Mesh(windowGeometry, windowMaterial); window2.position.set(2, 3.5, 4.01); house.add(base, roof, door, window1, window2); // Position and rotate the house house.position.set(x, 0, z); house.rotation.y = rotation; // Add physics const houseShape = new CANNON.Box(new CANNON.Vec3(4, 3, 4)); const houseBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); houseBody.addShape(houseShape); houseBody.position.set(x, 3, z); houseBody.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), rotation); world.addBody(houseBody); return house; } // Create dice for the game function createDice() { const dice = new THREE.Group(); // Create dice cube const diceGeometry = new THREE.BoxGeometry(1.5, 1.5, 1.5); const diceMaterial = new THREE.MeshPhysicalMaterial({ color: 0xeeeeee, roughness: 0.2, metalness: 0.1, clearcoat: 0.8, clearcoatRoughness: 0.2 }); const diceMesh = new THREE.Mesh(diceGeometry, diceMaterial); diceMesh.castShadow = true; diceMesh.receiveShadow = true; // Add dot patterns for numbers const dotGeometry = new THREE.CircleGeometry(0.15, 16); const dotMaterial = new THREE.MeshStandardMaterial({ color: 0x000000, roughness: 0.4, metalness: 0.1 }); // Define dot positions for each face const dotPositions = { front: [ // Face 1 [0, 0, 0.76] ], right: [ // Face 2 [-0.25, 0.25, 0.76], [0.25, -0.25, 0.76] ], top: [ // Face 3 [-0.25, 0.25, 0.76], [0, 0, 0.76], [0.25, -0.25, 0.76] ], bottom: [ // Face 4 [-0.25, 0.25, 0.76], [0.25, 0.25, 0.76], [-0.25, -0.25, 0.76], [0.25, -0.25, 0.76] ], left: [ // Face 5 [-0.25, 0.25, 0.76], [0.25, 0.25, 0.76], [0, 0, 0.76], [-0.25, -0.25, 0.76], [0.25, -0.25, 0.76] ], back: [ // Face 6 [-0.25, 0.25, 0.76], [0.25, 0.25, 0.76], [-0.25, 0, 0.76], [0.25, 0, 0.76], [-0.25, -0.25, 0.76], [0.25, -0.25, 0.76] ] }; // Add dots to faces // Front face (1) const frontGroup = new THREE.Group(); dotPositions.front.forEach(pos => { const dot = new THREE.Mesh(dotGeometry, dotMaterial); dot.position.set(pos[0], pos[1], pos[2]); frontGroup.add(dot); }); dice.add(frontGroup); // Back face (6) const backGroup = new THREE.Group(); dotPositions.back.forEach(pos => { const dot = new THREE.Mesh(dotGeometry, dotMaterial); dot.position.set(pos[0], pos[1], -pos[2]); dot.rotation.y = Math.PI; backGroup.add(dot); }); dice.add(backGroup); // Right face (2) const rightGroup = new THREE.Group(); dotPositions.right.forEach(pos => { const dot = new THREE.Mesh(dotGeometry, dotMaterial); dot.position.set(0.76, pos[1], -pos[0]); dot.rotation.y = Math.PI / 2; rightGroup.add(dot); }); dice.add(rightGroup); // Left face (5) const leftGroup = new THREE.Group(); dotPositions.left.forEach(pos => { const dot = new THREE.Mesh(dotGeometry, dotMaterial); dot.position.set(-0.76, pos[1], pos[0]); dot.rotation.y = -Math.PI / 2; leftGroup.add(dot); }); dice.add(leftGroup); // Top face (3) const topGroup = new THREE.Group(); dotPositions.top.forEach(pos => { const dot = new THREE.Mesh(dotGeometry, dotMaterial); dot.position.set(pos[0], 0.76, -pos[1]); dot.rotation.x = -Math.PI / 2; topGroup.add(dot); }); dice.add(topGroup); // Bottom face (4) const bottomGroup = new THREE.Group(); dotPositions.bottom.forEach(pos => { const dot = new THREE.Mesh(dotGeometry, dotMaterial); dot.position.set(pos[0], -0.76, pos[1]); dot.rotation.x = Math.PI / 2; bottomGroup.add(dot); }); dice.add(bottomGroup); dice.add(diceMesh); return dice; } // Create enemy for dice game function createEnemy(x, z) { const enemy = new THREE.Group(); // Enemy body const bodyGeometry = new THREE.BoxGeometry(3, 5, 3); const bodyMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, roughness: 0.7, metalness: 0.3 }); const body = new THREE.Mesh(bodyGeometry, bodyMaterial); body.position.y = 2.5; body.castShadow = true; enemy.add(body); enemy.position.set(x, 0, z); // Add physics const enemyShape = new CANNON.Box(new CANNON.Vec3(1.5, 2.5, 1.5)); const enemyBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); enemyBody.addShape(enemyShape); enemyBody.position.set(x, 2.5, z); world.addBody(enemyBody); // Add to game state const enemyObject = { mesh: enemy, body: enemyBody, active: false, lastGameTime: 0, // Cooldown for dice game cooldownTime: 5000 // 5 seconds cooldown }; gameState.enemies.push(enemyObject); return enemy; } // Create a tree function createTree(x, z) { const tree = new THREE.Group(); // Tree trunk const trunkGeometry = new THREE.CylinderGeometry(0.5, 0.7, 4, 8); const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8b4513, roughness: 0.9, metalness: 0.1 }); const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial); trunk.position.y = 2; trunk.castShadow = true; // Tree top const topGeometry = new THREE.ConeGeometry(2, 6, 8); const topMaterial = new THREE.MeshStandardMaterial({ color: 0x228b22, roughness: 0.8, metalness: 0.1 }); const top = new THREE.Mesh(topGeometry, topMaterial); top.position.y = 6; top.castShadow = true; tree.add(trunk, top); tree.position.set(x, 0, z); // Add physics const treeShape = new CANNON.Cylinder(0.5, 0.7, 4, 8); const treeBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); treeBody.addShape(treeShape); treeBody.position.set(x, 2, z); world.addBody(treeBody); return tree; } // Create shop function createShop(x, z, rotation = 0) { const shop = new THREE.Group(); // Shop base const baseGeometry = new THREE.BoxGeometry(12, 8, 10); const baseMaterial = new THREE.MeshStandardMaterial({ color: 0x8b4513, roughness: 0.7, metalness: 0.1 }); const base = new THREE.Mesh(baseGeometry, baseMaterial); base.position.y = 4; base.castShadow = true; base.receiveShadow = true; // Shop roof const roofGeometry = new THREE.ConeGeometry(8, 6, 4); const roofMaterial = new THREE.MeshStandardMaterial({ color: 0x4a3520, roughness: 0.8, metalness: 0.1 }); const roof = new THREE.Mesh(roofGeometry, roofMaterial); roof.position.y = 11; roof.rotation.y = Math.PI / 4; roof.castShadow = true; // Shop window const windowGeometry = new THREE.PlaneGeometry(4, 2); const windowMaterial = new THREE.MeshStandardMaterial({ color: 0x87ceeb, metalness: 0.8, roughness: 0.2, emissive: 0x87ceeb, emissiveIntensity: 0.5 }); const shopWindow = new THREE.Mesh(windowGeometry, windowMaterial); shopWindow.position.set(0, 5, 5.01); // Shop sign const signGeometry = new THREE.BoxGeometry(8, 1.5, 0.3); const signMaterial = new THREE.MeshStandardMaterial({ color: 0xffd700, metalness: 0.6, roughness: 0.3, emissive: 0xffd700, emissiveIntensity: 0.2 }); const sign = new THREE.Mesh(signGeometry, signMaterial); sign.position.set(0, 7.5, 5.2); shop.add(base, roof, shopWindow, sign); shop.position.set(x, 0, z); shop.rotation.y = rotation; // Add physics const shopShape = new CANNON.Box(new CANNON.Vec3(6, 4, 5)); const shopBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); shopBody.addShape(shopShape); shopBody.position.set(x, 4, z); shopBody.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), rotation); world.addBody(shopBody); return shop; } // Create village function createVillage() { const village = new THREE.Group(); // Create a circular arrangement of houses const radius = 40; const numHouses = 7; // Reduced to make room for shop for (let i = 0; i < numHouses; i++) { const angle = (i / numHouses) * Math.PI * 2; const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; const house = createHouse(x, z, angle + Math.PI); village.add(house); } // Add shop at a specific position in the village circle const shopAngle = (numHouses / numHouses) * Math.PI * 2; const shopX = Math.cos(shopAngle) * radius; const shopZ = Math.sin(shopAngle) * radius; // Store shop position in gameState gameState.shop.position.x = shopX; gameState.shop.position.z = shopZ; const shop = createShop(shopX, shopZ, shopAngle + Math.PI); village.add(shop); // Add trees around the village const numTrees = 20; for (let i = 0; i < numTrees; i++) { const angle = Math.random() * Math.PI * 2; const treeRadius = radius + 15 + Math.random() * 20; const x = Math.cos(angle) * treeRadius; const z = Math.sin(angle) * treeRadius; const tree = createTree(x, z); village.add(tree); } // Create central area const centerGeometry = new THREE.CircleGeometry(10, 32); const centerMaterial = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.1 }); const centerArea = new THREE.Mesh(centerGeometry, centerMaterial); centerArea.rotation.x = -Math.PI / 2; centerArea.position.y = 0.1; village.add(centerArea); return village; } // Create forest function createForest() { const forest = new THREE.Group(); // Create dense forest area const forestRadius = 200; const numTrees = 500; for (let i = 0; i < numTrees; i++) { const angle = Math.random() * Math.PI * 2; const radius = Math.random() * forestRadius; // Use Perlin noise or similar for natural distribution const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; // Avoid placing trees in the village area const distanceToCenter = Math.sqrt(x * x + z * z); if (distanceToCenter > 60) { // Keep clear of village const tree = createTree(x, z); forest.add(tree); } } // Add some enemies scattered in the forest const numEnemies = 10; for (let i = 0; i < numEnemies; i++) { const angle = Math.random() * Math.PI * 2; const radius = 80 + Math.random() * 100; // Place enemies in mid to outer forest const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; const enemy = createEnemy(x, z); forest.add(enemy); } return forest; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(skyColor, 2.0); sunLight.position.set(-200, 400, -200); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 4096; sunLight.shadow.mapSize.height = 4096; sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 1000; sunLight.shadow.camera.left = -500; sunLight.shadow.camera.right = 500; sunLight.shadow.camera.top = 500; sunLight.shadow.camera.bottom = -500; 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, }; // Game State const gameState = { coins: 0, diceRolling: false, enemies: [], activeEnemy: null, displayCoins: null, inventory: { isOpen: false, items: [], selected: -1 }, saveInterval: null, // For auto-save shop: { isOpen: false, currentShop: null, position: { x: 0, z: 0 }, // Store shop position items: [{ name: 'Health Potion', price: 50, icon: '❤️' }, { name: 'Speed Boost', price: 100, icon: '⚡' }, { name: 'Shield', price: 150, icon: '🛡️' }] } }; // Create coin display const coinDisplay = () => { const displayGroup = new THREE.Group(); // Create coin icon const coinGeometry = new THREE.CircleGeometry(0.3, 32); const coinMaterial = new THREE.MeshStandardMaterial({ color: 0xffd700, metalness: 0.8, roughness: 0.3, emissive: 0xffd700, emissiveIntensity: 0.2 }); const coinMesh = new THREE.Mesh(coinGeometry, coinMaterial); coinMesh.position.set(-0.8, 0, 0); displayGroup.add(coinMesh); // Create canvas for dynamic score display const canvas = document.createElement('canvas'); canvas.width = 256; canvas.height = 128; const context = canvas.getContext('2d'); // Create texture from canvas const texture = new THREE.CanvasTexture(canvas); const scoreGeometry = new THREE.PlaneGeometry(1, 0.5); const scoreMaterial = new THREE.MeshBasicMaterial({ map: texture, transparent: true, side: THREE.DoubleSide }); const scoreMesh = new THREE.Mesh(scoreGeometry, scoreMaterial); scoreMesh.position.set(0.3, 0, 0); displayGroup.add(scoreMesh); // Function to update score display const updateScore = () => { context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = gameState.coins > 0 ? '#00ff00' : '#ffffff'; context.font = 'bold 80px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText(gameState.coins.toString(), canvas.width / 2, canvas.height / 2); texture.needsUpdate = true; }; // Store references for updates gameState.displayCoins = scoreMesh; gameState.updateScore = updateScore; // Initial score update updateScore(); // Position in view displayGroup.position.set(1, 2, -3); displayGroup.rotation.y = Math.PI; return displayGroup; }; // 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 shop UI function createShopUI() { const shopGroup = new THREE.Group(); // Create background panel const bgGeometry = new THREE.PlaneGeometry(4, 3); const bgMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.8, side: THREE.DoubleSide }); const background = new THREE.Mesh(bgGeometry, bgMaterial); shopGroup.add(background); // Create shop title const canvas = document.createElement('canvas'); canvas.width = 512; canvas.height = 64; const context = canvas.getContext('2d'); context.fillStyle = '#ffd700'; context.font = 'bold 48px Arial'; context.textAlign = 'center'; context.fillText('SHOP', canvas.width / 2, canvas.height / 2 + 16); const titleTexture = new THREE.CanvasTexture(canvas); const titleGeometry = new THREE.PlaneGeometry(2, 0.25); const titleMaterial = new THREE.MeshBasicMaterial({ map: titleTexture, transparent: true, side: THREE.DoubleSide }); const titleMesh = new THREE.Mesh(titleGeometry, titleMaterial); titleMesh.position.set(0, 1.3, 0.01); shopGroup.add(titleMesh); // Create item slots gameState.shop.items.forEach((item, index) => { const slotGroup = new THREE.Group(); // Item background const slotGeometry = new THREE.PlaneGeometry(3.5, 0.4); const slotMaterial = new THREE.MeshBasicMaterial({ color: 0x333333, transparent: true, opacity: 0.9, side: THREE.DoubleSide }); const slot = new THREE.Mesh(slotGeometry, slotMaterial); slotGroup.add(slot); // Create item text const itemCanvas = document.createElement('canvas'); itemCanvas.width = 512; itemCanvas.height = 64; const itemContext = itemCanvas.getContext('2d'); itemContext.fillStyle = '#ffffff'; itemContext.font = '32px Arial'; itemContext.textAlign = 'left'; itemContext.fillText(`${item.icon} ${item.name} - ${item.price} coins`, 10, 40); const itemTexture = new THREE.CanvasTexture(itemCanvas); const itemTextGeometry = new THREE.PlaneGeometry(3.4, 0.35); const itemTextMaterial = new THREE.MeshBasicMaterial({ map: itemTexture, transparent: true, side: THREE.DoubleSide }); const itemTextMesh = new THREE.Mesh(itemTextGeometry, itemTextMaterial); itemTextMesh.position.z = 0.01; slotGroup.add(itemTextMesh); slotGroup.position.y = 0.8 - (index * 0.5); shopGroup.add(slotGroup); }); // Position shop UI in view shopGroup.position.set(0, 0, -2); shopGroup.visible = false; return shopGroup; } // Create inventory UI function createInventoryUI() { const inventoryGroup = new THREE.Group(); // Create background panel const bgGeometry = new THREE.PlaneGeometry(4, 3); const bgMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.7, side: THREE.DoubleSide }); const background = new THREE.Mesh(bgGeometry, bgMaterial); inventoryGroup.add(background); // Create slot grid (3x4 grid of slots) const slotSize = 0.5; const padding = 0.1; const startX = -1.5; const startY = 1; for (let row = 0; row < 3; row++) { for (let col = 0; col < 4; col++) { const slotGeometry = new THREE.PlaneGeometry(slotSize, slotSize); const slotMaterial = new THREE.MeshBasicMaterial({ color: 0x333333, transparent: true, opacity: 0.9, side: THREE.DoubleSide }); const slot = new THREE.Mesh(slotGeometry, slotMaterial); slot.position.set( startX + col * (slotSize + padding), startY - row * (slotSize + padding), 0.01 ); inventoryGroup.add(slot); } } // Position inventory in view inventoryGroup.position.set(0, 0, -2); inventoryGroup.visible = false; return inventoryGroup; } // Save and load functions function saveGame() { const saveData = { coins: gameState.coins, inventory: gameState.inventory.items, lastSaved: new Date().toISOString() }; localStorage.setItem('villageAdventureSave', JSON.stringify(saveData)); console.log('Game saved!'); } function loadGame() { const saveData = localStorage.getItem('villageAdventureSave'); if (saveData) { const data = JSON.parse(saveData); gameState.coins = data.coins; gameState.inventory.items = data.inventory; // Update displays if (gameState.updateScore) { gameState.updateScore(); } console.log('Game loaded!'); } else { console.log('No save data found!'); startNewGame(); } } function startNewGame() { // Reset game state gameState.coins = 0; gameState.inventory.items = []; // Update displays if (gameState.updateScore) { gameState.updateScore(); } // Clear old save if exists localStorage.removeItem('villageAdventureSave'); console.log('New game started!'); } // Setup auto-save function setupAutoSave() { // Auto-save every 5 minutes gameState.saveInterval = setInterval(saveGame, 5 * 60 * 1000); } // Add keyboard event listeners window.addEventListener('keydown', (event) => { if (titleScreen.style.display !== 'none') return; if (event.code === 'Space') { keysPressed.space = true; } else if (event.code === 'KeyI') { gameState.inventory.isOpen = !gameState.inventory.isOpen; if (inventoryUI) { inventoryUI.visible = gameState.inventory.isOpen; } } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = true; } }); // Add save on ESC or P window.addEventListener('keyup', (event) => { if (event.code === 'Escape' || event.code === 'KeyP') { saveGame(); // Show save notification const notification = document.createElement('div'); notification.style.position = 'absolute'; notification.style.top = '20px'; notification.style.left = '50%'; notification.style.transform = 'translateX(-50%)'; notification.style.backgroundColor = 'rgba(0, 255, 0, 0.8)'; notification.style.color = 'white'; notification.style.padding = '10px 20px'; notification.style.borderRadius = '5px'; notification.style.fontFamily = 'Arial, sans-serif'; notification.style.zIndex = '1000'; notification.textContent = 'Game Saved!'; document.body.appendChild(notification); // Remove notification after 2 seconds setTimeout(() => { notification.remove(); }, 2000); return; } if (event.code === 'Space') { keysPressed.space = false; } else if (event.code === 'KeyE') { if (!gameState.diceRolling && characterBody) { const characterPos = new THREE.Vector3( characterBody.position.x, characterBody.position.y, characterBody.position.z ); // Check if near shop const shopDistance = Math.sqrt( Math.pow(characterPos.x - gameState.shop.position.x, 2) + Math.pow(characterPos.z - gameState.shop.position.z, 2) ); if (shopDistance < 15) { // Toggle shop UI gameState.shop.isOpen = !gameState.shop.isOpen; shopUI.visible = gameState.shop.isOpen; return; } // Find nearest enemy let nearestEnemy = null; let nearestDistance = Infinity; const currentTime = Date.now(); gameState.enemies.forEach(enemy => { // Check if enough time has passed since last game if (currentTime - enemy.lastGameTime >= enemy.cooldownTime) { const enemyPos = enemy.mesh.position; const distance = characterPos.distanceTo(enemyPos); if (distance < 10 && distance < nearestDistance) { nearestDistance = distance; nearestEnemy = enemy; } } }); if (nearestEnemy) { gameState.activeEnemy = nearestEnemy; startDiceGame(); } } } 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?hb5J'; gltfLoader.load(characterUrl, (gltf) => { const model = gltf.scene; // Make the model invisible for first person view model.visible = false; 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 for first person view function updateCamera() { if (!characterBody) return; // Calculate camera position at character's eye level const eyePosition = new THREE.Vector3( characterBody.position.x, characterBody.position.y + cameraSettings.height, characterBody.position.z ); // Update camera position camera.position.copy(eyePosition); // Update camera rotation camera.rotation.order = 'YXZ'; // This order prevents gimbal lock camera.rotation.y = yaw; camera.rotation.x = pitch; } // ========================= // End of Character Integration // ========================= // Create initial scene const terrain = createTerrain(); const village = createVillage(); const forest = createForest(); scene.add(village); scene.add(forest); // Add coin display to camera const coinDisplayMesh = coinDisplay(); camera.add(coinDisplayMesh); // Create and add inventory UI to camera const inventoryUI = createInventoryUI(); const shopUI = createShopUI(); camera.add(inventoryUI); camera.add(shopUI); scene.add(camera); // Create dice for the game const gameDice = createDice(); scene.add(gameDice); gameDice.visible = false; 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 // Update dice game if (gameState.diceRolling) { // Smooth dice rolling animation const rollSpeed = Math.max(0, 1 - (Date.now() - gameState.diceRollTime) / 2000); gameDice.rotation.x += (15 * rollSpeed) * deltaTime; gameDice.rotation.y += (12 * rollSpeed) * deltaTime; gameDice.rotation.z += (18 * rollSpeed) * deltaTime; // Stop rolling after 2 seconds if (gameState.diceRollTime && (Date.now() - gameState.diceRollTime > 2000)) { const result = Math.floor(Math.random() * 6) + 1; // Set final rotation to show correct face const rotations = { 1: [0, 0, 0], // Front face (1) 2: [0, Math.PI / 2, 0], // Right face (2) 3: [Math.PI / 2, 0, 0], // Top face (3) 4: [-Math.PI / 2, 0, 0], // Bottom face (4) 5: [0, -Math.PI / 2, 0], // Left face (5) 6: [Math.PI, 0, 0] // Back face (6) }; const finalRotation = rotations[result]; gameDice.rotation.set(finalRotation[0], finalRotation[1], finalRotation[2]); endDiceRoll(result); } } if (character && characterBody) { // Adjust the character model's position based on the physics body character.position.copy(characterBody.position); } // 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); // Dice game functions function startDiceGame() { if (gameState.activeEnemy) { gameState.diceRolling = true; gameState.diceRollTime = Date.now(); // Position dice in front of camera const cameraDir = new THREE.Vector3(); camera.getWorldDirection(cameraDir); // Position dice slightly lower and closer to the camera const dicePos = camera.position.clone() .add(cameraDir.multiplyScalar(4)) // Closer to camera .sub(new THREE.Vector3(0, 0.5, 0)); // Slightly lower gameDice.position.copy(dicePos); // Add a spotlight to illuminate the dice // Create a more dramatic lighting setup for the dice const diceLight = new THREE.SpotLight(0xffffff, 3); diceLight.position.copy(camera.position).add(new THREE.Vector3(0, 2, 0)); diceLight.target = gameDice; diceLight.angle = Math.PI / 4; diceLight.distance = 15; diceLight.decay = 1; diceLight.penumbra = 0.2; // Add a second, softer light for better visibility const fillLight = new THREE.PointLight(0xffffff, 1); fillLight.position.copy(camera.position).add(new THREE.Vector3(-2, 0, -2)); fillLight.distance = 10; fillLight.decay = 2; // Store both lights gameDice.userData.spotlight = diceLight; gameDice.userData.fillLight = fillLight; scene.add(diceLight); scene.add(fillLight); // Store the light in the dice object for later removal gameDice.userData.spotlight = diceLight; scene.add(diceLight); gameDice.visible = true; } } function endDiceRoll(result) { gameState.diceRolling = false; gameDice.visible = false; // Remove the spotlight // Remove both lights if (gameDice.userData.spotlight) { scene.remove(gameDice.userData.spotlight); gameDice.userData.spotlight = null; } if (gameDice.userData.fillLight) { scene.remove(gameDice.userData.fillLight); gameDice.userData.fillLight = null; } if (gameState.activeEnemy) { // Update last game time gameState.activeEnemy.lastGameTime = Date.now(); // Calculate coins won based on dice roll const coinsWon = result * 5; // 5 coins per pip gameState.coins += coinsWon; // Update coin display if (gameState.displayCoins) { // Update score display if (gameState.updateScore) { gameState.updateScore(); } } gameState.activeEnemy = null; } } // Start animation and setup auto-save animate(); setupAutoSave();