three.js

three.js

자바스크립트 3D 라이브러리

이 프로젝트의 목표는 사용하기 쉽고 가벼운 크로스 브라우저 범용 3D 라이브러리를 만드는 것입니다. 현재 빌드에는 WebGL 렌더러만 포함되어 있지만 WebGPU(실험용), SVG 및 CSS3D 렌더러도 애드온으로 사용할 수 있습니다.

예 — 문서 — 매뉴얼 — 위키 — 마이그레이션 — 질문 — 포럼 — Discord

용법

이 코드는 장면, 카메라 및 기하학적 큐브를 생성하고 해당 큐브를 장면에 추가합니다. 그런 다음 장면과 카메라에 대한 WebGL 렌더러를 생성하고 해당 뷰포트를 document.body 요소에 추가합니다. 마지막으로 카메라 장면 내의 큐브에 애니메이션을 적용합니다.

 import * as THREE from 'three' ;

const width = window . innerWidth , height = window . innerHeight ;

// init

const camera = new THREE . PerspectiveCamera ( 70 , width / height , 0.01 , 10 ) ;
camera . position . z = 1 ;

const scene = new THREE . Scene ( ) ;

const geometry = new THREE . BoxGeometry ( 0.2 , 0.2 , 0.2 ) ;
const material = new THREE . MeshNormalMaterial ( ) ;

const mesh = new THREE . Mesh ( geometry , material ) ;
scene . add ( mesh ) ;

const renderer = new THREE . WebGLRenderer ( { antialias : true } ) ;
renderer . setSize ( width , height ) ;
renderer . setAnimationLoop ( animate ) ;
document . body . appendChild ( renderer . domElement ) ;

// animation

function animate ( time ) {

	mesh . rotation . x = time / 2000 ;
	mesh . rotation . y = time / 1000 ;

	renderer . render ( scene , camera ) ;

}

모든 것이 잘 된다면 이것을 봐야 합니다.

이 저장소 복제 중

모든 기록이 포함된 저장소를 복제하면 최대 2GB의 다운로드가 발생합니다. 전체 기록이 필요하지 않은 경우 depth 매개변수를 사용하여 다운로드 크기를 크게 줄일 수 있습니다.

git clone --depth=1 https://github.com/mrdoob/three.js.git

변경 로그

릴리스