Three.js是一个比较著名的3d引擎了，今天搭建了下它的开发环境。
官网地址如下：
https://threejs.org/
在官网左侧直接点击download，就会把所有的源码下载下来。为方便使用，直接解压，放到web工程的某个地方即可。
可以直接引用build下面的库文件。示例代码如下，注意改成你的实际位置
<script src="/static/threejs/build/three.js"></script>three拆成了很多模块，如果需要引入其他模块，则需要单独写。示例代码如下，注意script里面要加上module
<script type="module"> import * as THREE from '/static/threejs/build/three.module.js'; import { OrbitControls } from '/static/threejs/examples/jsm/controls/OrbitControls.js'; import { GLTFLoader } from '/static/threejs/examples/jsm/loaders/GLTFLoader.js'; import { RGBELoader } from '/static/threejs/examples/jsm/loaders/RGBELoader.js'; import { RoughnessMipmapper } from '/static/threejs/examples/jsm/utils/RoughnessMipmapper.js'; //写其他的逻辑代码 </script>跟其他的三维引擎差不多，three的渲染逻辑为：
（1）构建camera，即相机
（2）构建scene，即场景
（3）构建render，即渲染器
大致框架如下：
<script type="module"> import * as THREE from '/static/threejs/build/three.module.js'; import { GLTFLoader } from '/static/threejs/examples/jsm/loaders/GLTFLoader.js'; //场景 var scene = new THREE.Scene(); //相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); //渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); //循环渲染 function animate() { requestAnimationFrame( animate ); renderer.render(scene, camera); } animate(); </script>在上面框架的基础上，画一个立方体。以下为完整代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <script src="/static/threejs/build/three.js"></script> <script type="module"> import * as THREE from '/static/threejs/build/three.module.js'; import { GLTFLoader } from '/static/threejs/examples/jsm/loaders/GLTFLoader.js'; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var geometry = new THREE.BoxGeometry(); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; function animate() { requestAnimationFrame( animate ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); </script> </body> </html>打完收工。
