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

变更日志

发布