<!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">
<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> 객체를 전역으로 선언한 건 나중에 <a href="/docs/#examples/loaders/GLTFLoader"><code class="notranslate" translate="no">GLTFLoader</code></a>의 콜백을 이용해 각 모델의 정보를 사용할 때 불러온 각 모델에 접근할 수 있도록 하기 위함입니다.</p>
<p>모든 모델
圣诞树的HTML祝福，网页打开
需积分: 5 41 浏览量
2022-12-28
22:40:44
上传
评论
收藏 309.55MB ZIP 举报
圣诞树的HTML祝福，网页打开 （2000个子文件） 
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
game.html 91KB game.html 82KB webgl_materials_nodes.html 79KB offscreencanvas.html 54KB offscreencanvas.html 49KB offscreencanvas.html 48KB voxel-geometry.html 46KB offscreencanvas.html 44KB voxel-geometry.html 43KB textures.html 42KB debugging-javascript.html 39KB load-obj.html 39KB optimize-lots-of-objects-animated.html 39KB lights.html 38KB cameras.html 38KB load-obj.html 37KB load-gltf.html 36KB shadows.html 36KB textures.html 35KB textures.html 35KB load-gltf.html 35KB load-obj.html 35KB align-html-elements-to-3d.html 34KB lights.html 34KB optimize-lots-of-objects-animated.html 34KB align-html-elements-to-3d.html 34KB lights.html 34KB textures.html 34KB optimize-lots-of-objects-animated.html 33KB lights.html 32KB lights.html 32KB load-gltf.html 32KB debugging-javascript.html 32KB fundamentals.html 32KB load-obj.html 32KB scenegraph.html 32KB align-html-elements-to-3d.html 32KB debugging-javascript.html 32KB textures.html 31KB custom-buffergeometry.html 31KB indexed-textures.html 31KB scenegraph.html 31KB optimize-lots-of-objects-animated.html 31KB textures.html 31KB lights.html 31KB indexed-textures.html 31KB cameras.html 31KB cameras.html 31KB optimize-lots-of-objects.html 31KB optimize-lots-of-objects-animated.html 31KB scenegraph.html 30KB shadows.html 30KB cameras.html 30KB scenegraph.html 30KB fundamentals.html 30KB cameras.html 30KB multiple-scenes.html 29KB shadows.html 29KB multiple-scenes.html 29KB shadows.html 29KB scenegraph.html 29KB custom-geometry.html 29KB post-processing-3dlut.html 29KB scenegraph.html 29KB post-processing-3dlut.html 28KB indexed-textures.html 28KB debugging-javascript.html 28KB shadows.html 28KB multiple-scenes.html 28KB game-conga-line-w-notes.html 27KB fundamentals.html 27KB multiple-scenes.html 27KB共 2000 条
- 1
- 2
- 3
- 4
- 5
- 6
- 20
资源评论
lfn.
- 粉丝: 3
- 资源: 15
最新资源
- 后端开发框架探索与选择
- Python课设-学生信息管理系统
- 广东省2021年普通高考音乐表演-器乐类总分分数段统计表（含本、专科层次加分）
- ubuntu20.04安装教程.md
- 广东省2021年普通高考音乐表演-声乐类总分分数段统计表（含本、专科层次加分）
- 广东省2021年普通高考音乐学类总分分数段统计表（含本、专科层次加分）
- 广东省2021年普通高考舞蹈类总分分数段统计表（含本、专科层次加分）
- Python教程-快速入门基础必看课程10-函数基础
- tensorflow-2.9.2-cp39-cp39-win-amd64.whl
- tensorflow-2.9.2-cp37-cp37m-win-amd64.whl
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
