threejs相机辅助对象cameraHelper

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

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

举个例子,场景中有个相机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看到的内容
相关推荐
gis分享者1 天前
学习threejs,使用MeshBasicMaterial基本网格材质
threejs·basicmaterial·基本网格材质
gis分享者5 天前
学习threejs,使用PointLight点光源
threejs·点光源·pointlight
gis分享者10 天前
学习threejs,使用HemisphereLight半球光
threejs·hemispherelight·半球光
gis分享者14 天前
学习threejs,使用Lensflare模拟镜头眩光
threejs·lensflare·眩光
gis分享者16 天前
学习threejs,tga格式图片文件贴图
threejs·贴图·tga·tgaloader
gis分享者17 天前
学习threejs,pvr格式图片文件贴图
threejs·贴图·pvr
gis分享者1 个月前
学习threejs,使用OrbitControls相机控制器
threejs·相机·相机控制器·orbitcontrols
不系舟1781 个月前
threejs 实现镜面反射,只反射指定物体,背景透明
threejs
gis分享者1 个月前
学习threejs,使用RollControls相机控制器
threejs·相机控制器·rollcontrols
gis分享者1 个月前
学习threejs,使用FlyControls相机控制器
threejs·相机控制器·flycontrols