|

모델이 3D 파일을 직접 생성하는 대신 Three.js를 작성하게 하기: 코드 중간 계층 워크플로우의 5가지 시사점

모델이 3D 파일을 직접 생성하는 대신 Three.js를 작성하게 하기: 코드 중간 계층 워크플로우의 5가지 시사점

작성자 주: Qwen3.5-4B-GLB-3D-Coder를 예로 들어 “텍스트 → Three.js → GLB” 코드 중간 레이어 워크플로를 하나씩 뜯어보고, 실제로 적용할 수 있는 단계까지 정리합니다.

대규모 언어 모델이 곧바로 쓸 수 있는 3D 파일을 만들어 내게 하는 건, 많은 인디 개발자와 작은 게임 팀이 한 번쯤 부딪히는 난제예요. 여기 4B 파라미터 커뮤니티 파인튜닝 모델이 색다른 발상을 보여줍니다: 모델에게 Three.js 코드를 쓰게 하고, 브라우저가 GLB를 내보내게 하자 — 생성과 내보내기를 두 단계로 쪼개는 거죠.

이 글은 또 하나의 text-to-3D 도구 목록이 아닙니다. Qwen3.5-4B-GLB-3D-Coder가 내보낸 에셋은 이미 Godot 에디터에 임포트할 수 있고, 커뮤니티 개발자 Naoki Kishida는 이 모델이 만든 에셋으로 플레이 가능한 3D RPG 데모까지 선보였습니다. 이 글은 그 파이프라인 뒤에 있는, 재사용할 수 있는 엔지니어링 방법에 주목합니다.

핵심 가치: 이 글을 다 읽고 나면 코드 중간 레이어가 왜 효과적인지 이해하게 되고, 로컬이든 클라우드든 프롬프트에서 Godot 에셋까지 이어지는 전체 흐름을 직접 돌려볼 수 있게 됩니다.

llm-threejs-code-intermediate-layer-workflow-ko-image-0


Three.js 코드 중간 계층 핵심 포인트

코드 중간 계층이란, 모델이 최종 바이너리 파일을 직접 출력하는 대신 실행 가능한 프로그램을 출력하고, 그 프로그램이 최종 결과물을 만들도록 하는 방식이에요. 이 사례에서 모델은 Three.js 장면과 “Export GLB” 버튼이 포함된 독립형 HTML 파일을 출력합니다.

핵심 포인트 설명 개발자에게 주는 가치
모델 출력 Three.js 장면과 내보내기 버튼이 포함된 단일 HTML 파일 바로 읽고 수정할 수 있으며, 블랙박스 파일이 아니에요
최종 결과물 브라우저에서 버튼을 클릭하면 GLB 다운로드 Godot처럼 GLB를 지원하는 도구로 가져올 수 있어요
학습 범위 캐릭터, 무기, 탈것, 모듈형 건물 등 25개 게임 에셋 영역 하나의 도구로 프로토타입 단계의 대부분 플레이스홀더 요구를 커버할 수 있어요
실행 방식 Q4_K_M과 Q8_0 두 가지 GGUF 양자화 버전 제공 LM Studio 같은 도구로 로컬에서 실행할 수 있어요
품질 포지셔닝 로우 폴리곤 게임 에셋이며, 사실적이거나 영화급 제작을 목표로 하지 않음 프로토타입, 플레이스홀더, 스타일화된 프로젝트에 적합해요

짚고 넘어갈 점은 Qwen3.5-4B-GLB-3D-Coder가 개발자 CCORE가 Qwen/Qwen3.5-4B를 기반으로 파인튜닝한 독립 프리뷰 버전이며, Qwen 공식 릴리스가 아니라는 거예요. 모델 카드에 따르면 대부분의 생성 결과는 첫 시도에 바로 사용할 수 있고, 특히 영어 프롬프트에서 그렇지만 일부 에셋은 여전히 재시도하거나 코드를 직접 수정해야 합니다.

Three.js 코드 중간 계층의 워크플로

전체 파이프라인은 6단계로 요약할 수 있어요: 설명 입력, HTML 생성, 파일 저장, 브라우저 미리보기, GLB 내보내기, 엔진 가져오기. 이 중 앞의 두 단계는 모델이 맡고, 내보내기는 브라우저에서 실행되는 코드가 처리합니다. 모델이 GLB의 바이너리 내용을 직접 작성할 필요는 없어요.

