Three.js

一、概述

1. 是什么：
   • 一个基于JS的开源3D图形库
2. 能做什么：
   • 在浏览器中轻松创建、渲染和交互式展示3D图形
3. 可实现的功能：
   • 可创建和加载3D模型、渲染3D场景（视觉效果逼真）
   • 可实现相机和视角控制
   • 可产生逼真的光照和阴影效果、各种有趣的粒子效果
   • 有一个强大的动画库
4. Three.js里的组件：
   • 场景
     • 是什么：
       • 一个数据结构
       • 一个核心组件
     • 能做什么：
       • 组织和管理3D场景中的对象
       • 存放和组织其他组件
   • 渲染器
     • 能做什么：
       • 将3D场景中的模型、材质、光照等元素渲染到屏幕上
   • 相机
     • 能做什么：
       • 设置视角、投影类型（透视投影/正交投影）
       • 缩放和旋转场景
       • 切换镜头，来改变观察者的视角
       • 实现用户与场景的交互（用户控制鼠标和键盘实现）
   • 物体
     • 是什么：
       • 场景的基本组成单元
     • 有什么：
       • 几何体
       • 模型
     • 作用：
       • 呈现可视化的对象
       • 响应用户的交互（通过添加事件监听器或使用射线投射）
   • 光源
     • 是什么：
       • 用于模拟场景中的光照效果的组件
     • 作用：
       • 模拟不同类型的光照效果（有点光源、平行光源、聚光灯）
       • 生成阴影效果，场景会变得更逼真
       • 优化物体的表现和渲染性能
5. 功能：
   • 动画
     • 作用：
       • 实现物体的平移、旋转、缩放等动画效果

二、开发流程

1. 引入Three.js库（自己按照官网的方式下载库后，要按照正确路径引入，只写from 'three'不生效）
2. 创建场景和渲染器
3. 创建相机对象，定义观察场景的视角和投影方式
4. 创建物体
5. 添加光源
6. 渲染场景（调用渲染器的render()方法）
7. 添加交互和动画
8. 优化扩展（举例：添加阴影效果、优化性能、加载外部模型）
   我的实践：