https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics#webgl

https://github.com/2taesung/JSOfficialDoc

웹지엘

라이브러리 사용

복잡하기 때문에, 대부분의 사람들은 같은 타사 자바 스크립트 라이브러리를 사용하여 3D 그래픽 코드를 작성 Three.js를 , PlayCanvas , 또는 Babylon.js .

=> 아... 다 있구만 ;

예, 이들 중 하나를 사용한다는 것은 다른 새로운 API(이 경우 타사 API)를 배우는 것을 의미하지만 원시 WebGL을 코딩하는 것보다 훨씬 간단합니다.

=> 오키

큐브 재생성

1. 각각의 파일들을 연결시킨다.
   => three.min.js와 main.js의 설명이 다른데... 둘다 같은 js파일인데 둘의 차이를 모르겠다.

2. 3D용 canvas 객체를 생성

const scene = new THREE.Scene();

=> canvas 객체 같은거

3. 카메라 객체를 생성한다.
   3D 이미지 용어로 카메라는 세상에서 보는 사람의 위치를 나타냅니다.
   => 생각해보니까 3D는 보여지는 기준점이 필요하겠네

PerspectiveCamera() 생성자는 네개의 인수: 시야각, 종횡비, 근거리 평면, 원거리 평면을 갖는다.

camera.position.z = 5;

=> 마치 css에서 index z와 같은 기능을 한다.

4. 카메라를 통해 주어진 장면 렌더링하는 객체

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

=> 아하 얘를 통해 최종적으로 렌더링이 완료됨.