[모아두기] 웹브라우저에서 3D 화면을 자바스크립트로 - three.js

 

 

군복무 마치고 복학했을 즈음 모자이크 라는 웹브라우저가 처음으로 나왔던 그때, 그땐 자바스크립트 라는 것도 없던 시절의 웹 브라우저를 기억하면서 요즘 웹브라우저에서 가능한 것들을 보면 놀랍습니다.
1년쯤 지나자 자바라는 것이 나타나고, 웹브라우저 안에서 동작하는 애플릿 이라는 개념이 나옵니다. 그리고 자바스크립트가 생겨나면서 웹브라우저 안에서 동적인 콘텐츠를 만들기 위한 방법들이 계속 발전하게 되었지요.

요즘의 웹브라우저와 자바스크립트의 성능이 무척 좋아져서 이젠 3D 콘텐츠를 웹브라우저 안에서 돌릴 수 있는 날이 왔습니다.
자바 스크립트로. 자바스크립트의 세상, 자바 스크립트 만세!!

https://threejs.org/ 에 가보면 three.js 로 만든 놀라운 웹사이트들의 예제가 수북히 쌓여 있습니다.

 

 

three.js 사용하여 간단한 데모 만드는 영상

Build a Mindblowing 3D Portfolio Website // Three.js Beginner’s Tutorial

 

 

도움이 될만한 다른 영상들

 

Three.js Docs - https://threejs.org/
WebGL Overview - https://youtu.be/f-9LEoYYvE4
Inspiration - https://atelier.net/virtual-economy/

 

 

데모영상 소스코드

위 영상에서 소개된 소스는 github에 올려져 있으며, 이 데모는 웹사이트 콘텐츠를 스크롤 다운 하면 배경의 3D 화면이 움직이는 데모입니다.

웹 브라우저에서 3D 게임도 나오고, 마인 크래프트도 설치 없이 웹브라우저로 하는 날이 올 것 같습니다.

 

GitHub - fireship-io/threejs-scroll-animation-demo: 3D Scrolling Portfolio Website with Three.js

 

 

초보자용 강의 영상 하나 더 (feat. freeCodeCamp)

freeCodeCamp.org 에 정말 좋은 영상들이 많이 올라 옵니다.

 

본인의 유료 강의 홍보를 목적으로, 샘플 강의를 올리기도 하고

정말 선의로 엄청난 강의를 그냥 올리기도 하고

 

정말 다양한 분야의 많은 강의들이 무료로 올라오는 엄청난 채널

 

아래 영상은 초보자용 1시간짜리 영상이지만

10시간, 20시간, 30시간 짜리 풀 강의 들도 자주 올라 옵니다.

구독해 놓으면 좋습니다.

 

Code a Squid Game JavaScript Game Using Three.js - Tutorial for Beginners

 

 

 

가상화폐 코인, 투기 말고 무슨 용도가 있나 - 불법은 아닌 도박장

레깅스 논란 - 내가 기분 나쁘다고 다른 사람에게 강요할 수 있나?

성평등을 위해 여성도 군대 가라, 그런다고 가겠다니 - 둘 다 넘 심한거 아냐?

주식 공매도, 기득권의 횡포인가

남양유업 회장 공식 사과에 사퇴하면 뭐하나, 책임은 안지는데

흡연자는 이제 범죄자? 담배는 이제 판매금지? - 흡연자도 마음 놓고 피울 수 있는 권리를 보장해

밍크 살처분으로 다시 보는 인간의 잔혹한 모피 사랑