React+three.js之场景（Scene），相机（Camera）

爱滑雪的码农2026-05-10 8:13

场景THREE.Scene

场景=3d世界的大容器，所有的物体，灯光，模型，网格都要添加到场景里，可以设置背景色，背景贴图，雾化效果，层级

创建场景

javascript 复制代码

const scene = new THREE.Scene();

常用属性和方法

javascript 复制代码

//设置背景颜色
scene.background = new THREE.Color(0x050520); 

//设置背景图片
import bgImg from '@/assets/bg.jpg';
const texture = new THREE.TextureLoader().load(bgImg);
scene.background = texture;

//雾化效果
// 雾类型1：线性雾
scene.fog = new THREE.Fog(0x050520, 10, 50); 
// 参数：雾颜色、开始距离、结束距离

// 雾类型2：指数雾
scene.fog = new THREE.FogExp2(0x050520, 0.02);
// 参数：雾颜色、浓度

//添加物体到场景
scene.add(立方体 / 灯光 / 模型);

//移除物体
scene.remove(立方体);

//遍历所有子元素
scene.traverse((obj) => {
  console.log(obj.name, obj.type);
});

//清空场景
scene.clear();

相机（Camera）

透视相机（PerspectiveCamera）

构造参数含义

javascript 复制代码

const camera = new THREE.PerspectiveCamera(
  fov,       // 视角范围 视野角度
  aspect,    // 画布宽高比 width / height
  near,      // 近裁剪面 小于这个距离不渲染
  far        // 远裁剪面 大于这个距离不渲染
);

fov：视野角度 ，越大看得越广、物体越小；一般 45~75
aspect：画布宽 / 高，必须和渲染器画布比例一致，否则模型拉伸变形
near：最近能看到多近，一般 0.1
far：最远能看多远，大屏地图一般 1000 / 2000

相机位置position

javascript 复制代码

// x y z 三轴位置
camera.position.set(0, 0, 5);
// 等价
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 5;

相机看向某点lookAt

javascript 复制代码

// 看向坐标原点
camera.lookAt(0, 0, 0);
// 看向某个模型
camera.lookAt(立方体.position);

更新相机投影矩阵

javascript 复制代码

camera.updateProjectionMatrix();

正交相机OrthographicCamera

无近大远小。合适2d可视化，地图，二维大屏

javascript 复制代码

const camera = new THREE.OrthographicCamera(
  left,    // 左边界
  right,   // 右边界
  top,     // 上边界
  bottom,  // 下边界
  near,
  far
);