three.js

三.js

JavaScript 3D 函式庫

該專案的目標是創建一個易於使用、輕量級、跨瀏覽器的通用 3D 庫。目前版本僅包含 WebGL 渲染器，但 WebGPU（實驗性）、SVG 和 CSS3D 渲染器也可作為插件使用。

範例 — 文件 — 手冊 — Wiki — 遷移 — 問題 — 論壇 — 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 ) ;

}

如果一切順利，你應該會看到這個。

克隆此儲存庫

克隆儲存庫及其所有歷史記錄會導致約 2 GB 的下載。如果您不需要整個歷史記錄，您可以使用depth參數來大幅減少下載大小。

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

變更日誌

發布