一、Three.js 是什么
Three.js 是一款基于原生WebGL封装通用Web 3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影
二、Three.js 快速入门
基础三部曲： 场景Scene、相机Camera、渲染器Renderer，了解以上三个基础概念后，使用官方案例，就可以构建一个基础的 3D 界面了
三、场景 Scene
场景内可以放置物体、布置光源等，物体可以是各种形状的、各种颜色的，材质也可以不一样，光源可以是不同类型的、不同颜色的，也可以布置在不同的位置
场景可以现象成你要构建的 3D 画面的舞台，你在舞台上放置各种不同种类的道具（物体），布置不同的光源达到不同的效果
- 创建场景：使用THREE.Scene类可以创建一个3D场景，可以向场景中添加各种物体、光源和相机。
- 创建物体：使用THREE.Mesh类可以创建一个物体，可以通过指定几何体和材质来定义物体的外观。
- 几何体和材质：Three.js提供了许多内置的几何体和材质，如立方体、球体、平面等。可以使用这些几何体和材质，也可以自定义几何体和材质。
- 光源：Three.js支持不同类型的光源，如环境光、平行光、点光源等。可以通过设置光源的位置和颜色来影响场景中物体的光照效果。
四、相机 Camera
相机就想象成现实的相机，在不同的位置、角度进行拍摄、录制，舞台（场景）呈现在相机中的效果就会不一样
相机也有不同种类，现实中比如专门拍人物的、专门拍风景的，功能专长不同，threejs 中的相机也是如此，不同的相机作用和效果不一样，但本质上都是相机
在Three.js中，可以使用不同类型的相机来创建不同的视角。下面是创建不同类型相机的几种常见方法：
- 透视相机（PerspectiveCamera）：透视相机模拟了人眼的视觉效果，将物体看似透视到一个远离观察者的点。可以通过设置视场角（fov）、宽高比（aspect）、近裁剪面（near）和远裁剪面（far）来调整相机的视野范围。示例代码如下：
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
- 正交相机（OrthographicCamera）：正交相机将物体以平行的方式投影到屏幕上，不考虑物体到观察者的距离。可以通过设置left、right、top、bottom、近裁剪面（near）和远裁剪面（far）来调整相机的视野范围。示例代码如下：
var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
- 立方体相机（CubeCamera）：立方体相机是一种特殊的相机类型，可以同时渲染六个方向的立方体贴图。可以通过设置近裁剪面（near）和远裁剪面（far）来调整相机的视野范围。示例代码如下：
var camera = new THREE.CubeCamera(near, far, cubeResolution);
- 首人称相机（FirstPersonControls）：首人称相机模拟了人眼的视角，可以通过鼠标和键盘控制相机的移动和旋转。可以通过设置相机的位置、观察目标和旋转速度来调整相机的行为。示例代码如下：
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); var controls = new THREE.FirstPersonControls(camera);
五、渲染器 Render
在Three.js中，渲染器（Renderer）是用来将场景中的物体和光源渲染到浏览器的画布上的组件。它负责计算出3D场景中物体的位置、颜色和光照效果，并将最终结果显示在屏幕上
可以简单理解为相机的洗相片功能，在你布置好舞台（场景），并在满意的位置对舞台（相机）进行拍摄录像后，你想将其导出为文件等呈现在你的电脑上，完成这个过程的就是渲染器
创建渲染器的步骤如下：
-
导入Three.js库：
<script src="https://threejs.org/build/three.js"></script> -
创建一个画布：
<canvas id="canvas"></canvas> -
初始化渲染器：
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas') }); 这里使用了WebGLRenderer，它是Three.js中最常用的渲染器。如果浏览器不支持WebGL，还可以使用CanvasRenderer。
-
设置渲染器的大小：
renderer.setSize(width, height); 可以根据需要设置渲染器的宽度和高度，通常与画布的大小相同。
-
设置渲染器的背景色：
renderer.setClearColor(color, alpha); 可以设置渲染器的背景色，默认为黑色。
-
渲染场景：
renderer.render(scene, camera); 渲染器需要接收一个场景（Scene）和一个相机（Camera）来进行渲染。
通过以上步骤，你就可以成功创建一个Three.js渲染器并将场景渲染到画布上了。在Three.js中，渲染器（Renderer）是用来将场景中的物体和光源渲染到浏览器的画布上的组件。它负责计算出3D场景中物体的位置、颜色和光照效果，并将最终结果显示在屏幕上。
六、完整基础案例
HTML部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My first three.js app</title> <style> body { margin: 0;color: #3376f1; background-color: #bfe3dd; } </style> </head> <body> <script type="importmap"> { "imports": { "three": "../../node_modules/three/build/three.module.js", "three/addons/": "../../node_modules/three/examples/jsm/" } } </script> <script type="module" src="/index.js"></script> </body> </html>
index.js 部分:
import * as THREE from "three"; // 引入轨道控制器扩展库OrbitControls.js import { OrbitControls } from "three/addons/controls/OrbitControls.js"; // 创建一个场景 const scene = new THREE.Scene(); // 创建一个相机 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 ); // 创建一个渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建一个立方体 const geometry = new THREE.BoxGeometry(1, 1, 1); // 为立方体创建一个材质 const material = new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, //开启透明 opacity: 0.5, //设置透明度 }); // 创建一个网格 const cube = new THREE.Mesh(geometry, material); // 创建辅助坐标系 const axesHelper = new THREE.AxesHelper(150); scene.add(axesHelper); scene.add(cube); camera.position.z = 5; camera.position.x = 5; cube.position.set(10, 0, 0); // 设置相机控件轨道控制器OrbitControls const controls = new OrbitControls(camera, renderer.domElement); // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景 controls.addEventListener("change", function () { renderer.render(scene, camera); //执行渲染操作 }); function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.005; cube.rotation.y += 0.005; renderer.render(scene, camera); } animate();
说明：
代码中的辅助坐标系以及相机轨道控制器只是辅助作用，具体概念可以去官网了解或上手修改感受