에셋에 움직임이 필요할 때, 예를 들어 열리는 문 같은 경우에는 시스템 프롬프트가 모델에 애니메이션을 추가하고 내보내는 GLB에 포함하도록 요구해요. 명시적으로 요구하지 않으면 모델은 기본적으로 정적 에셋을 생성해요. 따라서 프롬프트에 애니메이션 요구 사항을 분명히 적어야 해요.

llm-threejs-code-intermediate-layer-workflow-ko-image-1


Three.js 코드 중간 계층의 5가지 워크플로 인사이트

아래 비교는 이 사례를 바탕으로 한 엔지니어링 판단이며, 벤치마크 점수 결과는 아니에요. 3D 생성 방식마다 적용 범위가 다르기 때문에, 여기서는 두 접근법의 구조적 차이만 비교해요.

비교 항목 3D 파일 직접 생성 Three.js 코드 중간 계층
모델 출력 메시 또는 바이너리 에셋 사람이 읽을 수 있는 텍스트 코드
오류 발생 시 처리 보통 다시 생성하거나 모델링 도구에서 수정해야 함 지오메트리, 머티리얼, 애니메이션을 부분 수정할 수 있음
내보내기 전 미리보기 전용 뷰어 도구에 의존 브라우저에서 HTML을 열면 바로 확인 가능
애니메이션 지원 특정 모델과 파이프라인에 따라 다름 코드로 기술할 수 있고 GLB와 함께 내보낼 수 있음
잘하는 범위 구체적인 방식에 따라 다름 구조가 명확한 로우 폴리곤 에셋
주요 한계 결과물을 세밀하게 편집하기 어려움 고디테일 또는 사실적 에셋은 설계 범위 밖

llm-threejs-code-intermediate-layer-workflow-ko-image-2

인사이트 1: 모델이 잘하는 표현 계층을 선택하세요. 코딩 모델의 강점은 구조화된 텍스트를 출력하는 것이고, Three.js는 3D 에셋을 프로그래밍 문제로 바꿔줘요. 이 모델은 4B 파라미터에 불과하지만 에셋 생성 작업을 맡을 수 있어요. 핵심은 작업이 모델이 처리할 수 있는 형태로 변환되었다는 점이에요.

인사이트 2: 중간 산출물을 검사할 수 있게 하세요. HTML 파일은 생성 결과이자 디버깅 진입점이에요. 머티리얼이 잘못 배치되거나 애니메이션 루프에 오류가 생기면 수동으로 고칠 수 있는 경우가 많아 처음부터 다시 생성할 필요가 없고, 이는 단일 실패의 비용을 크게 낮춰줘요.

인사이트 3: 마지막 단계는 결정론적 도구에 맡기세요. 파일 형식의 세부 사항을 확률 모델이 바이트 단위로 책임질 필요는 없어요. Three.js 생태계에는 GLTFExporter 같은 내보내기 기능이 있으므로 모델은 내보내기를 호출하는 로직만 작성하면 돼요. 일반적으로 성숙한 도구에 맡기는 단계가 많을수록 형식 측면의 불확실성은 줄어들어요.

인사이트 4: 좁은 작업과 고정 규약이 일반화 능력보다 실용적이에요. 이 모델의 시스템 프롬프트는 고정되어 있고 출력 형식도 단일 HTML 파일로 엄격히 제한돼요. 동시에 25개 분야의 학습 데이터가 에셋 유형의 범위를 보장해줘요. 작업 경계가 명확해야 소형 모델도 충분히 역량을 발휘할 수 있어요.

인사이트 5: 실제 목적지에서 검증하세요. 브라우저에서 보기 좋다고 해서 에셋이 사용 가능한 것은 아니에요. 모델 카드에는 Godot 편집기에 가져온 후의 결과도 함께 보여줘요. 저자의 다음 목표도 이와 관련이 있어요. 신뢰할 수 있는 한 번의 생성을 구현하고, Agent 프레임워크 안에서 생성, 테스트, 최적화를 자동으로 완료하는 것이죠.

