Three.js에서 뛰어넘기기 - Three.js란 무엇입니까? Introduction and Setup -
5842 단어 three.js
오늘부터 Three.js를 잠시 가고 싶습니다.
1. Three.js란?
WebGL은 브라우저에서 3DCG 프로그래밍을 실현할 수 있는 기술이지만, 매우 어렵고 복잡하고 고급 기술이 필요합니다.
그러나 Three.js를 사용하면 Javascript API를 통해 WebGL 기능을 쉽게 사용할 수 있으며 아름다운 3D 그래픽을 만들 수 있습니다.
2. 참고문헌
Three.js 공식 DOC
ICS MEDIA
처음 Three.js
3. 학습 방법
❶. Three.js를 배우는 방법?
National Training Laboratories 의 학습의 피라미드에 의하면, 타인에게 가르치는 것, 스스로 실천하는 것, 그룹 토론을 하는 것이, 학습의 정착율을 높이기 위한 비결이다.
active learning이라는 녀석이네요.
즉, 피라미드 위에 있는 '강의 받기, 책 읽기, 동영상 보기'
혼자서는 안되는 것입니다.
input 가 아니라, 어떻게 output 하는가?
수파리를 의식하고 복리효과를 의식하며 사람들의 도움을 주기 위해 가치를 창출하는 것을 강하게 의식한다.
자신을 위해서가 아니라 누군가를 위해 치아를 먹고 자주 노력한다.
이것을 담담하게 하는 것이 최강의 공부법이라고 생각합니다.
❷. Three.js 교재
1 : 도트 설치
2 : 처음 Three.js
3: ICS Media Three.js 입문 사이트
4: Udemy
등이 있습니다.
이것들을 보면서 실제로 자신의 손을 움직이는 것이 중요하네요.
재미있는 법인 카약의 여기 블로그에는 매우 도움이 될 조언이있었습니다.
「어라? 이 차례로 캔버스의 라이브러리를 만지면 더 빨리 이해할 수 있었던 것이 아닐까… 」라고. 그 순서는
Three.js 공식 DOC
ICS MEDIA
처음 Three.js
3. 학습 방법
❶. Three.js를 배우는 방법?
National Training Laboratories 의 학습의 피라미드에 의하면, 타인에게 가르치는 것, 스스로 실천하는 것, 그룹 토론을 하는 것이, 학습의 정착율을 높이기 위한 비결이다.
active learning이라는 녀석이네요.
즉, 피라미드 위에 있는 '강의 받기, 책 읽기, 동영상 보기'
혼자서는 안되는 것입니다.
input 가 아니라, 어떻게 output 하는가?
수파리를 의식하고 복리효과를 의식하며 사람들의 도움을 주기 위해 가치를 창출하는 것을 강하게 의식한다.
자신을 위해서가 아니라 누군가를 위해 치아를 먹고 자주 노력한다.
이것을 담담하게 하는 것이 최강의 공부법이라고 생각합니다.
❷. Three.js 교재
1 : 도트 설치
2 : 처음 Three.js
3: ICS Media Three.js 입문 사이트
4: Udemy
등이 있습니다.
이것들을 보면서 실제로 자신의 손을 움직이는 것이 중요하네요.
재미있는 법인 카약의 여기 블로그에는 매우 도움이 될 조언이있었습니다.
「어라? 이 차례로 캔버스의 라이브러리를 만지면 더 빨리 이해할 수 있었던 것이 아닐까… 」라고. 그 순서는
저는 3D를 해보고 싶어서 가장 먼저 three.js를 만졌습니다만, canvas의 표준 API와 너무 달라, 전혀 모르는 채 한 번 좌절해 버렸습니다.
그런데 create.js나 pixi.js를 사용한 뒤라면 손도 다리도 아니었던 three.js의 사용법이 쏙 들어왔습니다.
선구자의 위인의 조언은, 정말로 존경하고, 참고가 되네요.
만약 three.js 에 좌절했을 때는 create.js 에 임해 봅시다.
4. 분해해 본다
❶.
그럼, 코드를 써 갑니다.
먼저 CDN 에서 three.min.js (일반 three.js의 1/4 크기)를 로드합시다.
css는 전체 페이지를 사용하기 때문에 margin, paddding: 0으로, overflow:hidden 으로합시다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
</body>
</html>
다음으로 body 요소 안에 canvas 요소를 만듭니다.
index.html <body>
<canvas class="stage"></canvas>
</body>
나중에이 캔버스를 조작하여 WebGL을 그리기위한 렌더러를 만듭니다.
❷.
처리를 수행하는 코드를 작성해 보겠습니다.
index.html <body>
<canvas class="stage"></canvas>
<script>
function init() {
//Three.js の処理をかく
}
window.addEventListener("load", init);
</script>
</body>
init 함수 안에 Three.js에 관한 모든 Javascript가 삽입됩니다.
그리고 HTML 문서의 로드가 모두 완료했을 때에, init 함수가 불려 WebGL의 처리가 실행됩니다.
오늘은 간단하지만 이상입니다.
내일부터 init 함수 안에 처리를 쓰고 three.js 를 즐겨 갑시다.
그럼 또 내일~
Reference
이 문제에 관하여(Three.js에서 뛰어넘기기 - Three.js란 무엇입니까? Introduction and Setup -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/duka/items/0fd76c2093fbdf688923
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
</body>
</html>
<body>
<canvas class="stage"></canvas>
</body>
<body>
<canvas class="stage"></canvas>
<script>
function init() {
//Three.js の処理をかく
}
window.addEventListener("load", init);
</script>
</body>
Reference
이 문제에 관하여(Three.js에서 뛰어넘기기 - Three.js란 무엇입니까? Introduction and Setup -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/duka/items/0fd76c2093fbdf688923텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
