0

three.js

JavaScript 3D库。（JavaScript 3D library.）

官方网站
Github 资源库
主要指标

Github星跟踪图

three.js

JavaScript 3D库

这个项目的目的是用默认的 WebGL 渲染器创建一个易用的、轻量级的 3D 库。在示例中，该库还提供了 Canvas 2D、SVG 和 CSS3D 渲染器。

范例 — 文档 — Wiki — 迁移 — 问题 — 论坛 — Slack — Discord

用法

这段代码创建了一个场景、一个摄像机和一个几何立方体，并将立方体添加到场景中。然后它为场景和摄像机创建一个WebGL渲染器，并将该视口添加到文档中。body元素。最后，它为摄像机在场景中创建立方体动画。

import * as THREE from 'js/three.module.js';
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;
    scene = new THREE.Scene();
    geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    material = new THREE.MeshNormalMaterial();
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
}
function animate() {
    requestAnimationFrame( animate );
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    renderer.render( scene, camera );
}

如果一切顺利，您应该会看到这个。

克隆此存储库

克隆存储库及其所有历史记录将导致大约 2GB 的下载量。 如果您不需要整个历史记录，则可以使用 depth 参数来显着减小下载大小。

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

变更记录

发布

主要指标

概览
名称与所有者mrdoob/three.js
主编程语言JavaScript
编程语言JavaScript (语言数: 5)
平台Linux, Mac, Web browsers, Windows
许可证MIT License
所有者活动
创建于2010-03-24 02:58:01
推送于2025-10-27 23:38:34
最后一次提交2025-09-03 19:45:27
发布数172
最新版本名称r180 (发布于 2025-09-03 19:47:06)
第一版名称r1 (发布于 )
用户参与
星数109.1k
关注者数2.5k
派生数36.1k
提交数46.1k
已启用问题?
问题数13277
打开的问题数455
拉请求数14667
打开的拉请求数149
关闭的拉请求数3813
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?

three.js

NPM package
Build Size
Build Status
Dependencies
Dev Dependencies
Language Grade

JavaScript 3D library

The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.

Examples —
Documentation —
Wiki —
Migrating —
Questions —
Forum —
Gitter —
Slack

Usage

This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.

import * as THREE from 'js/three.module.js';

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
	camera.position.z = 1;

	scene = new THREE.Scene();

	geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
	material = new THREE.MeshNormalMaterial();

	mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

}

function animate() {

	requestAnimationFrame( animate );

	mesh.rotation.x += 0.01;
	mesh.rotation.y += 0.02;

	renderer.render( scene, camera );

}

If everything went well you should see this.

Change log

Releases