import * as THREE from "three"; import { OrbitControls } from "three/addons/controls/OrbitControls.js"; const renderDiv = document.getElementById("renderDiv"); if (!renderDiv) throw new Error("Missing render container"); renderDiv.innerHTML = ""; const renderRoot = document.getElementById("renderRoot"); const hud = document.createElement("div"); hud.style.position = "absolute"; hud.style.left = "12px"; hud.style.top = "12px"; hud.style.padding = "10px 12px"; hud.style.borderRadius = "12px"; hud.style.background = "rgba(2, 6, 23, 0.7)"; hud.style.border = "1px solid rgba(148, 163, 184, 0.25)"; hud.style.color = "rgba(226, 232, 240, 0.92)"; hud.style.fontSize = "12px"; hud.style.lineHeight = "1.4"; hud.textContent = "Kart Racer • WASD or Arrows to Drive • Space to Jump • 1 Lap to Win!"; renderRoot?.appendChild(hud); const scene = new THREE.Scene(); scene.background = new THREE.Color("#87ceeb"); // Sky blue scene.fog = new THREE.Fog("#87ceeb", 20, 150); const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 250); camera.position.set(6, 6, 8); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(Math.min(2, window.devicePixelRatio || 1)); renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.0; renderDiv.appendChild(renderer.domElement); const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.enablePan = false; controls.minDistance = 5; controls.maxDistance = 20; controls.maxPolarAngle = Math.PI * 0.48; const ambient = new THREE.AmbientLight(0xffffff, 0.2); scene.add(ambient); const sun = new THREE.DirectionalLight(0xffffff, 1.05); sun.position.set(10, 14, 6); scene.add(sun); const level = []; const checkpoints = []; const powerups = []; const addPowerup = (x, z) => { const geometry = new THREE.BoxGeometry(1.2, 1.2, 1.2); const material = new THREE.MeshToonMaterial({ color: 0xfacc15, transparent: true, opacity: 0.8 }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, 1.5, z); scene.add(mesh); powerups.push({ mesh, active: true, timer: 0, startPos: mesh.position.clone() }); }; const addBox = (x, y, z, w, h, d, color, tag) => { const geometry = new THREE.BoxGeometry(w, h, d); const material = new THREE.MeshToonMaterial({ color }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, y, z); scene.add(mesh); const half = new THREE.Vector3(w / 2, h / 2, d / 2); const entry = { mesh, geometry, material, half, tag }; level.push(entry); if (tag === "checkpoint") { checkpoints.push(entry); } return entry; }; // Track Ground addBox(0, -0.5, -40, 20, 1, 100, 0x334155, "ground"); // Main straight addBox(20, -0.5, -90, 60, 1, 20, 0x334155, "ground"); // Turn 1 addBox(50, -0.5, -40, 20, 1, 100, 0x334155, "ground"); // Back straight addBox(25, -0.5, 10, 70, 1, 20, 0x334155, "ground"); // Turn 2 // Walls addBox(-10.5, 1, -40, 1, 2, 100, 0xef4444, "wall"); // Left wall addBox(10.5, 1, -30, 1, 2, 80, 0xef4444, "wall"); // Right inner wall // Grass/Offroad const lava = addBox(0, -0.6, 0, 500, 0.1, 500, 0x22c55e, "lava"); // Powerups addPowerup(0, -20); addPowerup(0, -50); addPowerup(30, -90); addPowerup(50, -60); addPowerup(50, -20); addPowerup(25, 10); lava.mesh.material.opacity = 1; const goal = addBox(0, 0.5, -80, 20, 0.2, 2, 0xffffff, "goal"); // Finish line // Add some checkers to goal for(let i=0; i<10; i++) addBox(-9 + i*2, 0.51, -80, 1, 0.22, 1, i%2===0?0x000000:0xffffff, "deco"); const moving = { mesh: { position: new THREE.Vector3() } }; // Dummy to avoid errors const createKart = (chassisColor, seatColor) => { const group = new THREE.Group(); scene.add(group); const parts = []; const addPart = (w, h, d, x, y, z, color) => { const geometry = new THREE.BoxGeometry(w, h, d); const material = new THREE.MeshToonMaterial({ color }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(x, y, z); group.add(mesh); parts.push({ geometry, material, mesh }); return mesh; }; addPart(1.2, 0.4, 2.0, 0, 0.4, 0, chassisColor); addPart(0.9, 0.5, 0.8, 0, 0.8, -0.2, seatColor); addPart(0.3, 0.5, 0.5, 0.7, 0.25, 0.6, 0x111111); addPart(0.3, 0.5, 0.5, -0.7, 0.25, 0.6, 0x111111); addPart(0.3, 0.5, 0.5, 0.7, 0.25, -0.6, 0x111111); addPart(0.3, 0.5, 0.5, -0.7, 0.25, -0.6, 0x111111); return { group, parts }; }; const playerKart = createKart(0xef4444, 0x2563eb); const playerGroup = playerKart.group; const playerParts = playerKart.parts; const waypoints = [ new THREE.Vector3(0, 1, -40), new THREE.Vector3(0, 1, -90), new THREE.Vector3(50, 1, -90), new THREE.Vector3(50, 1, 10), new THREE.Vector3(0, 1, 10), new THREE.Vector3(0, 1, -80), ]; const npcs = [ { color: 0xeab308, seat: 0x111111, pos: new THREE.Vector3(-4, 1, 0), waypoint: 0, lastWaypoint: 0 }, { color: 0x8b5cf6, seat: 0x111111, pos: new THREE.Vector3(4, 1, 0), waypoint: 0, lastWaypoint: 0 }, ].map(data => { const kart = createKart(data.color, data.seat); return { ...data, group: kart.group, parts: kart.parts, vel: new THREE.Vector3(), yaw: 0, speed: 0, half: new THREE.Vector3(0.8, 0.5, 1.0), grounded: false, avoidance: new THREE.Vector3() }; }); const player = { pos: new THREE.Vector3(0, 1, 0), vel: new THREE.Vector3(), yaw: 0, speed: 0, half: new THREE.Vector3(0.8, 0.5, 1.0), grounded: false, checkpoint: new THREE.Vector3(0, 1, 0), jumpWasDown: false, }; controls.target.copy(player.pos).add(new THREE.Vector3(0, 1.1, 0)); const keys = new Set(); const onKeyDown = (e) => keys.add(e.code); const onKeyUp = (e) => keys.delete(e.code); window.addEventListener("keydown", onKeyDown); window.addEventListener("keyup", onKeyUp); const resolveCollisions = (pos, vel) => { let grounded = false; const playerMin = new THREE.Vector3(); const playerMax = new THREE.Vector3(); const boxMin = new THREE.Vector3(); const boxMax = new THREE.Vector3(); for (const obj of level) { if (obj.tag === "lava") continue; playerMin.copy(pos).sub(player.half); playerMax.copy(pos).add(player.half); boxMin.copy(obj.mesh.position).sub(obj.half); boxMax.copy(obj.mesh.position).add(obj.half); const overlapX = Math.min(playerMax.x, boxMax.x) - Math.max(playerMin.x, boxMin.x); if (overlapX <= 0) continue; const overlapY = Math.min(playerMax.y, boxMax.y) - Math.max(playerMin.y, boxMin.y); if (overlapY <= 0) continue; const overlapZ = Math.min(playerMax.z, boxMax.z) - Math.max(playerMin.z, boxMin.z); if (overlapZ <= 0) continue; const dx = pos.x - obj.mesh.position.x; const dy = pos.y - obj.mesh.position.y; const dz = pos.z - obj.mesh.position.z; if (overlapY <= overlapX && overlapY <= overlapZ) { pos.y += dy > 0 ? overlapY : -overlapY; if (dy > 0 && vel.y <= 0) grounded = true; vel.y = 0; } else if (overlapX <= overlapZ) { pos.x += dx > 0 ? overlapX : -overlapX; vel.x = 0; } else { pos.z += dz > 0 ? overlapZ : -overlapZ; vel.z = 0; } } return grounded; }; const respawn = () => { player.pos.copy(player.checkpoint); player.vel.set(0, 0, 0); }; const resize = () => { const width = Math.max(1, renderDiv.clientWidth); const height = Math.max(1, renderDiv.clientHeight); renderer.setSize(width, height, false); camera.aspect = width / height; camera.updateProjectionMatrix(); }; let resizeObserver = null; if (typeof ResizeObserver !== "undefined") { resizeObserver = new ResizeObserver(() => resize()); resizeObserver.observe(renderDiv); } else { window.addEventListener("resize", resize); } resize(); let lastTime = performance.now(); let raf = 0; const animate = () => { const now = performance.now(); const dt = Math.min(0.05, (now - lastTime) / 1000); lastTime = now; raf = requestAnimationFrame(animate); window.__THREE_ANIMATION__ = raf; const moveForward = keys.has("KeyW") || keys.has("ArrowUp") || keys.has("KeyW"); const moveBackward = keys.has("KeyS") || keys.has("ArrowDown") || keys.has("KeyS"); const moveLeft = keys.has("KeyA") || keys.has("ArrowLeft") || keys.has("KeyA"); const moveRight = keys.has("KeyD") || keys.has("ArrowRight") || keys.has("KeyD"); // Kart Physics const accel = moveForward ? 30 : (moveBackward ? -15 : 0); const friction = 0.96; player.speed += accel * dt; player.speed *= friction; if (Math.abs(player.speed) > 0.1 || moveForward || moveBackward) { const steerDir = moveLeft ? 1 : (moveRight ? -1 : 0); // Allow turning even at lower speeds for better control const turnSpeed = moveBackward ? -2.5 : 2.5; player.yaw += steerDir * turnSpeed * dt * Math.min(1.2, Math.max(0.4, Math.abs(player.speed) / 10)); } player.vel.x = Math.sin(player.yaw) * player.speed; player.vel.z = Math.cos(player.yaw) * player.speed; const jumpDown = keys.has("Space"); const jumpPressed = jumpDown && !player.jumpWasDown; player.jumpWasDown = jumpDown; if (jumpPressed && player.grounded) { player.vel.y = 8; player.grounded = false; } player.vel.y += -24 * dt; player.pos.addScaledVector(player.vel, dt); player.grounded = resolveCollisions(player.pos, player.vel); // Powerups Logic powerups.forEach(pu => { if (pu.active) { pu.mesh.rotation.y += dt * 3; pu.mesh.rotation.x += dt * 1.5; pu.mesh.position.y = pu.startPos.y + Math.sin(now * 0.005) * 0.3; const dist = player.pos.distanceTo(pu.mesh.position); if (dist < 2) { pu.active = false; pu.mesh.visible = false; pu.timer = 5; // 5 seconds respawn player.speed += 20; // Mushroom boost! hud.textContent = "BOOST! Speeding up!"; setTimeout(() => { if (hud.textContent.includes("BOOST")) hud.textContent = "Kart Racer • WASD or Arrows to Drive"; }, 1500); } } else { pu.timer -= dt; if (pu.timer <= 0) { pu.active = true; pu.mesh.visible = true; } } }); playerGroup.position.copy(player.pos); playerGroup.rotation.y = player.yaw; // Chase Camera const camOffset = new THREE.Vector3(0, 4, -8).applyAxisAngle(new THREE.Vector3(0, 1, 0), player.yaw); const targetCamPos = player.pos.clone().add(camOffset); camera.position.lerp(targetCamPos, 0.1); camera.lookAt(player.pos.x, player.pos.y + 1, player.pos.z); for (const cp of checkpoints) { const dx = Math.abs(player.pos.x - cp.mesh.position.x); const dz = Math.abs(player.pos.z - cp.mesh.position.z); const dy = Math.abs(player.pos.y - (cp.mesh.position.y + 2)); if (dx < cp.half.x + 0.8 && dz < cp.half.z + 0.8 && dy < 2.2) { player.checkpoint.set(cp.mesh.position.x, cp.mesh.position.y + 4, cp.mesh.position.z); cp.mesh.material.color.set(0x10b981); } } if (player.pos.y < -12) { respawn(); player.speed = 0; } // Slow down on grass (lava) if ( Math.abs(player.pos.x - lava.mesh.position.x) < lava.half.x && Math.abs(player.pos.z - lava.mesh.position.z) < lava.half.z && player.pos.y < lava.mesh.position.y + 0.1 ) { player.speed *= 0.9; } const reachedGoal = Math.abs(player.pos.x - goal.mesh.position.x) < goal.half.x && Math.abs(player.pos.z - goal.mesh.position.z) < goal.half.z && Math.abs(player.pos.y - goal.mesh.position.y) < 3; if (reachedGoal) { hud.style.background = "rgba(34, 197, 94, 0.9)"; hud.textContent = "FINISH! You won the race!"; } // AI Logic npcs.forEach((npc, idx) => { const target = waypoints[npc.waypoint]; const dx = target.x - npc.pos.x; const dz = target.z - npc.pos.z; const distSq = dx * dx + dz * dz; if (distSq < 64) { npc.lastWaypoint = npc.waypoint; npc.waypoint = (npc.waypoint + 1) % waypoints.length; } // Steering const desiredYaw = Math.atan2(dx, dz); let yawDiff = desiredYaw - npc.yaw; while (yawDiff < -Math.PI) yawDiff += Math.PI * 2; while (yawDiff > Math.PI) yawDiff -= Math.PI * 2; // Avoid other NPCs npc.avoidance.set(0, 0, 0); npcs.forEach((other, oIdx) => { if (idx === oIdx) return; const d = npc.pos.distanceTo(other.pos); if (d < 3) { npc.avoidance.add(npc.pos.clone().sub(other.pos).normalize().multiplyScalar(5 / (d + 0.1))); } }); // Smarter Speed Control: slow down for sharp turns const turnIntensity = Math.abs(yawDiff); const targetMaxSpeed = turnIntensity > 0.5 ? 12 : 22; const accel = npc.speed < targetMaxSpeed ? 20 : -10; npc.speed += accel * dt; npc.speed *= 0.97; npc.yaw += Math.max(-2.5, Math.min(2.5, yawDiff)) * dt * 2.5; npc.vel.x = Math.sin(npc.yaw) * npc.speed + npc.avoidance.x; npc.vel.z = Math.cos(npc.yaw) * npc.speed + npc.avoidance.z; npc.vel.y += -24 * dt; npc.pos.addScaledVector(npc.vel, dt); npc.grounded = resolveCollisions(npc.pos, npc.vel); if (npc.pos.y < -12) { // Respawn at last waypoint const lw = waypoints[npc.lastWaypoint]; npc.pos.set(lw.x, 5, lw.z); npc.speed = 0; npc.vel.set(0, 0, 0); } npc.group.position.copy(npc.pos); npc.group.rotation.y = npc.yaw; }); renderer.render(scene, camera); }; animate(); const dispose = () => { try { cancelAnimationFrame(raf); controls.dispose(); resizeObserver?.disconnect?.(); if (!resizeObserver) { window.removeEventListener("resize", resize); } window.removeEventListener("keydown", onKeyDown); window.removeEventListener("keyup", onKeyUp); for (const obj of level) { obj.geometry.dispose(); obj.material.dispose(); scene.remove(obj.mesh); } for (const pu of powerups) { pu.mesh.geometry.dispose(); pu.mesh.material.dispose(); scene.remove(pu.mesh); } for (const part of playerParts) { part.geometry.dispose(); part.material.dispose(); } for (const npc of npcs) { for (const part of npc.parts) { part.geometry.dispose(); part.material.dispose(); } } renderer.dispose(); } catch (error) { console.warn("Failed to dispose Three.js scene", error); } try { hud.remove(); } catch {} try { renderDiv.innerHTML = ""; } catch {} }; window.__THREE_DISPOSE__ = dispose; if (window.__EDITOR_RUNTIME__?.registerCleanup) { window.__EDITOR_RUNTIME__.registerCleanup(dispose); }

temu Mario kart

How to Play