이 접근법은 게임 에셋에만 국한되지 않아요. OpenSCAD 스크립트로 CAD 모델을 생성할 수 있고, Blender Python으로 모델링 워크플로를 구동할 수 있으며, SVG와 Mermaid로 도형과 차트를 설명할 수 있어요. 목표 형식을 직접 생성하기 어렵다면 이렇게 먼저 질문해보세요. “이를 안정적으로 생성할 수 있는 코드 계층이 있을까?”

기술 제안: 서로 다른 모델이 Three.js를 작성하는 효과를 비교하고 싶다면 APIYI apiyi.com을 통해 같은 프롬프트 세트로 여러 모델을 호출한 뒤, 아래의 검수 체크리스트로 통일해 평가해보세요.


Three.js 코드 중간 레이어 빠르게 시작하기: 로컬 배포

아래에서는 LM Studio를 예로 들며, 전 과정에서 추가 코드를 작성할 필요가 없어요. LM Studio는 GGUF 모델을 바로 불러올 수 있어요. 모델 브라우저에서 Qwen3.5-4B-GLB-3D-Coder를 검색하거나, Hugging Face에서 파일을 내려받은 뒤 로컬에서 불러오면 됩니다.

1단계: GGUF 양자화 버전 선택

모델 카드에 정확한 VRAM 요구량이 공개되어 있지 않으니, 자신의 하드웨어에서 직접 테스트해 보세요. CPU 추론도 가능하지만 속도는 확실히 느려집니다.

버전 특징 권장 상황
Q4_K_M 파일 크기가 작고 메모리 사용량이 적으며 추론이 빨라요. 대신 품질이 다소 떨어질 수 있어요. 노트북 GPU, 사양이 제한적인 기기, 빠른 반복 작업
Q8_0 파일 크기가 크고 완전한 정밀도에 더 가까워요. VRAM이 넉넉하고 복잡한 에셋의 첫 시도 성공률을 높이고 싶은 경우

버전 업데이트 주의: 두 양자화 버전 모두 2026년 11월 2일에 가중치가 교체되었어요. 작성자는 시각 품질이 눈에 띄게 향상되었다고 밝혔지만 파일명은 바뀌지 않았습니다. 이 날짜 이전에 내려받았다면 삭제한 뒤 다시 내려받는 걸 권장해요. 그렇지 않으면 여전히 구버전을 사용하고 있을 수 있어요.

2단계: 시스템 프롬프트와 샘플링 파라미터 설정

이 모델은 특정 명령 형식에 맞춰 파인튜닝된 모델이라, 모델 카드에서 제공하는 시스템 프롬프트를 원문 그대로 사용하는 걸 권장해요. 임의로 고쳐 쓰지 마세요.

Create game assets for the Godot editor, which uses GLB files. Create whatever the user requests as a good-quality low-poly asset using only Three.js in one complete standalone HTML file. The HTML must show the asset and include an Export GLB button that downloads a working GLB. If the requested asset needs animation, add it and include the animation in the exported GLB; otherwise make it static.

LM Studio의 시스템 메시지 입력란에 붙여 넣은 다음, 작성자가 권장하는 샘플링 파라미터를 설정하세요. 이 값들은 작성자가 테스트할 때 사용한 출발점일 뿐, 반드시 지켜야 하는 값은 아니에요. 정상 동작을 확인한 뒤 조정해도 됩니다.

파라미터 권장 값 설정 위치
temperature 0.8 LM Studio 생성 파라미터
top_k 40 LM Studio 생성 파라미터
top_p 0.95 LM Studio 생성 파라미터
min_p 0.0 LM Studio 생성 파라미터

3단계: GLB 생성 및 내보내기

사용자 프롬프트는 짧고 구체적으로 작성하고, 가능하면 영어를 사용하세요. 먼저 Create a blue goblin brute 또는 Build a jungle siege platform을 시도해 보세요. 애니메이션이 필요하다면 Create a wooden gate with an opening animation처럼 작성하면 됩니다. 그다음 아래 순서대로 진행하세요.

  1. 프롬프트를 보내고 모델이 완전한 HTML을 출력할 때까지 기다립니다.
  2. 출력 내용을 .html 파일로 저장합니다.
  3. 브라우저에서 파일을 열어 에셋이 정상적으로 렌더링되는지 확인합니다.
  4. “Export GLB” 버튼을 클릭해 .glb 파일을 내려받습니다.
  5. GLB를 Godot이나 이 형식을 지원하는 다른 도구로 가져옵니다.

