Three.js 框架核心概念
1. 场景(Scene)
所有 3D 对象的容器，类似于舞台。所有的物体、光源、摄像机等都需要添加到场景中。
使用：
const scene = new THREE.Scene()
2. 物体(Object3D)
物体是 Scene 的基本元素，包括 几何体(Geometry)、光源(Light)、摄像机(Camera)、网格()等。
常见的类型:
- 摄像机(Camera)
- 光源(Light)
- 几何体(Geometry)
添加线
const material = new THREE.LineBasicMaterial({ color: 0x0000ff })
const points = []
points.push(new THREE.Vector3(-10, 0, 0))
points.push(new THREE.Vector3(0, 10, 0))
points.push(new THREE.Vector3(10, 0, 0))
const geometry = new THREE.BufferGeometry().setFromPoints(points)
const line = new THREE.Line(geometry, material)
scene.add(line)
3. 几何体(Geometry)
顾名思义，几何
常见的几何体：
BoxGeometry（立方体）SphereGeometry（球体）PlaneGeometry（平面）
4. 光源
为场景提供光照，影响物体的显示效果。
常见光源:
PointLight（点光源）DirectionalLight（方向光）AmbientLight（环境光）
5. 材质(material)
与物体结合使用，定义物体的外观，如颜色、纹理、反射等。
常见的材质：
MeshBasicMaterial简单着色MeshLambertMaterial（漫反射）MeshPhongMaterial（镜面反射）
6. 网格(Mesh)
网格是 几何体和材质 组合而成，是常见的可渲染对象。
使用：
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)
7. 相机(Camera)
定义了从哪个角度查看场景。
常见类型：
PerspectiveCamera（透视摄像机）OrthographicCamera（正交摄像机）
使用：
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
renderer.render(scene, camera)
8. 渲染器(renderer)
负责将场景以相机的所看的角度画面渲染到屏幕上。
使用：
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
透视相机
模拟人眼的观察视角：物体近大远小。
四个构造参数：
- fov: 以角度为单位，表示视觉角度的大小。一般设置为 45-75
- aspect: 宽高比，设置为画布宽高比
- near: 摄像机视锥体的近裁剪面距离。任何距离摄像机小于这个值的物体将不会被渲染。注意，
near必须大于0，不能为0或负数。 - far: 摄像机视锥体的远裁剪面距离。任何距离摄像机大于这个值的物体将不会被渲染。
far必须大于near。
constructor(fov?: number, aspect?: number, near?: number, far?: number);
Three.js 坐标系
Three.js 默认使用的是右手坐标系，这与这与OpenGL一致。在添加几何体（正方体、面）时，几何体的中心在原点。
- X轴：从左到右为正方向。
- Y轴：从下到上为正方向。
- Z轴：从屏幕内指向屏幕外为正方向（即朝向观察者）。
参考文章：
