threejs相机辅助对象cameraHelper

AllBlue2024-12-07 11:27

为指定相机创建一个辅助对象，显示这个相机的视锥。

想要在场景里面显示相机的视锥，需要创建两个相机。

举个例子，场景中有个相机A，想要显示相机A的视锥，那么需要一个相机B，把B放在A的后面，两个相机的方向相同，那么B就能看到A以及A看到的画面。此时CameraHelper作用在A上，但OrbitControls控制B，那么场景中看到的就是B看到的画面。

// 需要显示视锥的相机A
cameraA = new THREE.PerspectiveCamera(83, window.innerWidth / window.innerHeight, 0.1, 1000);
cameraA.position.set(0, 0, 5);
cameraA.lookAt(0, 0, 0);

// 相机辅助对象，显示相机A的视锥
cameraHelper = new THREE.CameraHelper(cameraA)
scene.add(cameraHelper)

// 渲染画面的相机B
cameraB = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000); // fov可以比cameraA大一些，看到的范围更广
cameraB.position.set(0, 0, 7);  // 位置在cameraA的后面 

// orbitControls控制cameraB
orbitControls = new OrbitControls(cameraB, renderer.domElement);
orbitControls.target.set(0, 0, 0); // 方向和cameraA保持一致


...
// 在每一帧渲染动画里面
orbitControls.update();
cameraHelper.update()
renderer.render(scene, cameraB); // 画面渲染的是相机B看到的内容