페이지가 비어 있다면 먼저 브라우저 개발자 도구를 열어 콘솔 오류를 확인하세요. 일부 스크립트는 파일을 더블클릭해 바로 열면 브라우저의 로컬 파일 제한을 받을 수 있어요. 이때는 파일이 있는 디렉터리에서 python -m http.server를 실행한 뒤 로컬 주소로 접속하면 됩니다.

4단계: 체크리스트로 에셋 검수하기

브라우저 미리보기만 보고 판단하지 마세요. 에셋마다 다음 항목을 확인하는 걸 권장해요.

  • 구조: 구성 요소가 빠짐없이 있는지, 눈에 띄게 어긋나거나 겹친 부분은 없는지.
  • 재질: 엔진으로 가져온 뒤 색상과 재질이 미리보기와 일치하는지.
  • 애니메이션: 애니메이션이 GLB에 실제로 포함되어 엔진 안에서 재생되는지.
  • 크기와 원점: 비율과 피벗이 씬 요구 사항에 맞는지. 이 부분은 수동으로 조정해야 할 수 있어요.
  • 수정 가능성: 작은 문제는 우선 코드를 고치고, 구조적인 문제는 다시 생성하세요.

Three.js 코드 중간 계층 클라우드 연동 방안

코드 중간 계층의 장점 중 하나는 특정 모델에 묶이지 않는다는 점이에요. 모델이 실행 가능한 Three.js를 작성할 수만 있다면 같은 흐름에 연결할 수 있죠. 공개 자료에 따르면 Qwen3.5-4B-GLB-3D-Coder는 현재 GGUF 형식으로 배포되며 주로 로컬 추론에 사용돼요. 장비에서 실행하기 어렵거나 범용 코딩 모델의 결과를 비교해 보고 싶다면 클라우드 API를 이용할 수 있어요.

APIYI는 다양한 모델의 API 호출을 제공하며 OpenAI 및 Anthropic 인터페이스 형식과 호환돼요. 기존 클라이언트는 보통 인터페이스 주소, 키, 모델 이름만 조정하면 됩니다. 다만 위에서 언급한 파인튜닝 모델이 클라우드 호출을 제공하는지는 모델 목록에 실제로 표시되는 내용을 기준으로 확인하세요. 구체적인 설정 방법은 APIYI 문서(docs.apiyi.com)에서 볼 수 있어요.

방식 핵심 특징 적합한 사용 사례 비용 산정 기준 사용 가능 플랫폼
로컬 파인튜닝 모델 GLB 에셋에 맞춰 파인튜닝, 다운로드 후 오프라인 사용 가능 플레이스홀더 에셋 대량 생성, 오프라인 실행이 필요할 때 호출당 요금 없음, 자체 하드웨어 필요 LM Studio 등 GGUF 실행 도구
클라우드 범용 코딩 모델 로컬 연산 불필요, 전환과 비교가 쉬움 장비 제약이 있거나 복잡한 프롬프트를 시도할 때 APIYI 가격 페이지 기준 APIYI apiyi.com 및 각 모델 공식 채널
로컬·클라우드 하이브리드 로컬에서 대량 처리, 어려운 에셋은 클라우드로 비용과 성공률을 함께 고려하려는 팀 클라우드 부분은 APIYI 가격 페이지 기준 로컬 도구와 API 플랫폼 연동

API로 Three.js 생성 모델을 호출하는 단계

  1. APIYI 콘솔에서 API 키를 만들고, 문서에서 현재 인터페이스 주소를 확인하세요. 서드파티 튜토리얼에 나온 주소를 그대로 쓰지 마세요.
  2. 기존 클라이언트에 맞춰 OpenAI 또는 Anthropic 인터페이스 형식을 선택하고 base_url과 API 키를 입력하세요.
  3. 모델 목록에서 테스트할 모델을 고르고, 그 이름을 model 필드에 입력하세요.
  4. 앞에서 설명한 시스템 프롬프트를 system 메시지에 넣으세요. 범용 모델은 이 작업에 맞춰 파인튜닝된 것이 아니므로 “완전한 HTML만 출력” 같은 제약을 추가할 수 있어요.
  5. 응답을 .html 파일로 저장하세요. 이후 미리보기, 내보내기, 검증 단계는 로컬 방식과 같아요.

