Apr-11-2024 14-56-50.gif

<aside> 💁‍♂️

Three.js란 WebGL을 기반으로 하며 브라우저에서 3D 콘텐츠를 만들고 렌더링하는 데 사용되는 JavaScript 라이브러리다.

</aside>

맛보기 준비.

먼저 렌더링할 멋진 3D 객체가 필요하다.

무료 사이트는 많으니 마음에 드는 파일을 다운받자. ( 확장자는 GLTF로 다운받길! )

GLTF란?

GLTF란?

Untitled

Korean Fire Extinguisher 3D 모델. 무료 다운로드. | Creazilla

나는 멋진 소화기를 다운받았다.

프로젝트 생성.

프로젝트를 생성하고 canvas태그 하나를 만들자

canvas태그는 이제 소화기를 그려줄 것이다.

<body>
    <canvas id="canvas" width="2000" height="2000"></canvas>
</body>

그다음 필요한 라이브러리들을 가져온 다음.

 <script type="importmap">
      {
        "imports": {
          "three": "<https://unpkg.com/[email protected]/build/three.module.js>",
          "GLTFLoader": "<https://unpkg.com/[email protected]/examples/jsm/loaders/GLTFLoader.js>",
          "OrbitControls": "<https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js>"
        }
      }
 </script>