Three.js 1인칭 게임용 비행 가능/진입 가능한 영화 품질의 부시 수상비행기 제작 과제
요약
Three.js를 사용하여 영화 품질의 부시 수상비행기를 제작하는 과제에 대한 기술 가이드입니다. 이 프로젝트는 순수 ES 모듈과 절차적 생성(procedural generation)만을 허용하며, 외부 에셋이나 번들러 사용이 엄격히 제한됩니다. 개발자는 Three.js의 특정 버전 및 API 제약 조건 내에서 복잡한 1인칭 비행 게임을 구현해야 합니다.
핵심 포인트
- Three.js r169 버전을 CDN ES 모듈로 직접 가져와야 함.
- 번들러, TypeScript 등 현대적인 개발 도구 사용이 금지됨.
- 모든 지오메트리, 텍스처, 사운드는 코드 내에서 절차적으로 생성되어야 함.
- 셰이더 컴파일 및 라이팅 변경에 대한 엄격한 제약 조건이 존재함.
PROMT part 1
과제: Three.js 1인칭 게임용 비행 가능/진입 가능한 영화 품질의 부시 수상비행기
당신은 기존 브라우저 게임(
- Three.js r169 exactly (
[email protected])를 CDN에서 ES 모듈로 가져와 사용해야 합니다:
<script type="importmap">{"imports":{"three":"https://t.co/SI0sYiA81k","three/addons/":"https://t.co/Sajx3j9wlL"}}</script>
npm 런타임 의존성, 번들러, TypeScript, Vite를 사용하지 않습니다. 모든 것이 정적 서버(예: npx serve / 작은 node 서버)에서 실행되는 순수한 .js ES 모듈이어야 합니다.
- 모듈 구문 제한 사항 (게임에 커스텀 번들러가 내장되어 있음):
- 오직
export function name,export class Name,export const/let name = ...만 허용됩니다.export default는 안 되며,export { a, b }목록도, 리-익스포트(re-exports)도 안 됩니다. - 기본 가져오기(
import X from)는 안 되고, 오직import * as THREE from 'three'와 이름 지정 가져오기(import { A } from '...')만 가능합니다. - 동적
import()는 안 되며,import.meta, 최상위await도, 파일 간 순환 참조(circular imports)도 안 됩니다. - 허용되는 외부 라이브러리는
three와three/addons/...뿐입니다 (예:BufferGeometryUtils,RoundedBoxGeometry는 괜찮습니다).
- 오직
- 외부 에셋 없음. 다운로드된 텍스처, 모델, HDRI, 폰트 또는 사운드 파일이 없어야 합니다. 모든 것은 절차적(procedural)이어야 합니다:
- 지오메트리(geometry)는 코드에서 구축되어야 합니다 (lathe / extrude / tube / 커스텀 BufferGeometry / CSG와 유사한 수동 모델링).
- 텍스처는 시작 시 캔버스(
CanvasTexture,DataTexture) 또는 셰이더 내에서, 시드(seed)로부터 결정론적으로 생성되어야 합니다. - 사운드는 WebAudio를 사용하여 합성해야 합니다.
THREE.ShaderChunk를 전역으로 절대 패치하지 마십시오. 또한 three의 조명/안개/그림자 청크를 대체하지 마세요. (게임이 이미 이들을 패치하고 있습니다 - 계층적 그림자, 커스텀 안개). 기본MeshStandardMaterial/MeshPhysicalMaterial을 사용하세요. 만약 커스텀 셰이딩이 필요하다면, 고유한customProgramCacheKey를 사용하여 자신의 재질에만 로컬로onBeforeCompile을 사용하고,fog: true가 작동하도록 유지해야 합니다.- 런타임에서 실제 조명 추가 금지. 라이트의 개수를 변경하면 게임 내 모든 셰이더가 다시 컴파일되어야 하므로 (눈에 띄는 프리징 현상 발생) 안 됩니다.
항법등(Nav lights), 계기 백라이트(instrument backlight), 착륙등(landing light), 배기구 빛(exhaust glow)은 발광 재질(emissive materials)과 추가 스프라이트(additive sprites) / 라이트 콘(light cones) / 물 위에 투사되는 가짜 빛 풀로 처리합니다. 선택적으로, 건설 시 한 번 생성되는 SpotLight를 착륙등에 사용할 수 있으며 (강도 0일 때는 비활성화하고, 그림자를 절대 드리우지 않음), 기본값은 옵션 realLandingLight: false입니다.
-
게임 도중 셰이더 컴파일 금지. 비행기가 사용하게 될 모든 재질/정의(define) 변형은 시작부터 존재해야 합니다. 런타임에
transparent,defines,vertexColors,side등을 토글하지 말고, 대신 가시성(visibility)이나 유니폼(uniforms)을 변경하세요. 모든 프로그램(LOD 포함, 내부, 파손된 부분, 효과 등)을 미리 컴파일하는plane.prewarm(renderer, camera)를 제공해야 합니다. -
단위 / 프레임: 미터(metres), 킬로그램(kilograms), 초(seconds), 라디안(radians), +Y 위쪽, 해수면은 y = 0입니다. 비행기 로컬 좌표계: 코는 −Z 방향, 오른쪽 날개는 +X 방향, 위쪽은 +Y 방향, 정지 시 무게 중심에 원점을 둡니다.
INTEGRATION.md에 문서화하세요. -
전역 변수 건드리지 않기: 명시적인
attachInput(domElement)/detachInput()쌍을 통해서가 아니면 모듈 내부에window리스너를 사용하지 마세요; 모듈 내에서 포인터 잠금(pointer-lock) 요청을 하지 마세요 (게임이 포인터 잠금을 소유함; 샌드박스가 자체적으로 요청할 수 있음); 모듈 내에서requestAnimationFrame을 사용하지 마세요 (호스트가update(dt)를 호출함);renderer.setAnimationLoop나 렌더러 설정을 변경하지 마세요. -
데스크톱 전용, 키보드 + 마우스만 지원합니다. 터치 / 모바일 / 게임패드 코드는 없습니다.
-
성능 예산 (게임 자체가 이미 GPU를 많이 사용하므로; 중급 GPU에서 1080p, 60 FPS 목표):
- LOD0 (카메라 ≤ ~30 m): 외부(exterior)는 ≤ ~120k 삼각형 및 ≤ ~30 드로우 콜; 내부(interior)는 ≤ ~80k 삼각형 및 ≤ ~25 드로우 콜. 카메라는 실내에 있거나 열린 문/창문 근처 12m 이내일 때 만 렌더링됩니다.
- LOD1 (~30–150 m): ≤ ~20k 삼각형, ≤ 8 드로우 콜. LOD2 (> 150 m, 그리고 멀리서 공중에서 볼 때): ≤ 3k 삼각형, ≤ 3 드로우 콜.
-
재료별 정적 지오메트리 병합 (BufferGeometryUtils.mergeGeometries); 움직이는 부품(프로펠러, 조종면, 문, 요크, 바늘, 레버, 페달)은 분리된 상태를 유지하되 작게 만듭니다. 리벳/볼트는 기하학적 형태라면
InstancedMesh를 사용합니다 (리벳의 경우 노멀 맵을 선호).- 텍스처 아틀라스 ≤ 2048², 총 생성 텍스처 메모리는 High 설정에서 ≤ ~64 MB, Low 설정에서 절반입니다. 텍스처 생성은 일반 PC에서 시작 시 ≤ ~1.5초가 소요됩니다 (필요시 청크 단위로 생성하고
readypromise를 노출합니다). - 물리(Physics) + 제어(controls) + 애니메이션 CPU 사용량은 프레임당 ≤ ~0.3 ms입니다.
- 그림자: 외부의 큰 부품들은
castShadow; 작거나 내부의 잡동사니는 그림자를 드리우지 않습니다. 모든 것은 적절하게receiveShadow를 받습니다. - 텍스처 해상도, 내부 디테일, 파티클 수를 줄이는
quality: 'high' | 'low'옵션을 제공합니다.
- 텍스처 아틀라스 ≤ 2048², 총 생성 텍스처 메모리는 High 설정에서 ≤ ~64 MB, Low 설정에서 절반입니다. 텍스처 생성은 일반 PC에서 시작 시 ≤ ~1.5초가 소요됩니다 (필요시 청크 단위로 생성하고
2. 항공기 (참고 이미지를 주의 깊게 연구하세요)
쌍동선(twin floats)을 장착한 견고하고 심하게 풍화된 단발 고익 부시 플레인입니다 — 밀수꾼/용병들이 정글 보급 임무를 위해 개조한 DHC-2 Beaver 또는 Cessna 185가 쌍동선을 달고 있는 것을 상상해 보세요. 실세계 스케일:
- 길이 ≈ 9.5 m (플로트/물 러더 포함 시 ≈ 10.3 m), 날개 폭 ≈ 14.6 m, 날개 코드(chord) ≈ 1.6 m, 플로트 상부 높이 ≈ 3.9 m.
- 두 개의 플로트는 길이 ≈ 7.8 m, 너비 ≈ 0.85 m, 깊이 ≈ 0.75 m이며, 중심 간 거리는 약 2.7 m임. 배 밑바닥에는 길이의 약 55% 지점에 **스텝(step)**이 있고, **용골(keel)**과 치네스(chines), 둥근 검은색 앞 범퍼가 있으며, 손잡이가 달린 데크 해치, 클리트, 탑승 사다리, 그리고 꼬리에 물 러더가 있음 (접이식, 케이블 작동).
- 3엽 프로펠러, 직경 ≈ 2.6 m이며, 노란색 끝부분이 있는 검은색 날개와 녹과 흠집이 난 광택 금속 **스피너(spinner)**가 달려 있음.
- 엔진: 상부 카울링이 제거되거나 누락된 큰 피스톤 엔진으로, 실린더 뱅크, 노출된 배기 스택(녹슬고, 열에 의해 푸르게 변색되고, 그을음이 낀), 흡입 파이프 및 배선이 측면에 보임; 노즈 아래 오일 쿨러; 동체를 따라 뒤로 흐르는 오일과 그을음 자국.
- 큰 프레임의 앞유리가 달린 조종석(창문 한 패널은 금칙), 측면 창문, 날개 뿌리 부분에 천장 스카이라이트 창문; 양쪽에 조종사 문이 있음.
- 조종석 뒤쪽 오른쪽 측면에 크고 화물/객실 문이 열려 있어, 낡은 황갈색/갈색 가죽 좌석과 내부의 화물이 보임.
- 날개: 하부 동체에 연결된 V형 스트럿(V-struts), 에일러론, 플랩, 날개 끝 부분, 피토관, 날개 아래 투광 조명, 항법등 (왼쪽 끝 빨간색, 오른쪽 끝 초록색, 꼬리 흰색).
- 플로트 스트럿: 노란색 원통형 N-스트럿 + 교차 지지대 파이프와 플로트 및 동체 사이의 장력 와이어(tension wires).
- 꼬리: 페이드된 흰색 꼬리 예술(깃털/해골 모티프)이 있는 수직 안정판 + 방향타, 수평 안정판 + 엘리베이터에 트림 탭, 꼬리 계류 장치.
- 안테나: 상단에 와힙 안테나와 스텁 안테나가 있음.
도색 및 풍화 처리 (룩의 핵심)
- 기본 색상: 크롬 옐로우에 올리브 드랩 그린 불규칙 위장 무늬와 어두운 회색/검은색 대각선 줄무늬/띠 (플로트와 날개 부분에 강하게 적용), 조종석 근처의 흰색 띠와 날개 문양.
- 노즈 코팅/기수: 검은색 윤곽선의 입, 빨간색 내부, 흰색 톱니 이빨 — 도색되고, 마모되고, 깨진 모습.
- 심한 마모: 가장자리, 패널 이음매, 리벳 라인, 통로 및 손잡이 주변의 맨 알루미늄으로 벗겨진 페인트; 리벳과 이음새에서 흘러나온 녹; 하부 플로트와 동체 배 부분의 진흙 물보라와 마른 실트; 물때 자국; 기름 및 배기 그을음 줄무늬; 색이 바래거나 햇볕에 탈색된 상부 표면; 찌그러짐과 패치된 패널 (다른 색상의 리벳 보수판 몇 개); 플로트에 생긴 로프 마찰 흔적.
- 식별 가능한 디테일: 리벳 열, 패널 라인, 스텐실 (
항공기 화물 및 소품 (이미지에서 가져옴)
- 날개 뿌리 뒤 동체 상단의 루프랙: 올리브색 더플백, 빨간 제리캔, 금속 상자/무전기 케이스, 그리고 밧줄이 묶인 튜빙 프레임.
- 올리브색 캔버스 가방과 파우치는 날개 지지대와 날개 아래에 고정되어 있고, 가방들은 후방 동체를 따라 고정되어 있으며, 여분의 타이어는 플로트에 묶여 있고, 코일 형태의 밧줄은 플로트 데크 위에 놓여 있으며, 빨간색 버클 스트랩이 있음.
- 내부 화물: 더플백, 크레이트, 제리캔, 화물 그물망.
- 부드러운 물품(가방, 밧줄, 스트랩 끝부분, 안테나)은 비행기의 가속도와 진동에 의해 움직이는 저렴한 스프링 흔들림을 가지게 되어 (버텍스 셰이더 또는 본리스 트랜스폼 스프링), 비행기가 유휴 상태와 난기류 속에서도 살아있는 느낌을 주도록 함.
선택적 '수상비행장 베이스' 키트 (최하 우선순위, 별도 파일)
게임의 부두 근처에 배치할 작은 소품 세트: 녹슨 골판 지붕과 나무 기둥이 있는 개방형 격납고, 바람 벡터에 따라 방향을 잡고 팽창하는 폴 위의 윈드소크, 제리캔(빨간색/녹색), 기름 통, 나무 팔레트, 비행기가 상륙할 때 놓이는 휠 초크/목재 블록 (이미지와 같음).
3. 조종석 및 객실 내부 (플레이어가 많은 시간을 보낼 곳이므로 - 최고 수준으로 만드세요)
플레이어는 왼쪽(조종사) 좌석에 1인칭 시점으로 앉으며, 눈높이는 좌석 위 약 0.75m입니다. 30cm 거리에서 내부가 믿을 수 있도록 보이게 만드세요.
AI 자동 생성 콘텐츠
본 콘텐츠는 X Unity/게임개발의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기