LM Studio의 로컬 서비스도 OpenAI 호환 인터페이스를 제공해요. 따라서 같은 클라이언트로 로컬과 클라우드를 전환할 수 있고, 인터페이스 주소와 모델 이름만 바꾸면 돼요. 이렇게 하면 코드 중간 계층 뒤의 미리보기, 내보내기, 검증 단계는 수정할 필요가 없어요.

과금 안내: 모델 단가, 입력·출력 과금 기준, 캐시 가격은 모두 조정될 수 있어요. 이 글에서는 구체적인 수치를 적지 않고, 모두 APIYI 가격 페이지의 실제 데이터를 기준으로 해요: https://docs.apiyi.com/models

llm-threejs-code-intermediate-layer-workflow-ko-image-3


자주 묻는 질문 FAQ

Q1: Three.js 코드 중간 계층 워크플로란 무엇인가요?

모델이 3D 파일을 직접 출력하는 대신, 먼저 Three.js 프로그램을 작성하고 그 프로그램이 렌더링해서 GLB를 내보내는 방식이에요. 이렇게 하면 내보내기 전에 결과를 미리 보고 수정할 수 있답니다.

Q2: Qwen3.5-4B-GLB-3D-Coder가 GLB를 바로 출력할 수 있나요?

아니요. 이 모델이 출력하는 건 독립적인 HTML 파일이라서, 브라우저에서 열고 “Export GLB” 버튼을 눌러야 비로소 GLB 파일을 얻을 수 있어요.

Q3: 내보낸 GLB는 Godot에서만 쓸 수 있나요?

그렇지 않아요. 시스템 프롬프트는 Godot 워크플로를 목표로 삼고 있지만, GLB는 범용 포맷이라 Unity, Blender, 웹 3D 뷰어 같은 도구에서도 불러올 수 있어요. 다만 가져온 뒤의 결과는 각 도구에서 따로 검증해야 해요.

Q4: 이 모델은 어떤 상황에서 가장 잘 맞나요?

로우 폴리 스타일의 게임 프로토타입과 임시 애셋에 가장 잘 맞아요. NPC, 무기, 탈것, 모듈형 건물, 함정 같은 것들이죠. 고도로 커스터마이즈된 정식 애셋이 필요하다면, 가져온 뒤에 수작업으로 조정해야 한다고 생각하시면 돼요.

Q5: 적당한 그래픽 카드가 없는데, API로 이 흐름을 시험해 볼 수 있나요?

APIYI apiyi.com에서 모델 목록에 있는 코딩 모델을 호출하고, 문서에 따라 OpenAI 또는 Anthropic 형식의 인터페이스를 설정하면 돼요. 모델이 HTML을 출력하면, 그 이후의 미리보기와 내보내기는 모두 로컬 브라우저에서 진행하면 됩니다.

Q6: 클라우드 호출 비용은 어떻게 계산되나요?

