<!DOCTYPE html><html lang="ko"><head>
<meta charset="utf-8">
<title>로 게임 만들기</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@threejs">
<meta name="twitter:title" content="Three.js – 로 게임 만들기">
<meta property="og:image" content="https://threejs.org/files/share.png">
<link rel="shortcut icon" href="/files/favicon_white.ico" media="(prefers-color-scheme: dark)">
<link rel="shortcut icon" href="/files/favicon.ico" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="/manual/resources/lesson.css">
<link rel="stylesheet" href="/manual/resources/lang.css">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "../../build/three.module.js"
}
}
</script>
<link rel="stylesheet" href="/manual/ko/lang.css">
</head>
<body>
<div class="container">
<div class="lesson-title">
<h1>로 게임 만들기</h1>
</div>
<div class="lesson">
<div class="lesson-main">
<p>제가 꽤 많이 받았던 질문 중 하나가 Three.js로 게임을 만드는 방법에 관한 것이었습니다. 기초적인 것이긴 해도 부디 이 글에 여러분이 원했던 내용이 있다면 좋겠네요.</p>
<p>글을 쓰는 현재를 기준으로, 아마 이 글이 이 시리즈에서 가장 긴 글이 될 것 같습니다. 예제로 쓴 코드가 지나치게 전문적으로 보일 수도 있지만 그건 예제를 만들며 문제가 생길 때마다 이전에 제가 실제로 만들었던 게임의 코드를 가져와서 그렇습니다. 또한 왜 이런 해결책을 썼는지 최대한 적으려고 했으니 길 수밖에 없죠. 물론 만들려는 게임의 규모가 작다면 이런 해결책이 전부 필요 없을 수 있습니다. 하지만 예제로 구현한 것도 굉장히 간단한 게임에 속합니다. 통상적으로 3D 캐릭터가 2D 캐릭터보다 더 복잡하니 처리해줘야 할 것이 많을 수밖에 없죠.</p>
<p>팩맨(PacMan)을 2D로 구현한다면 팩맨이 코너를 돌 때 바로 90도 꺾기만 하면 됩니다. 프레임 사이에 따로 처리해줘야 할 것이 없죠. 하지만 3D의 세계에서는 바로 방향을 틀기보다 몇 프레임에 걸쳐 서서히 방향을 트는 게 일반적입니다. 아주 간단한 차이점이지만, 이것 때문에 작업이 훨씬 복잡해집니다.</p>
<p>이 글에서 다룰 내용은 Three.js에 관한 것이라고 보기 어렵습니다. 왜냐하면 <strong>Three.js는 게임 엔진이 아니기 때문</strong>이죠. Three.js는 3D 라이브러리입니다. 3D 요소를 계열화하는 <a href="scenegraph.html">씬 그래프</a>와 3D 요소를 렌더링하도록 도와주는 기능 등을 제공하죠. 하지만 게임과 관련한 기능은 지원하지 않습니다. 충돌(collision), 물리(physics), 입력 시스템, 패스 파인딩(path finding) 등등.. 이런 기능은 직접 만들어야 합니다.</p>
<p>결국 이 글의 <em>미완성</em> 게임을 만드는 데 꽤 많은 코드를 썼습니다. 아까 말했듯 제가 코드를 너무 지나치게 짰을 수도 있고, 더 간단한 해결책이 있을 수도 있으나, 저는 글을 마무리한 지금도 충분히 많은 코드를 썼는지, 설명을 빠뜨린 것이 없는지 걱정됩니다.</p>
<p>이 글에서 쓴 방법은 대부분 <a href="https://unity.com">유니티(Unity) 엔진</a>의 영향을 크게 받았습니다. 하지만 유니티를 잘 모른다고 해서 이 글을 읽는 게 어렵진 않을 겁니다. 1000개의 기능이 있다면 그 중 10개 정도 밖에 쓰지 않았거든요.</p>
<p>먼저 Three.js 부분부터 시작해봅시다. 게임에 쓸 모델들부터 찾아보죠.</p>
<p><a href="https://opengameart.org">opengameart.org</a> 사이트에서 <a href="https://opengameart.org/users/quaternius">quaternius</a> 작가의 <a href="https://opengameart.org/content/lowpoly-animated-knight">움직이는 기사 모델</a>을 찾았습니다.</p>
<div class="threejs_center"><img src="../resources/images/knight.jpg" style="width: 375px;"></div>
<p><a href="https://opengameart.org/users/quaternius">같은 작가</a>가 만든 작품 중에 <a href="https://opengameart.org/content/lowpoly-animated-farm-animal-pack">움직이는 동물들</a>도 있더군요.</p>
<div class="threejs_center"><img src="../resources/images/animals.jpg" style="width: 606px;"></div>
<p>이 모델들로 꽤 괜찮은 게임을 만들 수 있을 것 같습니다. 모델들을 불러와보죠.</p>
<p><a href="load-gltf.html">glTF 파일 불러오기</a>에 대해서는 이전에 다뤘었습니다. 동일한 방법을 사용하지만 이번에는 모델이 여러 개이기도 하고, 모델을 전부 불러오기 전에 게임을 시작해선 안 됩니다.</p>
<p>이런 경우를 대비해 Three.js는 <a href="/docs/#api/ko/loaders/managers/LoadingManager"><code class="notranslate" translate="no">LoadingManager</code></a>를 제공합니다. <a href="/docs/#api/ko/loaders/managers/LoadingManager"><code class="notranslate" translate="no">LoadingManager</code></a>의 인스턴스를 생성해 다른 로더(loader)에 넘겨주기면 되죠. <a href="/docs/#api/ko/loaders/managers/LoadingManager"><code class="notranslate" translate="no">LoadingManager</code></a>의 <a href="/docs/#api/ko/loaders/managers/LoadingManager#onProgress"><code class="notranslate" translate="no">onProgress</code></a>와 <a href="/docs/#api/ko/loaders/managers/LoadingManager#onLoad"><code class="notranslate" translate="no">onLoad</code></a> 속성에 콜백 함수를 지정하면 되는데, <a href="/docs/#api/ko/loaders/managers/LoadingManager#onLoad"><code class="notranslate" translate="no">onLoad</code></a>는 모든 파일을 불러온 뒤 호출하고, <a href="/docs/#api/ko/loaders/managers/LoadingManager#onProgress"><code class="notranslate" translate="no">onProgress</code></a>는 각 파일을 불러왔을 때 호출합니다. <a href="/docs/#api/ko/loaders/managers/LoadingManager#onProgress"><code class="notranslate" translate="no">onProgress</code></a>를 이용하면 프로그래스 바를 보여줄 수 있죠.</p>
<p><a href="load-gltf.html">glTF 파일 불러오기</a> 예제를 가져와 카메라 절두체(frustum)를 조정하는 코드를 지우고 아래 코드를 추가합니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const manager = new THREE.LoadingManager();
manager.onLoad = init;
const models = {
pig: { url: 'resources/models/animals/Pig.gltf' },
cow: { url: 'resources/models/animals/Cow.gltf' },
llama: { url: 'resources/models/animals/Llama.gltf' },
pug: { url: 'resources/models/animals/Pug.gltf' },
sheep: { url: 'resources/models/animals/Sheep.gltf' },
zebra: { url: 'resources/models/animals/Zebra.gltf' },
horse: { url: 'resources/models/animals/Horse.gltf' },
knight: { url: 'resources/models/knight/KnightCharacter.gltf' },
};
{
const gltfLoader = new GLTFLoader(manager);
for (const model of Object.values(models)) {
gltfLoader.load(model.url, (gltf) => {
model.gltf = gltf;
});
}
}
function init() {
// 나중에 작성할 예정
}
</pre>
<p>위 코드는 <code class="notranslate" translate="no">models</code> 객체에 있는 파일을 불러오고, <a href="/docs/#api/ko/loaders/managers/LoadingManager"><code class="notranslate" translate="no">LoadingManager</code></a>가 파일을 전부 불러왔을 때 <code class="notranslate" translate="no">init</code> 함수를 호출합니다. <code class="notranslate" translate="no">models</code> 객체를 전역�
three.js-r144
需积分: 0 184 浏览量
2023-01-31
16:13:18
上传
评论
收藏 311.37MB ZIP 举报
three.js-r144 （4735个子文件） 
test.3DL 457KB Presetpro-Cinematic.3dl 440KB small-output-range.3DL 5KB green.3DL 5KB Rhino_Logo.3dm 5.36MB portalgun.3ds 116KB multipletextures.3mf 2.95MB truck.3mf 2.53MB cube_gears.3mf 223KB facecolors.3mf 2KB vertexcolors.3mf 1KB rook.amf 48KB gpw_v4_basic_demographic_characteristics_rev10_a000_014ft_2010_dens_1_deg.asc 370KB gpw_v4_basic_demographic_characteristics_rev10_a000_014mt_2010_dens_1_deg.asc 370KB gpw_v4_basic_demographic_characteristics_rev10_a000_014bt_2010_dens_1_deg.asc 367KB gpw_v4_basic_demographic_characteristics_rev10_a000_014ft_2010_cntm_1_deg.asc 353KB gpw_v4_basic_demographic_characteristics_rev10_a000_014mt_2010_cntm_1_deg.asc 353KB gpw_v4_basic_demographic_characteristics_rev10_a000_014bt_2010_cntm_1_deg.asc 352KB canestra_di_frutta_caravaggio.basis 53KB scene.bin 3.61MB MaterialsVariantsShoe.bin 689KB DamagedHelmet.bin 545KB Zebra.bin 544KB Cow.bin 500KB Horse.bin 457KB KnightCharacter.bin 447KB Llama.bin 392KB Pig.bin 387KB Sheep.bin 385KB Pug.bin 375KB scene.bin 285KB AnimatedMorphSphere.bin 213KB scene.bin 134KB Xbot.blend 22.98MB
eyeM2.bmp 48KB pirouette.bvh 746KB three.cjs 1.08MB test.CSP 864KB small-output-range.CSP 9KB green.CSP 9KB editor.main.css 89KB tabler-icons.min.css 51KB main.css 11KB main.css 9KB codemirror.css 9KB lesson.css 8KB normalize.css 7KB page.css 4KB lang.css 3KB threejs-tutorials.css 3KB monokai.css 2KB tern.css 2KB style.css 1KB main.css 1KB threejs-primitives.css 1KB threejs.css 1KB threejs-material-table.css 1002B threejs-lessons.css 950B index.css 777B prettify.css 675B show-hint.css 623B lang.css 589B open-sans.css 578B dialog.css 507B lesson-helper.css 322B threejs-textures.css 226B lang.css 128B threejs-align-html-elements-to-3d.css 77B Clayton 33.CUBE 864KB Chemical 168.CUBE 864KB Remy 24.CUBE 864KB Cubicle 99.CUBE 864KB Bourbon 64.CUBE 864KB test.CUBE 864KB green.CUBE 9KB small-output-range.CUBE 9KB example.CUBE 70B identity.CUBE 62B abb_irb52_7_120.dae 4.92MB pump.dae 2.46MB stormtrooper.dae 2.09MB elf.dae 1.85MB skin_and_morph.dae 35KB Mountains.dds 768KB Mountains_argb_mip.dds 512KB Mountains_argb_nomip.dds 384KB disturb_argb_mip.dds 341KB disturb_argb_nomip.dds 256KB disturb_dxt1_mip.dds 171KB disturb_dxt1_nomip.dds 128KB explosion_dxt5_mip.dds 85KB hepatica_dxt3_mip.dds 85KB bunny.drc 94KB .editorconfig 187B tabler-icons.eot 598KB uncompressed.exr 2.01MB piz_compressed.exr 1.75MB memorial.exr 1.08MB 040full.exr 1.02MB stanford-bunny.fbx 7.69MB共 4735 条
- 1
- 2
- 3
- 4
- 5
- 6
- 48
资源评论
cwr888
- 粉丝: 494
- 资源: 38
最新资源
- 基于STM32使用HAL库实现USB组合设备之多路CDC源码+说明文档.zip
- 金融贸易项目springboot
- mybatis动态sqlSQL 映射 XML 文件是所有 sql 语句
- 基于基于STM32的智能家居系统源码+qt上位机源码.zip
- 深圳房地产资源数据报告
- 基于stm32的智能门禁系统源码+设计文档+演示视频.zip
- cef + chromium 完整源码支持h265和h264
- 基于SpringBoot的API管理平台源代码+数据库，以项目的形式管理API文档，可以进行API的编辑、测试、Mock等操作
- protobuf 3.11版本，静态编译
- 2023NOC创客智慧编程赛项真题图形化-选拔赛（有解析）
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
