面试题10—。Three.js。

1、Three.js的基本结构是什么？

简答：

Three.js的基本架构包括场景（Scene）、相机（Camera）和渲染器（Renderer）。场景是所有3D对象的容器，相机定义了3D场景中的视角，渲染器将场景和相机中的3D对象渲染到屏幕上。

详细：

Three.js 是一个基于 WebGL 的 JavaScript 3D 库，它简化了使用 WebGL 创造复杂而高性能的 3D 图形的过程。Three.js 基本结构包括以下核心组件：

1. 场景 (Scene)。
   • 场景是所有物体的容器，所有物体、光源等都需要添加到场景中才能在渲染时显示出来。
2. 物体 (Objects)。
   • 物体可以是几何体(如立方体、球体)、粒子系统、网格等。这些物体需要添加到场景中。
3. 几何体 (Geometry)。
   • 将物体的形状定义为几何体。Three.js 提供多种内置几何体，如 BoxGeometry（立方体）、SphereGeometry(球体)等。
4. 材质 (Materials)。
   • 材料决定了物体表面的外观，如颜色、透明度、反射率等。Three.js 提供多种材料类型，如 MeshBasicMaterial、MeshLambertMaterial 和 MeshPhongMaterial 等。
5. 网格 (Mesh)。
   • 网格是由几何和材料组成的对象。一个网格是几何体应用一种或多种材料的结果。
6. 相机 (Camera)。
   • 相机定义了视图的角度，即从哪个角度看场景。Three.js 支持各种类型的相机，如透视相机（PerspectiveCamera）和平行投影相机（OrthographicCamera）。
7. 渲染器 (Renderer)。
   • 渲染器负责在屏幕上绘制场景中的内容。Three.js 可以使用 WebGL 渲染器利用硬件加速图形处理。
8. 光源 (Lights)。
   • 光源用于照亮场景中的物体。Three.js 支持多种光源类型，如点光源（PointLight）、方向光（DirectionalLight）等。
9. 动画 (Animation)。
   • 通过改变物体的位置、旋转、缩放等属性，可以实现动画。Three.js 还支持使用关键帧动画。
10. 加载器 (Loaders)。
    • 加载器用于加载模型文件、纹理图片等外部资源。Three.js 为处理不同格式的数据提供多种加载器。
11. 控制器 (Controls)。
    • 该控制器允许用户通过鼠标或键盘与场景互动。常见的控制器有轨道控制器（OrbitControls）等待，可用于绕物体旋转视角。

2、什么是WebGL？它与Three.js的关系是什么？

简答。：

WebGL是一种低级JavaScripttt，用于在浏览器中渲染2D和3D图形 API。Three.js是基于WebGL的高级库，简化了WebGL三维图形编程的复杂性。

详细。：

WebGL。它是一种基于网页浏览器上渲染高质量图形的技术规范 OpenGL ES（OpenGL for Embedded Systems），这是一个为嵌入式设备设计的图形库。WebGL 它直接集成到现代浏览器中，不需要任何插件就可以工作。WebGL 允许开发人员使用 JavaScript 编写代码来创建复杂的代码 3D 图形和 2D 同时使用图像 GPU(图形处理器)加速硬件，从而实现高效的图形渲染。

WebGL 与 Three.js 的关系。

Three.js。是一个基于 WebGL 的 JavaScript 库，其主要目的是让开发者更容易在网页上创建 3D 图形内容。虽然 WebGL 它提供了强大的底层 API 操作图形硬件，但比较复杂，初学者可能很难掌握。Three.js 通过提供一系列先进的抽象来简化这个过程，即使是没有深刻图形编程背景的开发者也可以快速开始，创造令人印象深刻的视觉效果。

主要区别：

• 抽象层次。：WebGL 是一个底层 API，并且提供了直接操作图形硬件的能力； Three.js 它是一个高级库，包装了很多 WebGL 复杂性提供了一个更友好、更容易使用的界面。

• 学习曲线。：由于 WebGL 学习的复杂性和细节 WebGL 需要更多的时间和精力；相比之下，Three.js 为文档、示例和工具提供了更多的帮助，使学习和使用更加容易。

• 功能范围。：虽然 WebGL 它本身就是一个非常强大的工具，但它只提供了一个绘图框架；Three.js 在此基础上，增加了物理模拟、动画支持、模型加载等诸多高级功能 WebGL 原生所没有的。

总结。

简而言之，WebGL 是 Three.js 基础技术，Three.js 构建在 WebGL 为开发人员创造和管理复杂性提供了更简单、更有效的方法 3D 场景。假如你想在网页上实现复杂的图形效果，但又不想深入学习底层的图形编程，Three.js 这将是一个很好的选择。

3、Three.js支持哪些类型的光照模型，它们各自的优缺点是什么？

简答：

Three.js支持以下类型的照明模型：

1. AmbientLight(环境光)。：适用于模拟来自天空或其他环境光源的漫反射光，提供均匀的环境光，不产生阴影。

2. DirectionalLight(平行光)。：模拟来自无限远处的平行光会产生清晰的阴影，通常用于模拟太阳或其他强光源。

3. PointLight(点光源)。：光线从一个点发射到所有方向，产生柔和的阴影，适用于模拟灯泡或其他小光源的光。

4. SpotLight（聚光灯࿰。