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;

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

}

如果一切顺利，你应该能看到 this。

克隆此仓库

克隆包含所有历史的仓库会导致约 2 GB 的下载量。如果你不需要完整的历史记录，可以使用 depth 参数来显著减小下载大小。

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

变更日志

发布版本