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看到的内容
相关推荐
患得患失94911 小时前
【ThreeJs】【性能优化】从渲染底层到业务逻辑的系统性提速方案
优化·threejs
接着奏乐接着舞。3 天前
3D地球可视化教程 - 第3篇:地球动画与相机控制
前端·vue.js·3d·threejs
gis分享者3 天前
学习threejs,实现粒子化交互文字
threejs·文字·shadermaterial·粒子化·icosahedron
患得患失94919 天前
【Threejs】【工具类】Raycaster实现 3D 交互(如鼠标拾取、碰撞检测)的核心工具
3d·交互·threejs·raycaster
gis分享者1 个月前
学习threejs,使用自定义GLSL 着色器,实现水面、粒子特效
threejs·着色器·glsl·粒子·shadermaterial·unrealbloompass·水面
陶甜也1 个月前
threeJS 实现开花的效果
前端·vue·blender·threejs
二川bro1 个月前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
哈哈地图1 个月前
three.js手机端的4种旋转方式
threejs·手机交互
咔咔一顿操作1 个月前
第五章 vue3 + Three.js 实现高级镜面反射效果案例解析
前端·javascript·vue.js·人工智能·信息可视化·threejs
咔咔一顿操作1 个月前
第六章 Vue3 + Three.js 实现高质量全景图查看器:从基础到优化
开发语言·javascript·人工智能·ecmascript·threejs