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看到的内容

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值