강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Front-end

Creating a First-Person 3D Website with Three.js

This course will teach you how to create a first-person 3D website that works on both desktop and mobile.

(5.0) 7 reviews

243 learners

  • studiomeal
3d웹사이트
3d
three.js
Interactive Web
Three.js
JavaScript
Portfolio

Reviews from Early Learners

What you will learn!

  • Three.js Core Concepts

  • Principles of implementing a first-person 3D web page

This course covers creating 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, "How do I make something like this?" after seeing my website, https://studiomeal.com . So, I've created a course that focuses on implementing core movements. It's a no-frills course focused solely on creating 3D space and implementing movements !

Turn your head,

Click on an object to make it move

Create a world where physics applies

An example that works well on mobile too

🤔 How is this different from the previously released "3D Interactive Web with Three.js" course?

The existing lecture, 3D Interactive Web Starting with Three.js, is a 'comprehensive lecture' that covers the basic concepts of Three.js in detail and allows you to study various examples.

This lecture quickly covers the core fundamentals of Three.js and focuses on the 'principles of implementing first-person 3D space' .

🐣 I'm new to Three.js. Can I start this course right away?

While this course focuses on implementing 3D space, it summarizes the core fundamentals in the first section to ensure that even those new to Three.js can understand it. A basic understanding of JavaScript is sufficient for the course. Free sample lectures are available to give you an idea of the course's difficulty level. For those who want to solidify their Three.js foundation, we recommend taking our other course, "3D Interactive Web with Three.js."

🛤 Get a 30% discount coupon on the 1-minute coding Three.js roadmap.

You can get a 30% discount coupon "Apply to entire purchase" from the 1-minute coding Three.js roadmap.
(Even if you are already taking one of the two lectures, if you apply for the new lecture with the roadmap coupon, a 30% discount will be applied. If you want to take both lectures, please apply for them on the roadmap !)

Go to Roadmap

Lecture Features

Use images and animations to make it easier to understand

Since this is a class where understanding the implementation of movements is important, rather than just explaining it with words, we used images and animations to make it easier to understand.

This course focuses on implementing first-person 3D websites.

This course summarizes the fundamental concepts of Three.js and focuses on implementing first-person 3D spaces. It's ideal for those who want to quickly create their own 3D spaces.

Things to note before taking the course

Learning Materials

  • We provide both starting and finished versions of all code so you can follow along and write your own. If you encounter a problem with your code midway through the course and are having trouble progressing, you can download the source code for that chapter and continue learning from that point forward.

  • The source code provided in the lecture can be used in your projects.

  • Directly disclosing the source code provided in the lecture or creating educational materials is not permitted.

Player Knowledge and Precautions

  • A basic understanding of JavaScript is essential for a smooth learning experience. While this isn't a JavaScript course, we'll cover JavaScript concepts that appear throughout, so you shouldn't have much difficulty.

  • This lecture was produced with AI voice, so it may feel a bit different from my previous lectures. Please check out the sample lecture before taking it. 😊

Recommended for
these people

Who is this course right for?

  • Anyone who wants to create their own 3D space

  • People who studied Three.js but find it difficult to apply it

Need to know before starting?

  • JavaScript Basics

Hello
This is

19,374

Learners

1,236

Reviews

1,175

Answers

5.0

Rating

11

Courses

서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.

Curriculum

All

43 lectures ∙ (3hr 47min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

7 reviews

5.0

7 reviews

  • hjux님의 프로필 이미지
    hjux

    Reviews 20

    Average Rating 5.0

    5

    100% enrolled

    I think it's much better to learn it after having some knowledge of Three.js. I'm satisfied because I learned something new along with what I already knew. I also really liked the part where the explanation method and implementation principles were explained in an easy-to-understand way with pictures and visual aids! I listened to the sincere and kind lecture well! ☺

    • studiomeal
      Instructor

      Thank you Hyungjin-nim- I tried using visual aids such as animations to make it easier to understand the concept, and I'm glad you liked it😊 I hope you create a great piece!

  • orangewebcenter2238님의 프로필 이미지
    orangewebcenter2238

    Reviews 46

    Average Rating 4.7

    5

    100% enrolled

    Thank you for the great class.

    • studiomeal
      Instructor

      Thank you for your kind words Thomas :)

  • dlsgh24681368님의 프로필 이미지
    dlsgh24681368

    Reviews 1

    Average Rating 5.0

    5

    58% enrolled

    I listened to the new THREE.JS lecture right after I listened to the previous lecture, and it only contains the core content for practical application to projects, so it seems good for those who only want to know how to implement it. On the other hand, those who want to know in detail or those who are new to it may feel difficult to understand as they listen. I listened to the previous lecture and this lecture, and I think it's better because I learned a new way to develop!

    • studiomeal
      Instructor

      Thank you for leaving a detailed review, Inho :D I wanted to make this lecture suitable for those who are new to Three.js, but also provide new content to those who have taken the previous lecture - I am grateful that you said that listening to it was helpful! ^^

  • ohmymoon님의 프로필 이미지
    ohmymoon

    Reviews 5

    Average Rating 5.0

    5

    100% enrolled

    I was able to learn difficult content easily.

    • studiomeal
      Instructor

      Thank you for your first class review and kind words, Jeonghoon. 😊 I hope you create great works!

  • jongchanlee2597님의 프로필 이미지
    jongchanlee2597

    Reviews 1

    Average Rating 5.0

    5

    30% enrolled

    $68.20

    studiomeal's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!