three.js

three.js는 웹에서 리얼타임 3D 그래픽을 구현하기 위한 JavaScript 라이브러리입니다. WebGL을 사용하여 브라우저에서 하드웨어 가속 그래픽을 표시할 수 있으며, 사용자가 쉽게 3D 콘텐츠를 생성하고 조작할 수 있도록 다양한 도구와 API를 제공합니다.

Latest Ver 0.174.0

Homepage

Github

105,952

📢 three.js는 웹 기반 3D 애플리케이션 개발을 위한 JavaScript 라이브러리로, WebGL을 기반으로 합니다.

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/three.js/0.174.0/three.core.js

https://cdnjs.cloudflare.com/ajax/libs/three.js/0.174.0/three.core.min.js

https://cdnjs.cloudflare.com/ajax/libs/three.js/0.174.0/three.module.js

https://cdnjs.cloudflare.com/ajax/libs/three.js/0.174.0/three.module.min.js

https://cdnjs.cloudflare.com/ajax/libs/three.js/0.174.0/three.tsl.js

https://cdnjs.cloudflare.com/ajax/libs/three.js/0.174.0/three.tsl.min.js

https://cdnjs.cloudflare.com/ajax/libs/three.js/0.174.0/three.webgpu.js

https://cdnjs.cloudflare.com/ajax/libs/three.js/0.174.0/three.webgpu.min.js

https://cdnjs.cloudflare.com/ajax/libs/three.js/0.174.0/three.webgpu.nodes.js

https://cdnjs.cloudflare.com/ajax/libs/three.js/0.174.0/three.webgpu.nodes.min.js

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 HTML
<div id='container'></div>

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

⚙️ JavaScript
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();