์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
๊ฐœ๋ฐœ ยท ํ”„๋กœ๊ทธ๋ž˜๋ฐ

/

ํ”„๋ก ํŠธ์—”๋“œ

(English) Build a First-person View 3D Website with Three.js

In this lesson, you'll create a first-person 3D website that works on both desktop and mobile.

6๋ช… ์ด ์ˆ˜๊ฐ•ํ•˜๊ณ  ์žˆ์–ด์š”.

Three.js์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์›น3dJavaScriptํฌํŠธํด๋ฆฌ์˜ค
Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[ํ”„๋ก ํŠธ์—”๋“œ, Three.js] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • Three.js core concepts

  • Mechanisms for implementing first-person 3D web pages

์ด ๊ฐ•์˜๋Š” ์˜์–ด๋กœ ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค. ํ•œ๊ตญ์–ด ๊ฐ•์˜๋Š” https://inf.run/VjKwJ ์—์„œ ์ˆ˜๊ฐ•ํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

This course teaches you how to create a 3D webpage from a first-person perspective.
(Think of the actions in a game like Mine*raft ๐Ÿ˜Š )

Many of you have been asking me on my website https://studiomeal.com , "How do I make something like this?" So I created a class that implements core movements. It's a class that focuses only on creating 3D space and implementing movements, without any unnecessary details !

Turn your head,

Click on an object to make it move

Create a world where physics applies!

works well on mobile too

๐Ÿฃ I'm new to Three.js, can I start this course right away?

Although this course focuses on implementing 3D space, it also summarizes the core basics in the first section so that even those who are new to Three.js can understand it. If you only understand the basics of JavaScript, you will have no trouble taking the course. You can estimate the difficulty of the course through the free sample lecture. If you want to build more basic skills about Three.js, I recommend taking another course, "3D Interactive Web with Three.js" !

Animations to help you understand the implementation of the behavior

Things to note before taking the class

Learning Materials

  • We provide both the start and finished versions of all codes so that you can follow along and write the code yourself. If you have trouble progressing with the code you wrote yourself in the middle, you can download the source code for that chapter and study from that part.

  • You can use the source code provided in the lecture for your projects.

  • It is not permitted to directly disclose the source code provided in the lecture or to create educational materials.

Player Knowledge and Notes

  • You need to have a basic understanding of JavaScript to be able to take the class smoothly. Although this is not a JavaScript class, I will explain JavaScript concepts that appear here and there, so you won't have much difficulty.

์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”!

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • Who wants to create their own 3D space

  • Those who have studied Three.js but have difficulty applying it

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • JavaScript basics

์•ˆ๋…•ํ•˜์„ธ์š”
1๋ถ„์ฝ”๋”ฉ์ž…๋‹ˆ๋‹ค.

19,120

๋ช…

์ˆ˜๊ฐ•์ƒ

1,195

๊ฐœ

์ˆ˜๊ฐ•ํ‰

1,175

๊ฐœ

๋‹ต๋ณ€

5.0

์ 

๊ฐ•์˜ ํ‰์ 

11

๊ฐœ

๊ฐ•์˜

์„œ์šธ์—์„œ ์›น ๊ฐœ๋ฐœ์ž/๋””์ž์ด๋„ˆ๋กœ ์ผํ–ˆ๊ณ , ์ œ์ฃผ๋ฅผ ๊ฑฐ์ณ.. ํ˜„์žฌ๋Š” ๋ง๋ ˆ์ด์‹œ์•„ ํŽ˜๋‚ญ์—์„œ ์—ด์‹ฌํžˆ ๊ฐœ๋ฐœ๋„ ํ•˜๊ณ , ๊ต์œก ์ฝ˜ํ…์ธ ๋„ ๋งŒ๋“ค๊ณ , 1์ธ ๊ธฐ์—…์œผ๋กœ์„œ ํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์‹œ๋„์™€ ์‹คํ—˜๋“ค์„ ํ•ด๋ณด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๋น„์ฃผ์–ผ ์ž„ํŒฉํŠธ๊ฐ€ ์žˆ๋Š” ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์›น์— ๊ด€์‹ฌ์ด ๋งŽ๊ณ , ์œ ํŠœ๋ธŒ์™€ ํŽ˜์ด์Šค๋ถ "1๋ถ„์ฝ”๋”ฉ"์—์„œ ์›น ๊ฐœ๋ฐœ ๊ด€๋ จ ๊ธฐ์ˆ ๋“ค์„ ๊ณต์œ ํ•˜๊ณ  ์žˆ์–ด์š”.

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

43๊ฐœ โˆ™ (3์‹œ๊ฐ„ 48๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

์ˆ˜์—…์ž๋ฃŒ
๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!