<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...

Prompts (1)

Models (1)

GPT-6 Astra (Max)

Prompt

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>3D Open World Prototype</title> <style> body { margin: 0; overflow: hidden; font-family: system-ui, sans-serif; background: #000; } #hud { position: absolute; top: 16px; left: 16px; color: #fff; background: rgba(15, 23, 42, 0.75); padding: 14px 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); pointer-events: none; user-select: none; min-width: 220px; } #hud h2 { margin: 0 0 8px 0; font-size: 16px; letter-spacing: 0.5px; color: #38bdf8; } .stat { font-size: 13px; margin: 4px 0; } .bar-bg { width: 100%; height: 8px; background: #334155; border-radius: 4px; overflow: hidden; margin-top: 4px; } #stamina-bar { width: 100%; height: 100%; background: #22c55e; transition: width 0.1s; } #controls { position: absolute; bottom: 16px; left: 16px; color: #cbd5e1; background: rgba(15, 23, 42, 0.65); padding: 10px 14px; border-radius: 8px; font-size: 12px; pointer-events: none; } </style> </head> <body> <div id="hud"> <h2>AETHERIA OPEN WORLD</h2> <div class="stat">Shards Collected: <strong id="score">0 / 15</strong></div> <div class="stat">Time of Day: <strong id="time">12:00</strong></div> <div class="stat">Coords: <strong id="coords">0, 0</strong></div> <div class="stat">Stamina</div> <div class="bar-bg"><div id="stamina-bar"></div></div> </div> <div id="controls"> <strong>WASD</strong> Move  |  <strong>Shift</strong> Sprint  |  <strong>Space</strong> Jump  |  <strong>Click + Drag</strong> Orbit Camera </div> <script type="importmap"> { "imports": { "three": "https://unpkg.com" } } </script> <script type="module"> import * as THREE from 'three'; // 1. SCENE, CAMERA & RENDERER const scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x87ceeb, 0.0028); const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; document.body.appendChild(renderer.domElement); // 2. LIGHTING & DAY/NIGHT SYSTEM const ambientLight = new THREE.AmbientLight(0x404060, 0.8); scene.add(ambientLight); const sunLight = new THREE.DirectionalLight(0xfff5e4, 2.0); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 400; const d = 120; sunLight.shadow.camera.left = -d; sunLight.shadow.camera.right = d; sunLight.shadow.camera.top = d; sunLight.shadow.camera.bottom = -d; scene.add(sunLight); // 3. PROCEDURAL HEIGHTMAP FUNCTION function getTerrainHeight(x, z) { const wave1 = Math.sin(x * 0.02) * Math.cos(z * 0.02) * 14; const wave2 = Math.sin(x * 0.05 + z * 0.03) * 5; const ridge = Math.abs(Math.sin(x * 0.01 - z * 0.015)) * 18; return wave1 + wave2 + ridge - 6; } // 4. TERRAIN MESH GENERATION const worldSize = 600; const segments = 160; const terrainGeo = new THREE.PlaneGeometry(worldSize, worldSize, segments, segments); terrainGeo.rotateX(-Math.PI / 2); const posAttr = terrainGeo.attributes.position; const colors = []; const color = new THREE.Color(); for (let i = 0; i < posAttr.count; i++) { const x = posAttr.getX(i); const z = posAttr.getZ(i); const y = getTerrainHeight(x, z); posAttr.setY(i, y); // Biome vertex coloring based on elevation if (y < -2) color.setHex(0xe2c792); // Sand else if (y < 10) color.setHex(0x4d9e3a); // Grasslands else if (y < 20) color.setHex(0x6e6a63); // Mountain rock else color.setHex(0xf1f5f9); // Snow peaks colors.push(color.r, color.g, color.b); } terrainGeo.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3)); terrainGeo.computeVertexNormals(); const terrainMat = new THREE.MeshStandardMaterial({ vertexColors: true, roughness: 0.85 }); const terrain = new THREE.Mesh(terrainGeo, terrainMat); terrain.receiveShadow = true; scene.add(terrain); // Water plane const waterGeo = new THREE.PlaneGeometry(worldSize, worldSize); waterGeo.rotateX(-Math.PI / 2); const waterMat = new THREE.MeshStandardMaterial({ color: 0x0ea5e9, transparent: true, opacity: 0.72, roughness: 0.2 }); const water = new THREE.Mesh(waterGeo, waterMat); water.position.y = -3.2; scene.add(water); // 5. ENVIRONMENT PROPS (TREES & RUIN PILLARS) const trunkMat = new THREE.MeshStandardMaterial({ color: 0x5c4033 }); const leavesMat = new THREE.MeshStandardMaterial({ color: 0x2d6a4f }); const stoneMat = new THREE.MeshStandardMaterial({ color: 0x94a3b8, roughness: 0.9 }); for (let i = 0; i < 180; i++) { const x = (Math.random() - 0.5) * (worldSize - 40); const z = (Math.random() - 0.5) * (worldSize - 40); const y = getTerrainHeight(x, z); if (y > -1.5 && y < 11) { const tree = new THREE.Group(); const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.3, 0.5, 3, 6), trunkMat); trunk.position.y = 1.5; trunk.castShadow = true; const crown = new THREE.Mesh(new THREE.ConeGeometry(2.2, 5, 7), leavesMat); crown.position.y = 4.5; crown.castShadow = true; tree.add(trunk, crown); tree.position.set(x, y, z); scene.add(tree); } else if (y >= 11 && Math.random() > 0.65) { const pillar = new THREE.Mesh(new THREE.BoxGeometry(2, 6 + Math.random() * 6, 2), stoneMat); pillar.position.set(x, y + 2, z); pillar.castShadow = true; scene.add(pillar); } } // 6. COLLECTIBLE ENERGY SHARDS const shards = []; const shardGeo = new THREE.OctahedronGeometry(1.1, 0); const shardMat = new THREE.MeshStandardMaterial({ color: 0x38bdf8, emissive: 0x0284c7, emissiveIntensity: 0.8 }); for (let i = 0; i < 15; i++) { const x = (Math.random() - 0.5) * 320; const z = (Math.random() - 0.5) * 320; const y = getTerrainHeight(x, z) + 1.8; const shard = new THREE.Mesh(shardGeo, shardMat); shard.position.set(x, y, z); scene.add(shard); shards.push({ mesh: shard, baseY: y, collected: false }); } // 7. PLAYER CHARACTER & PHYSICS const player = new THREE.Group(); const bodyMesh = new THREE.Mesh( new THREE.CapsuleGeometry(0.6, 1.2, 4, 8), new THREE.MeshStandardMaterial({ color: 0xf97316 }) ); bodyMesh.position.y = 1.2; bodyMesh.castShadow = true; player.add(bodyMesh); scene.add(player); const state = { pos: new THREE.Vector3(0, 20, 0), velY: 0, grounded: false, stamina: 100, score: 0, yaw: 0, pitch: 0.35, timeOfDay: 0.35 }; // 8. INPUT & CAMERA CONTROLS const keys = {}; window.addEventListener('keydown', (e) => keys[e.code] = true); window.addEventListener('keyup', (e) => keys[e.code] = false); let isDragging = false; window.addEventListener('mousedown', () => isDragging = true); window.addEventListener('mouseup', () => isDragging = false); window.addEventListener('mousemove', (e) => { if (!isDragging) return; state.yaw -= e.movementX * 0.005; state.pitch = Math.max(0.1, Math.min(1.2, state.pitch + e.movementY * 0.005)); }); window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // 9. MAIN GAME LOOP const clock = new THREE.Clock(); const scoreEl = document.getElementById('score'); const timeEl = document.getElementById('time'); const coordsEl = document.getElementById('coords'); const staminaBar = document.getElementById('stamina-bar'); function animate() { requestAnimationFrame(animate); const dt = Math.min(clock.getDelta(), 0.05); // Day/Night progression state.timeOfDay = (state.timeOfDay + dt * 0.008) % 1; const sunAngle = state.timeOfDay * Math.PI * 2; sunLight.position.set(Math.cos(sunAngle) * 150, Math.sin(sunAngle) * 150, 60); const daylight = Math.max(0.12, Math.sin(sunAngle)); sunLight.intensity = daylight * 2.2; const skyColor = new THREE.Color().setHSL(0.58, 0.65, 0.1 + daylight * 0.55); scene.background = skyColor; scene.fog.color.copy(skyColor); const hours = Math.floor(state.timeOfDay * 24); const mins = Math.floor((state.timeOfDay * 24 * 60) % 60); timeEl.textContent = `${String(hours).padStart(2, '0')}:${String(mins).padStart(2, '0')}`; // Movement & Sprinting const forward = new THREE.Vector3(-Math.sin(state.yaw), 0, -Math.cos(state.yaw)); const right = new THREE.Vector3(Math.cos(state.yaw), 0, -Math.sin(state.yaw)); const moveDir = new THREE.Vector3(); if (keys['KeyW']) moveDir.add(forward); if (keys['KeyS']) moveDir.sub(forward); if (keys['KeyD']) moveDir.add(right); if (keys['KeyA']) moveDir.sub(right); if (moveDir.lengthSq() > 0) moveDir.normalize(); const sprinting = keys['ShiftLeft'] && state.stamina > 5 && moveDir.lengthSq() > 0; const speed = sprinting ? 22 : 11; if (sprinting) state.stamina = Math.max(0, state.stamina - 30 * dt); else state.stamina = Math.min(100, state.stamina + 18 * dt); staminaBar.style.width = `${state.stamina}%`; state.pos.addScaledVector(moveDir, speed * dt); if (moveDir.lengthSq() > 0) { ### Part 2: Scaling to a Complex Game with GPT-6 Astra Max Because a full AAA-style open-world game requires dozens of modular files, 3D models, physics engines, and AI behavior trees, **GPT-6 Astra Max** is specifically designed to run autonomous, multi-file development sessions inside OpenAI's [Codex desktop app](https://chatgpt.com "OpenAI ChatGPT Codex download"). #### Recommended Setup & Workflow * **1. Configure Your Toolchain:** Open the **Codex** desktop app, select **GPT-6 Astra Max**, and enable the **Blender MCP** plugin along with either **Three.js / WebGPU** (for browser games) or **Unreal Engine / Godot** (for desktop builds). * **2. Establish Visual Direction First:** Create a visual reference image of your target art style and world layout before generating code. Feed that image to **GPT-6 Astra Max** so all generated 3D assets, lighting, and shaders stay visually consistent. * **3. Use Modular Architecture:** Instruct Astra Max to split the codebase into separate TypeScript modules using **Vite**, **Three.js (WebGPU)**, and **Rapier physics** rather than one giant script. * **4. Generate Assets via Sub-Agents:** Have Astra Max orchestrate **Blender** to build custom rigged characters, vehicles, buildings, and foliage separately, verifying them before wiring them into your world chunks. #### Copy-Paste Prompt for GPT-6 Astra Max Paste this prompt into **Codex** with **GPT-6 Astra Max** active to expand the prototype above into a full multi-system open-world game: ```text Build a modular 3D open-world action RPG using TypeScript, Vite, Three.js, and Rapier physics. Organize the project into clean modules: 1. /world: Infinite chunk-based quadtree terrain streaming with 4 distinct biomes (coastal, forest, desert, alpine), procedural villages, and dynamic weather. 2. /entities: Player controller with melee/ranged combat, dodge rolling, inventory/equipment UI, and state-machine enemy AI (patrol, aggro, attack, flee). 3. /quests: JSON-driven quest log, NPC dialogue trees, and an interactive minimap with custom waypoints.player.rotation.y = Math.atan2(moveDir.x, moveDir.z); } // Gravity & Ground Collision if (keys['Space'] && state.grounded) { state.velY = 14; state.grounded = false; } state.velY -= 32 * dt; state.pos.y += state.velY * dt; const groundY = getTerrainHeight(state.pos.x, state.pos.z);if (state.pos.y <= groundY) { state.pos.y = groundY; state.velY = 0; state.grounded = true; } player.position.copy(state.pos); // Shard rotation & pickup shards.forEach((s, idx) => { if (s.collected) return; s.mesh.rotation.y += 2 * dt; s.mesh.position.y = s.baseY + Math.sin(clock.elapsedTime * 3 + idx) * 0.35; if (s.mesh.position.distanceTo(state.pos) < 2.5) { s.collected = true; s.mesh.visible = false; state.score++; scoreEl.textContent = ${state.score} / 15; } }); // Third-person camera follow const camDist = 11; camera.position.x = state.pos.x + Math.sin(state.yaw) * Math.cos(state.pitch) * camDist; camera.position.z = state.pos.z + Math.cos(state.yaw) * Math.cos(state.pitch) * camDist; camera.position.y = state.pos.y + Math.sin(state.pitch) * camDist + 2; camera.lookAt(state.pos.x, state.pos.y + 1.8, state.pos.z); coordsEl.textContent = ${Math.round(state.pos.x)}, ${Math.round(state.pos.z)}; renderer.render(scene, camera); } animate(); --- ### Part 2: Scaling to a Complex Game with GPT-6 Astra Max Because a full AAA-style open-world game requires dozens of modular files, 3D models, physics engines, and AI behavior trees, **GPT-6 Astra Max** is specifically designed to run autonomous, multi-file development sessions inside OpenAI's [Codex desktop app](https://chatgpt.com "OpenAI ChatGPT Codex download"). #### Recommended Setup & Workflow * **1. Configure Your Toolchain:** Open the **Codex** desktop app, select **GPT-6 Astra Max**, and enable the **Blender MCP** plugin along with either **Three.js / WebGPU** (for browser games) or **Unreal Engine / Godot** (for desktop builds). * **2. Establish Visual Direction First:** Create a visual reference image of your target art style and world layout before generating code. Feed that image to **GPT-6 Astra Max** so all generated 3D assets, lighting, and shaders stay visually consistent. * **3. Use Modular Architecture:** Instruct Astra Max to split the codebase into separate TypeScript modules using **Vite**, **Three.js (WebGPU)**, and **Rapier physics** rather than one giant script. * **4. Generate Assets via Sub-Agents:** Have Astra Max orchestrate **Blender** to build custom rigged characters, vehicles, buildings, and foliage separately, verifying them before wiring them into your world chunks. #### Copy-Paste Prompt for GPT-6 Astra Max Paste this prompt into **Codex** with **GPT-6 Astra Max** active to expand the prototype above into a full multi-system open-world game: ```text Build a modular 3D open-world action RPG using TypeScrite, Three.js, and Rapier physics. Organize the project into clean modu

A system prompt was added to support web rendering

OpenAI

GPT-6 Astra (Max)

Drag to resize