[체험기] "게임 만들어줘" 한마디면 '뚝딱'... 한마디 무서운 진실

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>BLUE ROCKET RACING</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#081018;font-family:Arial,sans-serif;color:#fff}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#title{position:absolute;left:24px;top:18px;font-weight:900;font-size:22px;letter-spacing:2px;text-shadow:0 2px 8px #000}
#stats{position:absolute;right:24px;top:18px;text-align:right;font-weight:800;font-size:18px;line-height:1.6;text-shadow:0 2px 8px #000}
#help{position:absolute;left:24px;bottom:20px;font-size:14px;opacity:.9;text-shadow:0 2px 8px #000}
#msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font-size:24px;font-weight:900;text-shadow:0 3px 12px #000}
#msg small{display:block;font-size:14px;margin-top:10px;opacity:.85}
#bar{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:260px;height:8px;border-radius:8px;background:#ffffff33;overflow:hidden}
#bar i{display:block;height:100%;width:100%;background:#fff;transform-origin:left}
</style>
</head>
<body>
<div id="hud">
  <div id="title">🚀 BLUE ROCKET RACING</div>
  <div id="stats"><div>속도 <span id="speed">0</span> km/h</div><div>랩 <span id="lap">1</span> / 3</div><div>기록 <span id="time">0.0</span>s</div></div>
  <div id="help">WASD / 방향키 : 운전　　R : 리셋　　SPACE : 브레이크</div>
  <div id="msg">차량을 불러오는 중...<small>bluecar.fbx</small></div>
  <div id="bar"><i></i></div>
