【导语】：Three.js是一个易于上手的轻量级 Javascript API 库，次要用于数据可视化、VR 演示等 3D 的图形展现。它在 GitHub 取得了6.5 万 Star。

简介

Three.js能够创立各种 3D 图形，点、线、文字、几何体、平面文字等，并能够设置光影特效、纹理特效、动画特效等。定位形式采纳右手坐标系定位。默认应用WebGL渲染器，同时还提供了Canvas 2D、SVG和CSS3D渲染器。当浏览器过于老旧或因为其余起因不反对WebGL形式时，应用其余渲染形式进行渲染。

Three.js 官网有丰盛的应用范例。

（截图来自 three.js 官网）

下载安装

Three.js的源码地址是：

https://github.com/mrdoob/thr...

可应用以下办法装置：

(1) npm装置在以后我的项目文件夹中关上终端窗口：

npm install --save three

下载安装胜利后，在我的项目中导入

// 形式 1: 导入整个 three.js外围库  import * as THREE from 'three';  const scene = new THREE.Scene();    // 形式 2: 仅导入你所须要的局部  import { Scene } from 'three';  const scene = new Scene();

(2) CDN引入

将 three.js 文件上传到你本人的服务器，或应用第三方CDN。如下所示：

<script type="module">    //因为 three.js 依赖于ES module，因而任何援用它的script标签必须应用*type="module"*。    import * as THREE from 'https://unpkg.com/three@0.123.0/build/three.module.js';      const scene = new THREE.Scene();  </script>

概念理解

Three.js 中次要有以下几个重要概念：

  • scene(场景)：即一个三维平面空间。
  • camera(相机)：即一个观察点，能够确定察看方向、角度等。
  • renderer(渲染器)：将相机察看到的场景渲染到浏览器中。
  • Objects(物体)：即渲染到场景中的各种物体，包含Mesh(网格)、Line(线)、Points(点)等。

简略应用

通过以下几步咱们创立一个绿色正方体旋转的 3D 场景：

(1) 创立蕴含立方体的新场景

//默认背景色为彩色，可通过background属性批改  const scene = new THREE.Scene();  //创立立方体  const geometry = new THREE.BoxGeometry();  //设置材质属性的色彩为绿色  const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );  //创立Mesh（网格），网格蕴含一个几何体以及作用在此几何体上的材质  const cube = new THREE.Mesh( geometry, material );  //立方体将会增加到(0,0,0)坐标  scene.add( cube );

(2) 创立相机

//应用PerspectiveCamera（透视摄像机）  //第一个参数是视线角度（FOV）。示意你所能在显示器上看到的场景的范畴，它的值是角度单位。  //第二个参数是长宽比（aspect ratio）。  //第三个参数是近截面（near）。  //第四个参数是远截面（far）。    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );  //正方体在(0,0,0)坐标时，摄像机和立方体z坐标重合，无奈看到立方体，将摄像机沿z轴外移  camera.position.z = 5;

(3) 创立渲染器

//应用默认的WebGLRenderer进行渲染  const renderer = new THREE.WebGLRenderer();  //设置渲染器的宽高与屏幕宽高雷同  renderer.setSize( window.innerWidth, window.innerHeight );

(4) 将以后要渲染的场景增加到 DOM 元素中

document.body.appendChild( renderer.domElement );

(5) 增加动画循环

function animate() {    requestAnimationFrame( animate );    renderer.render( scene, camera );    //立方体旋转    cube.rotation.x += 0.01;    cube.rotation.y += 0.01;  }  animate();

最终成果如下图：

残缺源码如下：

<!DOCTYPE html>  <html>   <head>    <meta charset="utf-8">    <title>My first three.js app</title>    <style>     body { margin: 0; }    </style>   </head>   <body>    <script type="module">        import * as THREE from 'https://unpkg.com/three@0.123.0/build/three.module.js';          const scene = new THREE.Scene();        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );               const geometry = new THREE.BoxGeometry();        const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );        const cube = new THREE.Mesh( geometry, material );        scene.add( cube );        camera.position.z = 5;          const renderer = new THREE.WebGLRenderer();        renderer.setSize( window.innerWidth, window.innerHeight );          document.body.appendChild( renderer.domElement );                function animate() {          requestAnimationFrame( animate );          renderer.render( scene, camera );          cube.rotation.x += 0.01;      cube.rotation.y += 0.01;        }        animate();    </script>   </body>  </html>

Three.js 的简略介绍就到这里了，如果您须要具体理解，请参考官网文档：https://threejs.org/

开源前哨 日常分享热门、乏味和实用的开源我的项目。参加保护 10万+ Star 的开源技术资源库，包含：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。