three.js

tiga.js

Perpustakaan 3D JavaScript

Tujuan dari proyek ini adalah untuk membuat perpustakaan 3D serba guna yang mudah digunakan, ringan, lintas-browser. Versi saat ini hanya menyertakan penyaji WebGL tetapi penyaji WebGPU (eksperimental), SVG, dan CSS3D juga tersedia sebagai tambahan.

Contoh — Dokumen — Manual — Wiki — Migrasi — Pertanyaan — Forum — Discord

Penggunaan

Kode ini membuat pemandangan, kamera, dan kubus geometris, dan menambahkan kubus ke pemandangan. Kemudian membuat perender WebGL untuk adegan dan kamera, dan menambahkan area pandang tersebut ke elemen document.body . Terakhir, ini menganimasikan kubus di dalam adegan untuk kamera.

 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 ) ;

}

Jika semuanya berjalan dengan baik, Anda akan melihat ini.

Mengkloning repositori ini

Mengkloning repo dengan semua riwayatnya menghasilkan unduhan ~2 GB. Jika Anda tidak memerlukan seluruh riwayat, Anda dapat menggunakan parameter depth untuk mengurangi ukuran unduhan secara signifikan.

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

Ubah catatan

Rilis