three.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;

// 初始化

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

// 动画

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

更新日志

发布版本