相机属性 ·Camera Attributes· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么PerspectiveCamera各参数对画面的影响fov、near、far、zoom修改投影参数后必须调用updateProjectionMatrix()Layers 图层系统相机与物体分层可见/隐藏用lil-gui实时调参观察变化效果说明场景中有一张贴图平面默认图层 0和一个白色旋转立方体图层 1。右侧 GUI 可实时调节视角 fov、近/远裁剪面 near/far、zoom相机位置 x/y/zOrbitControls 拖动时同步变化切换图层— 控制相机是否「看见」图层 1 的立方体配合 GridHelper、AxesHelper 理解相机与物体的空间关系。核心概念PerspectiveCamera 构造new THREE.PerspectiveCamera(fov, aspect, near, far)| 参数 | 含义 | 调大后的效果 | |------|------|-------------| |fov| 垂直视野角度 | 广角透视感强边缘变形明显 | |aspect| 宽高比 画布宽/高 | 通常随 resize 更新否则画面拉伸 | |near| 近裁剪面 | 过小易 Z-fighting过大可能裁掉近处物体 | |far| 远裁剪面 | 过小远处消失过大降低深度缓冲精度 |camera.fov 75;camera.near 0.1; camera.far 1000; camera.updateProjectionMatrix(); // 必须否则矩阵不更新::: warning 改 fov / near / far / zoom / aspect 后不调用updateProjectionMatrix()画面不会变——这是新手最常踩的坑之一。 :::zoom 与 film 参数camera.zoom缩放因子1 视野变窄类似长焦1 变广filmGauge胶片宽度mm影响 fov 与 zoom 的换算一般保持默认filmOffset胶片水平偏移模拟移轴镜头效果建筑摄影常用本案例把以上参数都暴露到 GUI方便直观感受。Layers 图层系统Three.js 内置32 层0~31用于相机只渲染特定层上的物体Raycaster 只拾取特定层后处理 Pass 分层渲染// 立方体只在图层 1 box1.layers.set(1); // 等价于disable 所有层再 enable(1)// 相机默认只看图层 0 → 立方体初始不可见 camera.layers.enable(1); // 或 GUI「切换此图层的状态」渲染规则物体与相机至少共享一层才会被绘制。平面 mesh → layer 0默认 → 相机 layer 0 可见 ✅立方体 box1 → layer 1 only → 需 camera.layers 含 1 才可见应用场景UI 3D 标签层、小地图专用层、Bloom 只作用于 layer 1 的物体等。实现步骤创建 PerspectiveCamera OrbitControls rAF平面layer 0 立方体layers.set(1) 网格/坐标轴辅助GUI 绑定 camera 投影参数onChange → updateProjectionMatrixGUI 绑定camera.layers.toggle(1)切换立方体可见性camera.position用.listen()只读监听由 OrbitControls 驱动代码要点import * as THREE from threeimport { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { GUI } from three/addons/libs/lil-gui.module.min.jsconst box document.getElementById(box)const scene new THREE.Scene()const camera new THREE.PerspectiveCamera(50, box.clientWidth / box.clientHeight, 0.1, 1000)camera.position.set(0, 1, 4)const renderer new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })renderer.setSize(box.clientWidth, box.clientHeight)box.appendChild(renderer.domElement)const controls new OrbitControls(camera, renderer.domElement)controls.enableDamping trueconst geomerty new THREE.PlaneGeometry(1, 1)const map new THREE.TextureLoader().load(HOST files/author/flowers-10.jpg)const material new THREE.MeshBasicMaterial({ map, color: 0x737373, side: THREE.DoubleSide })const mesh new THREE.Mesh(geomerty, material)scene.add(mesh)const box1 new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0xffffff }))box1.position.set(1, 1, 0)box1.layers.set(1)scene.add(box1)animate()function animate() {requestAnimationFrame(animate)box1.rotation.y 0.01controls.update()renderer.render(scene, camera)}scene.add(new THREE.AxesHelper(10), new THREE.GridHelper(10, 10))const folder new GUI()const onChange () camera.updateProjectionMatrix()folder.add(camera.layers, mask).name(图层).onChange(onChange).listen()folder.add({ 切换此图层的状态: () camera.layers.toggle(1) }, 切换此图层的状态)folder.add(camera, fov).min(0).name(视角).onChange(onChange)folder.add(camera, near).min(0.001).name(近平面).onChange(onChange)folder.add(camera, far).min(0).name(远平面).onChange(onChange)folder.add(camera, zoom).min(0).name(缩放).onChange(onChange)folder.add(camera, filmOffset).name(胶片偏移).onChange(onChange)folder.add(camera, filmGauge).name(胶片尺寸).onChange(onChange)folder.add(camera.position, x).name(相机位置x).listen()folder.add(camera.position, y).name(相机位置y).listen()folder.add(camera.position, z).name(相机位置z).listen()folder.add({ fn: () folder.reset() }, fn).name(重置)完整源码GitHub小结透视相机 fov aspect near far定义视锥体改参必updateProjectionMatrixLayers让同一 Scene 内物体分组可见相机与物体都要设对 layer
