场景、渲染器和摄像机
让我们来看看在 Three.js 中表示事物所需的三种最基本的东西：场景、渲染器和摄像机。
场景
Three.js 中最基本的 3D 图形元素是场景。场景是三维世界的容器，是放置我们想要表现的所有三维对象的地方。例如，想象一下电影场景。就像演员、道具、灯光和其他元素都放置在布景中一样，Three.js 中的场景也是放置所有 3D 对象的地方。
// 创建场景
const scene = new THREE.Scene()；场景图
场景使用树状场景图来管理对象。这样就可以通过父子关系来组织对象。
这里的每个节点都指向自己的本地空间。此外，子对象继承父对象的变换（位置、大小、旋转）。
// 创建父对象
const parent = new THREE.Object3D()；
scene.add(parent)；
// 创建子对象并将其添加到父对象中
const child = new THREE.Mesh(geometry, material)；
parent.add(child)；有了这些属性，复杂动画的计算和实现就相对容易了。下面是一个示例
-
分组。
// 用于在没有场景图的情况下单独管理每个对象
car.position.x += 10；
wheel1.position.x += 10；
wheel2.position.x += 10；
wheel3.position.x += 10；
wheel4.position.x += 10；
// 使用场景图时
carGroup.position.x += 10; // 所有子对象自动一起移动-
相对位置/旋转/大小
// 相对于父对象的位置
const door = new THREE.Mesh(doorGeometry, doorMaterial)；
door.position.set(1, 0, 0); // 相对于房子，将门向右定位
house.add(door)；
// 如果房屋移动，门将自动跟随移动
house.position.set(10, 0, 0)；
// 用于手臂摆动动画
// 如果不使用场景图，我们必须根据肩部位置计算每次摆动的时间
arm.position.x = shoulder.position.x + Math.sin(time) * armLength；
arm.position.y = shoulder.position.y + Math.cos(time) * armLength；
// 通过场景图，我们可以简单地旋转它
shoulder.add(arm)；
shoulder.rotation.z = Math.sin(time)；相机
在 Three.js 中，"相机 "是决定从哪个角度观看 3D 场景的元素。就像真实的相机一样，你可以调整它的位置、方向和视野，以创建你想看到的场景4。
透视相机（PerspectiveCamera）
透视相机（PerspectiveCamera）是一种具有透视功能的相机，就像真实的人眼或相机一样。 透视相机根据以下四种属性创建挫形体
.png&w=1920&q=75)
- FOV（视场角）
- 摄像头的视角，单位为度。
- Aspect Ratio（纵横比）
- 摄像机视口的纵横比。
- 通常使用浏览器窗口的宽高比。
- 也可设置为 4:3、16:9 等。
- 该属性非常重要，可防止屏幕看起来被压扁
- 近（最小距离）
- 摄像机能看到的最小距离
- 小于此距离的物体将不可见
- 远（最大距离）
- 摄像机能看到的最大距离
- 超过此距离的物体将不可见
渲染器
渲染器负责从场景和摄像机中获取信息，并将其转换为我们可以在屏幕上看到的图像。举例来说，可以把它想象成在电影制作过程中将拍摄的原始胶片冲洗和处理成观众可以实际看到的胶片的过程。
const canvas = document.getElementById('canvas') as HTMLCanvasElement
const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight); // 设置屏幕尺寸
document.body.appendChild(renderer.domElement); // 添加到 HTML 中
// 每帧创建一个新场景
function animate() {
requestAnimationFrame(animate)；
renderer.render(scene, camera)；
}
animate()；参考文献