모델마다 단가와 과금 기준이 다르니, APIYI 가격 페이지(https://docs.apiyi.com/models)를 직접 확인해 주세요. 먼저 적은 양의 프롬프트로 시험해 보고, 실제 사용량을 기준으로 비용을 추산하는 걸 권장해요.

Q7: 비전 프로젝션 파일이 꼭 필요한가요?

필수는 아니에요. 선택 사항인 BF16 비전 프로젝션 파일은 약 644 MiB로, Qwen3.5 멀티모달 GGUF를 지원하는 실행 환경에서 참조 이미지를 입력할 때 사용해요. 텍스트 프롬프트만 쓴다면 내려받지 않아도 됩니다.

Q8: 이 방식에는 현재 어떤 제한이 있나요?

현재는 프리뷰 버전이라 학습 데이터가 단순한 프롬프트에 치우쳐 있고, 복잡하거나 잘 쓰이지 않는 요구에 대한 일반화 능력이 제한적이며, 사실적인 애셋을 겨냥하지도 않아요. 제작자는 데이터셋과 Safetensors 가중치를 공개하고, 약 10만 개 샘플에 컨텍스트 길이 8K~128K tokens 규모의 더 큰 버전을 학습시킬 계획이라고 하지만, 아직 공개되지는 않았어요.


Three.js 코드 중간 계층 핵심 요점

  • 핵심 아이디어: 모델이 실행 가능한 Three.js 코드를 작성하고, 프로그램이 그것을 GLB로 내보내게 해요.
  • 핵심 장점: 중간 산출물을 미리 보고, 읽고, 일부만 수정할 수 있어서 실패 비용이 낮아요.
  • 로컬 실행: LM Studio에서 GGUF를 로드하고, 고정된 시스템 프롬프트와 권장 샘플링 파라미터를 함께 사용해요.
  • 버전 주의: 11월 2일 이전에 내려받은 가중치는 삭제한 뒤 다시 받는 걸 권장해요.
  • 적용 범위: 로우 폴리 프로토타입과 임시 에셋에는 적합하지만, 실사나 영화급 제작에는 적합하지 않아요.
  • 클라우드 경로: APIYI를 통해 OpenAI 또는 Anthropic 형식으로 모델을 연결하고 결과를 비교할 수 있어요.
  • 방법 확장: Blender Python, OpenSCAD 같은 상황에도 이런 중간 계층 설계를 참고할 수 있어요.

요약

Qwen3.5-4B-GLB-3D-Coder가 주는 시사점은 작은 모델이 게임 에셋을 생성할 수 있다는 데 그치지 않아요. 더 중요한 건 모델과 도구 사이의 역할 분담을 다시 정의했다는 점이에요.

  1. 모델은 표현을 담당: 자연어 설명을 구조가 명확한 Three.js 코드로 바꿔요.
  2. 도구는 실현을 담당: 브라우저와 내보내기 로직이 표준 GLB 파일을 만들어요.
  3. 검증이 사용 가능성을 결정: 대상 엔진에 가져와 검사를 통과해야 비로소 진짜 완성이라고 할 수 있어요.

먼저 간단한 정적 소품 하나로 전체 흐름을 끝까지 돌려 보고, 그다음 애니메이션과 복잡한 에셋을 단계적으로 테스트해 보세요. 여러 클라우드 모델을 비교하고 싶다면 APIYI를 통해 통일된 방식으로 호출할 수 있어요. 연결 방법은 docs.apiyi.com에서 확인할 수 있고, 가격은 https://docs.apiyi.com/models 의 실제 데이터를 기준으로 해요.


📚 참고 자료

  1. Qwen3.5-4B-GLB-3D-Coder 모델 소개: 모델의 목적, 25개 에셋 도메인 및 향후 로드맵
  2. 링크: mindstudio.ai/blog/qwen3-5-4b-glb-3d-coder-model
  3. 설명: 프로젝트의 전반적인 내용과 커뮤니티 사례를 파악하기에 좋아요

  4. Qwen3.5-4B-GLB-3D-Coder 로컬 실행 가이드: 생성 메커니즘, 양자화 버전 및 적용 가능성 분석

  5. 링크: mindstudio.ai/blog/qwen3-5-4b-glb-3d-coder-local
  6. 설명: 모델이 자신의 프로젝트 요구 사항에 맞는지 평가하기에 좋아요

  7. LM Studio 구성 가이드: 시스템 프롬프트, 샘플링 파라미터 및 GLB 내보내기 단계

  8. 링크: mindstudio.ai/blog/run-qwen3-5-glb-3d-coder-locally
  9. 설명: 단계별로 로컬 배포를 완료하기에 좋아요

  10. APIYI 문서 및 가격 페이지: API 연동 안내 및 모델 가격 데이터

  11. 링크: docs.apiyi.com 및 docs.apiyi.com/models
  12. 설명: API 구성과 과금 정보는 이곳의 최신 내용을 기준으로 해요

작성자: APIYI 기술팀
기술 문의: 연동 과정에서 문제가 있으면 APIYI 공식 사이트 apiyi.com으로 문의해 주세요. 더 많은 자료는 문서 센터 docs.apiyi.com에서 확인할 수 있어요.

Similar Posts