Three.js 是一个强大的开源 JavaScript 库和 API，用于在网页浏览器中创建并展示 3D 图形和动画。

WebGL 是一个基于 OpenGL 的底层 JavaScript API，它可以直接调用 GPU 来高性能地渲染 2D 和 3D 图形。虽然现代浏览器原生支持 WebGL，但是直接使用原生 WebGL 非常复杂和繁琐，需要编写大量的、晦涩的底层代码（着色器、缓冲区等）。

Three.js 的诞生就是为了解决这个问题。它屏蔽了 WebGL 的复杂性，让开发者无需掌握复杂的图形学知识也能轻松构建 3D 应用。

Three.js 源代码托管在 GitHub，目前已经获得了 108K Stars：

https://github.com/mrdoob/three.js

核心概念

Three.js 包含几个核心构建模块：

场景（Scene）：相当于一个3D 世界或一个容器。所有你要渲染的物体（模型、灯光等）都需要添加到场景中，它定义了整个 3D 空间。
相机（Camera）：相当于观察者的视角。它决定了场景中哪些部分会被渲染到屏幕上。最常用的是透视相机（PerspectiveCamera），它能模拟人眼看到的“近大远小”的透视效果。
渲染器（Renderer）：相当于绘图引擎。它的任务是将场景和相机结合到一起，并将最终的 3D 画面绘制到网页的一个 Canvas 画布元素上。
网格（Mesh）：一个网格代表场景中的一个具体物体（如一个立方体、一个角色模型）。它由两部分组成：几何体（Geometry）：定义物体的形状（顶点、面、尺寸等）。例如 BoxGeometry（立方体）、SphereGeometry（球体）。材质（Material）：定义物体的外观（颜色、纹理、光泽度、透明度等）。例如 MeshBasicMaterial（基础材质）、MeshPhongMaterial（能产生高光的光泽材质）。
灯光（Light）：就像现实世界中的灯，用于照亮场景中的物体，产生明暗、阴影和颜色效果。常见的类型有环境光（AmbientLight）、平行光（DirectionalLight）、点光源（PointLight）等。

简单示例

以下示例基于 Three.js 创建一个不断旋转的 3D 盒子：

<!DOCTYPE html>
<html>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a rotating 3D box</title>

  <style>
    body {
	  margin: 0;
}
  </style>

  
</head>
<body>
  <script type="importmap">
	{
		"imports": {
			"three": "https://cdn.jsdelivr.net/npm/three/build/three.module.js"
		}
	}
</script>

  <script>
    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 );
    
    }
  </script>
</body>
</html>

生成的效果如下：

以上示例也可以通过浏览器在线查看：

https://jsfiddle.net/w43x5Lgh/

除此之外，官方还提供了大量的示例：

https://threejs.org/examples/

总结

Three.js 是一个让 Web 开发者能够以更简单、更高效的方式在浏览器中创建和展示 3D 内容的工具，适合产品 360° 展示，数据可视化，游戏开发，建筑与设计以及艺术和创意项目。

万普插件库

jQuery插件大全与特效教程

three.js:一个基于JavaScript实现的3D建模库

核心概念

简单示例

总结