Threejs摄像机控件

最新推荐文章于 2024-07-07 11:52:20 发布

请往我的生活里加满快乐

最新推荐文章于 2024-07-07 11:52:20 发布

阅读量605

点赞数

分类专栏： three.js 文章标签： javascript 开发语言 ecmascript 3d 前端

本文链接：https://blog.csdn.net/Potatoyou/article/details/128194100

版权

three.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了四种不同的三维摄像机控制器：轨迹球控制器、飞行控制器、第一视角控制器和轨道控制器。每种控制器都有其独特的应用场景和控制方式，如轨迹球控制器适用于大多数场景的交互，而飞行控制器则模仿飞行模拟器的操作。

摘要由CSDN通过智能技术生成

摄像机控件描述

名称	描述
第一视角控制器（FirstPersonControls）	该控制器的行为类似第一视角射击游戏中的摄像机，使用键盘移动，使用鼠标移动
飞行控制器（FlyControls）	飞行模拟控制器，用键盘和鼠标控制摄像机的移动
翻滚控制器（RollControls）	该控制器是飞行控制器的简化版，允许绕着z轴旋转
轨迹球控制器（TrackBallControls）	最常用的控制器，可以使用鼠标或者控制球来移动，平移和缩放场景。如果你使用的是OrtographicCamera，可以使用OrtographicTrack Ballcontrols，它是这个摄像机类型专用的
轨道控制器（OrbitControls）	该控件可以在特定的场景中模拟轨道中的卫星，可以使用鼠标和键盘在场景中游走

轨迹球控制器（TrackBallControls）

使用TrackBallControls控制器时，现在HTML页面引入对应的JavaScript文件

<script type="text/javascript" src="../assets/libs/three/controls/TrackballControls.js"></script>

创建控制器，并绑定到摄像机上

var trackballControls = new THREE.TrackballControls(camera);
trackballControls.rotateSpeed = 1.0;    //旋转速度，默认值1.0
trackballControls.zoomSpedd = 1.0;	//缩放速度，默认值1.2
trackballControls.panSpeed = 1.0;	//平移速度，默认值是0.3

摄像机的位置更新

var clock = new THREE.Clock();
function render(){
var delta = clock.getDelta();   //调用clock.getDelta()方法可以精确的计算出此次调用距离上次调用的时间间隔
trackballControls.update(delta); 	 //更新控制器，常被用在动画循环中。
requestAnimationFrame(render);
webGLRender.render(scene,camera);
}

飞行控制器（FlyControls）

使用飞行控制器可以像飞行模拟器一样在场景中飞行
首先需要在HTML页面中加载对于的JavaScript文件
创建控制器并绑定到摄像机上

var flyControls = new THREE.FlyControls(camera);
flyControls.movementSpeed = 25;  //移动速度，默认为1。
flyControls.domElement = document.querySelector('#webgl-output'); 
//该 HTMLDOMElement 用于监听鼠标/触摸事件
flyControls.rollSpeed = Math.PI/24;  //旋转速度。默认为0.005
flyControls.autoForward = true;  //若该值设为true，初始变换后，摄像机将自动向前移动（且不会停止）默认为false
flyControls.dragToLook = false;  //若该值设为true，你将只能通过执行拖拽交互来环视四周。默认为false

摄像机的位置更新

第一视角控制器（FirstPersonControls）

通过第一视角控制器可以像第一视角射击游戏那样控制摄像机。鼠标用于控制视角，键盘用于控制移动角色
同样先引入对应的JavaScript文件，然后创建控制器并绑定摄像机

var fpControls = new THREE.FirstPersonControls(camera);
fpControls.lookSpeed = 0.4;
fpControls.movementSpeed = 20;
fpControls.lookVertical = true;
fpControls.constrainVertical = true;
fpControls.verticalMin = 1.0;
fpControls.verticalMax = 2.0;
fpControls.lon = -150;
fpControls.lat = 120;

摄像机的位置更新

轨道控制器（OrbitControls）

轨道控制器可以用于控制场景中的对象围绕场景中心旋转和平移

// 在HTML中先引入对应的JavaScript文件
<script type="text/javaScript" asrc="../assets/libs/three/controls/OrbitControls">
</script>
...
// 创建控制器并绑定摄像机
var orbitControls = new THREE.OrbitControls(camera);
// 设置摄像机属性
orbitControls.autoRotate = true;
...
// 摄像机的位置更新
var clock = new THREE.Clock();
function render(){
  orbitControls.update(clock.getDelta());
}