【02】基于 Three.js 实现的交互式 3D 场景代码解析（webgl_instancing_raycast.html）

一、引言

在前端开发领域，Three.js 是一款强大的用于创建和展示 3D 图形及场景的 JavaScript 库。今天我们要来详细解析一段使用 Three.js 构建的代码，这段代码实现了一个具有交互功能的 3D 场景，下面就让我们逐步深入了解每一部分的功能及原理吧。官网示例https://github.com/mrdoob/three.js/blob/master/examples/webgl_instancing_raycast.html

二、模块导入部分

<script type="module">

import * as THREE from 'three';

import Stats from 'three/addons/libs/stats.module.js';

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

</script>

在代码开头，我们使用 import 语句导入了几个重要的模块。

• import * as THREE from 'three';：这行代码导入了整个 Three.js 库，后续我们将通过 THREE 这个命名空间来调用 Three.js 提供的各类 3D 相关的类和函数，比如创建相机、几何体、材质等。例如，我们之后会用 THREE.PerspectiveCamera 来创建透视相机。

• import Stats from 'three/addons/libs/stats.module.js';：Stats 模块用于统计渲染性能相关的数据，比如帧率等信息，方便我们在开发过程中监测场景渲染的效率情况，了解是否存在性能瓶颈。

• import { GUI } from 'three/addons/libs/lil-gui.module.min.js';：GUI 是图形用户界面相关的模块，通过它可以方便地在页面上创建交互式的控制面板，来调整场景中的一些参数，例如我们后面会用它来控制实例化网格（InstancedMesh）的数量等属性。

• import { OrbitControls } from 'three/addons/controls/OrbitControls.js';：OrbitControls 模块能为我们提供围绕 3D 场景中的物体进行旋转、缩放等交互操作的控制功能，使得用户可以方便地从不同角度查看场景中的内容。

三、全局变量声明部分

let camera, scene, renderer, controls, stats;

let mesh;

const amount = parseInt( window.location.search.slice( 1 ) ) || 10;

const count = Math.pow( amount, 3 );

const raycaster = new THREE.Raycaster();

const mouse = new THREE.Vector2( 1, 1 );

const color = new THREE.Color();

const white = new THREE.