Three.js 相机设置和场景创建教程

Three.js 相机设置和场景创建

本教程将带你一步步学习如何使用 Three.js 创建相机和场景，并演示如何设置相机的初始位置、方向和控制方式。

创建相机

// 创建相机
camera = new THREE.PerspectiveCamera(80, 425 / 490, 0.1, 1e10);
camera.up.set(0, 1, 0);
controls = new THREE.OrbitControls(camera);

// 创建场景
scene = new THREE.Scene();

// 设置相机位置
camera.position.set(10, 10, 30);

// 设置场景位置和方向
scene.position = new THREE.Vector3(10, 10, 10);
scene.up = new THREE.Vector3(0, 0, 1);

取消中心点

// 取消中心点
scene.position.set(0, 0, 0);
scene.up.set(0, 1, 0);

解释：

• camera = new THREE.PerspectiveCamera(80, 425 / 490, 0.1, 1e10);：创建了一个透视相机，参数分别代表视角、宽高比、近裁剪平面距离、远裁剪平面距离。
• camera.up.set(0, 1, 0);：设置相机的向上方向为 Y 轴正方向。
• controls = new THREE.OrbitControls(camera);：创建轨道控制器，用于控制相机旋转和平移。
• scene = new THREE.Scene();：创建一个场景，所有物体都将添加到这个场景中。
• camera.position.set(10, 10, 30);：设置相机的位置。
• scene.position = new THREE.Vector3(10, 10, 10);：设置场景的位置。
• scene.up = new THREE.Vector3(0, 0, 1);：设置场景的向上方向。
• scene.position.set(0, 0, 0);：将场景的中心点设置为原点。
• scene.up.set(0, 1, 0);：将场景的向上方向设置为 Y 轴正方向。

总结

本教程演示了如何创建相机和场景，以及如何设置它们的位置和方向。这些是使用 Three.js 进行 3D 渲染的基础知识，希望本教程对你有所帮助！