</div>
<script type="importmap">
{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/"}}
</script>
<script type="module">
import * as THREE from 'three';
import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';

const scene=new THREE.Scene();
scene.background=new THREE.Color(0x8cc8ee); scene.fog=new THREE.Fog(0x8cc8ee,120,500);
const camera=new THREE.PerspectiveCamera(65,innerWidth/innerHeight,.1,1000);
const renderer=new THREE.WebGLRenderer({antialias:true}); renderer.setPixelRatio(Math.min(devicePixelRatio,2)); renderer.setSize(innerWidth,innerHeight); renderer.shadowMap.enabled=true; document.body.appendChild(renderer.domElement);

scene.add(new THREE.HemisphereLight(0xdff3ff,0x36522e,2.2));
const sun=new THREE.DirectionalLight(0xffffff,2.6); sun.position.set(-80,120,40); sun.castShadow=true; sun.shadow.mapSize.set(2048,2048); scene.add(sun);

const ground=new THREE.Mesh(new THREE.PlaneGeometry(900,900),new THREE.MeshStandardMaterial({color:0x2d6b39,roughness:1})); ground.rotation.x=-Math.PI/2; ground.receiveShadow=true; scene.add(ground);

// Oval racing circuit
const RX=92,RZ=58, ROAD=15;
function trackPoint(t){return new THREE.Vector3(RX*Math.cos(t),0,RZ*Math.sin(t));}
function trackTangent(t){return new THREE.Vector3(-RX*Math.sin(t),0,RZ*Math.cos(t)).normalize();}
function trackAngle(t){const p=trackTangent(t); return Math.atan2(p.x,p.z);}
const roadShape=new THREE.Shape();
for(let i=0;i<=160;i++){let t=i/160*Math.PI*2;let x=RX*Math.cos(t),z=RZ*Math.sin(t); if(i===0)roadShape.moveTo(x,z); else roadShape.lineTo(x,z)}
const roadPts=[]; for(let i=0;i<160;i++){let t=i/160*Math.PI*2; roadPts.push(trackPoint(t));}
const roadGeom=new THREE.BufferGeometry().setFromPoints(roadPts); roadGeom.setDrawRange(0,160); // centerline only
const roadMat=new THREE.LineBasicMaterial({color:0x2b2f34,linewidth:12}); scene.add(new THREE.LineLoop(roadGeom,roadMat));
// Wide road using segments
const roadGroup=new THREE.Group(); scene.add(roadGroup);
for(let i=0;i<160;i++){let t=i/160*Math.PI*2,t2=(i+1)/160*Math.PI*2;let a=trackPoint(t),b=trackPoint(t2);let mid=a.clone().add(b).multiplyScalar(.5);let len=a.distanceTo(b);let m=new THREE.Mesh(new THREE.BoxGeometry(ROAD,0.18,len+0.8),new THREE.MeshStandardMaterial({color:0x30343a,roughness:.9}));m.position.copy(mid);m.rotation.y=-Math.atan2(b.x-a.x,b.z-a.z);m.receiveShadow=true;roadGroup.add(m)}
// curbs
for(let side of [-1,1]) for(let i=0;i<160;i+=4){let t=i/160*Math.PI*2;let p=trackPoint(t),tan=trackTangent(t),n=new THREE.Vector3(-tan.z,0,tan.x).multiplyScalar(side*(ROAD/2+1.2));p.add(n);let c=new THREE.Mesh(new THREE.BoxGeometry(2.4,.25,3.0),new THREE.MeshStandardMaterial({color:i%8===0?0xf5f5f5:0xe63d3d}));c.position.copy(p);c.rotation.y=trackAngle(t);roadGroup.add(c)}
// center dashed line
for(let i=0;i<80;i+=2){let t=i/80*Math.PI*2;let p=trackPoint(t);let d=trackTangent(t);let m=new THREE.Mesh(new THREE.BoxGeometry(.35,.03,2.5),new THREE.MeshBasicMaterial({color:0xf5d85b}));m.position.set(p.x,.11,p.z);m.rotation.y=Math.atan2(d.x,d.z);scene.add(m)}

// trees / scenery
for(let i=0;i<75;i++){let t=Math.random()*Math.PI*2,r=115+Math.random()*75,p=new THREE.Vector3(Math.cos(t)*r,0,Math.sin(t)*r);let trunk=new THREE.Mesh(new THREE.CylinderGeometry(.7,1,5,7),new THREE.MeshStandardMaterial({color:0x6b4026}));trunk.position.set(p.x,2.5,p.z);trunk.castShadow=true;scene.add(trunk);let crown=new THREE.Mesh(new THREE.ConeGeometry(4+Math.random()*2,9,8),new THREE.MeshStandardMaterial({color:0x1f5e2d}));crown.position.set(p.x,9,p.z);crown.castShadow=true;scene.add(crown)}

// Start/finish
const line=new THREE.Mesh(new THREE.BoxGeometry(ROAD,.03,2.5),new THREE.MeshBasicMaterial({color:0xffffff}));line.position.set(RX,0.12,0);line.rotation.y=Math.PI/2;scene.add(line);
for(let z=-ROAD/2;z<ROAD/2;z+=2.5){let q=new THREE.Mesh(new THREE.BoxGeometry(.08,.04,2.5),new THREE.MeshBasicMaterial({color:((z/2.5)%2===0)?0x111111:0xffffff}));q.position.set(RX+.1,.15,z);q.rotation.y=Math.PI/2;scene.add(q)}

let carRoot=new THREE.Group(); scene.add(carRoot); let carModel=null;
function fallbackCar(){let g=new THREE.Group();let body=new THREE.Mesh(new THREE.BoxGeometry(2.5,.65,4.8),new THREE.MeshStandardMaterial({color:0x126cff,metalness:.35,roughness:.3}));body.position.y=.8;g.add(body);let cabin=new THREE.Mesh(new THREE.BoxGeometry(1.8,.65,2),new THREE.MeshStandardMaterial({color:0x18242f,metalness:.1,roughness:.2}));cabin.position.set(0,1.25,.15);g.add(cabin);for(let x of [-1.05,1.05])for(let z of [-1.65,1.65]){let w=new THREE.Mesh(new THREE.CylinderGeometry(.42,.42,.3,16),new THREE.MeshStandardMaterial({color:0x111111}));w.rotation.z=Math.PI/2;w.position.set(x,.45,z);g.add(w)}return g}

const loader=new FBXLoader();
loader.load('./bluecar.fbx',obj=>{
  carModel=obj; carModel.traverse(o=>{if(o.isMesh){o.castShadow=true;o.receiveShadow=true}});
  const box=new THREE.Box3().setFromObject(carModel), size=box.getSize(new THREE.Vector3()), max=Math.max(size.x,size.y,size.z); const s=5.0/max; carModel.scale.setScalar(s);
  const b2=new THREE.Box3().setFromObject(carModel); const c=b2.getCenter(new THREE.Vector3()); carModel.position.sub(c); carModel.position.y=-b2.min.y;
  // Common FBX car orientation adjustment; reset here if your model already faces forward.
  carModel.rotation.y=Math.PI;
  carRoot.add(carModel); start();
},undefined,err=>{console.warn(err);carModel=fallbackCar();carRoot.add(carModel);document.getElementById('msg').innerHTML='차량 파일을 읽지 못해 임시 차량으로 시작합니다.<small>bluecar.fbx를 다시 확인해주세요.</small>';start();});

const keys={}; addEventListener('keydown',e=>{keys[e.key.toLowerCase()]=true;if(e.key.toLowerCase()==='r')reset()}); addEventListener('keyup',e=>keys[e.key.toLowerCase()]=false);
let tParam=0,lap=1,speed=0,heading=0,started=false,startTime=0,lastT=0;
function reset(){tParam=0;lap=1;speed=0;heading=trackAngle(0);lastT=0;carRoot.position.copy(trackPoint(0));carRoot.position.y=.2;carRoot.rotation.y=heading;startTime=performance.now();}
function start(){reset();started=true;document.getElementById('msg').innerHTML='3...<small>W / ↑ 로 출발!</small>';setTimeout(()=>document.getElementById('msg').innerHTML='2...',700);setTimeout(()=>document.getElementById('msg').innerHTML='1...',1400);setTimeout(()=>document.getElementById('msg').innerHTML='GO!',2100);setTimeout(()=>document.getElementById('msg').innerHTML='',2700)}

const clock=new THREE.Clock();
function animate(){requestAnimationFrame(animate);let dt=Math.min(clock.getDelta(),.05);if(!started){renderer.render(scene,camera);return}
 let throttle=keys['w']||keys['arrowup']; let brake=keys['s']||keys['arrowdown']||keys[' ']; let steer=(keys['a']||keys['arrowleft']?-1:0)+(keys['d']||keys['arrowright']?1:0);
 if(throttle)speed=Math.min(speed+30*dt,58);else speed=Math.max(0,speed-10*dt);if(brake)speed=Math.max(0,speed-45*dt);
 const steerPower=(.5+speed/70)*steer; heading+=steerPower*dt;
 // Arcade movement
 const forward=new THREE.Vector3(Math.sin(heading),0,Math.cos(heading)); carRoot.position.addScaledVector(forward,speed*dt);
 // soft wall / track correction
 const x=carRoot.position.x/RX,z=carRoot.position.z/RZ; const radial=Math.sqrt(x*x+z*z); if(radial<.78||radial>1.22){speed*=.86;}
 // progress estimate from nearest angular parameter
 let nt=Math.atan2(carRoot.position.z/RZ,carRoot.position.x/RX); if(nt<0)nt+=Math.PI*2; if(lastT>5.5 && nt<.5){lap++; if(lap>3){started=false;document.getElementById('msg').innerHTML='🏁 FINISH!<small>R을 눌러 다시 달리세요.</small>';speed=0}} lastT=nt;
 // snap gently toward centerline when off-track
 const ideal=trackPoint(nt); const dist=carRoot.position.distanceTo(ideal); if(dist>ROAD*.75)carRoot.position.lerp(ideal,.9*dt);
 carRoot.rotation.y=heading;
 const target=carRoot.position.clone().addScaledVector(forward,9).add(new THREE.Vector3(0,3,0)); camera.position.lerp(carRoot.position.clone().addScaledVector(forward,-11).add(new THREE.Vector3(0,6,0)),1-Math.pow(.001,dt)); camera.lookAt(target);
 document.getElementById('speed').textContent=Math.round(speed*3.6);document.getElementById('lap').textContent=Math.min(lap,3);document.getElementById('time').textContent=((performance.now()-startTime)/1000).toFixed(1);document.querySelector('#bar i').style.transform='scaleX('+Math.min(1,speed/58)+')';
 renderer.render(scene,camera);
}
addEventListener('resize',()=>{camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight)});
animate();
</script>
</body></html>