강의

멘토링

로드맵

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

  • Hyungjin님의 프로필 이미지
    Hyungjin

    Reviews 20

    Average Rating 5.0

    5

    100% enrolled

    어느 정도 Three.js를 알고 있는 상태에서 학습하니 훨씬 더 좋은 거 같습니다. 기존에 알고 있는 내용에 이어서 새로운 것을 알게 되어서 만족스럽네요 설명 방식이랑 구현 원리에 대해 그림이나 시각자료로 이해하기 쉽게 돕는 부분도 너무 좋았어요! 정성스럽고 친절한 강의 잘 들었습니다! ☺

    • 1분코딩
      Instructor

      감사합니다 형진님- 개념을 이해하기 쉽도록 애니메이션 등의 시각 자료들을 사용해보았는데, 좋게 느끼셨다니 저도 좋네요😊 멋진 작품 만드시길!

  • Thomas님의 프로필 이미지
    Thomas

    Reviews 46

    Average Rating 4.7

    5

    100% enrolled

    멋진 수업 감사합니다.

    • 1분코딩
      Instructor

      좋은 말씀 감사합니다 Thomas님 :)

  • 윤인호님의 프로필 이미지
    윤인호

    Reviews 1

    Average Rating 5.0

    5

    58% enrolled

    이전 강의를 듣고 새로운 THREE.JS 강의가 올라오자마자 듣게 되었는데 프로젝트에 실제 적용하기 위한 핵심 내용만 들어있어서 구현하는 방법만 알고 싶은 분들이 듣기에 좋은 것 같습니다. 반대로 상세하게 알고 싶으신 분들이나 처음이신 분들은 듣다 보면 이해하기 어렵다고 느낄 수도 있을 것 같습니다. 앞선 강의를 듣고 이 강의를 들으니 어떻게 개발하면 될지 새로 알게 돼서 더 좋은 것 같아요!

    • 1분코딩
      Instructor

      자세한 수강평 남겨주셔서 감사합니다 인호님 :D 이번 강의는 Three.js를 처음 접하는 분들이 들을 수 있으면서도, 이전 강의를 수강하신 분들께도 새로운 내용을 전해드리고 싶다는 생각이었는데- 이어서 들은게 도움이 되셨다는 말씀을 해주시니 감사하네요! ^^

  • 문정훈님의 프로필 이미지
    문정훈

    Reviews 5

    Average Rating 5.0

    5

    100% enrolled

    어려운 내용을 쉽게 배울 수 있었습니다.

    • 1분코딩
      Instructor

      첫 수강평과 좋은 말씀 감사드립니다 정훈님😊 멋진 작품 만드시길 바라겠습니다!

  • jongchan.lee님의 프로필 이미지
    jongchan.lee

    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!