资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Threejs摄像机控件-创新互联

文章目录
  • 摄像机控件描述
  • 轨迹球控制器(TrackBallControls)
  • 飞行控制器(FlyControls)
  • 第一视角控制器(FirstPersonControls)
  • 轨道控制器(OrbitControls)

成都创新互联公司2013年开创至今,是专业互联网技术服务公司,拥有项目网站建设、成都网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元双牌做网站,已为上家服务,为双牌各地企业和个人服务,联系电话:13518219792摄像机控件描述
名称描述
第一视角控制器(FirstPersonControls)该控制器的行为类似第一视角射击游戏中的摄像机,使用键盘移动,使用鼠标移动
飞行控制器(FlyControls)飞行模拟控制器,用键盘和鼠标控制摄像机的移动
翻滚控制器(RollControls)该控制器是飞行控制器的简化版,允许绕着z轴旋转
轨迹球控制器(TrackBallControls)最常用的控制器,可以使用鼠标或者控制球来移动,平移和缩放场景。如果你使用的是OrtographicCamera,可以使用OrtographicTrack Ballcontrols,它是这个摄像机类型专用的
轨道控制器(OrbitControls)该控件可以在特定的场景中模拟轨道中的卫星,可以使用鼠标和键盘在场景中游走
轨迹球控制器(TrackBallControls)
  1. 使用TrackBallControls控制器时,现在HTML页面引入对应的JavaScript文件
  1. 创建控制器,并绑定到摄像机上
var trackballControls = new THREE.TrackballControls(camera);
trackballControls.rotateSpeed = 1.0;    //旋转速度,默认值1.0
trackballControls.zoomSpedd = 1.0;	//缩放速度,默认值1.2
trackballControls.panSpeed = 1.0;	//平移速度,默认值是0.3
  1. 摄像机的位置更新
var clock = new THREE.Clock();
function render(){var delta = clock.getDelta();   //调用clock.getDelta()方法可以精确的计算出此次调用距离上次调用的时间间隔
trackballControls.update(delta); 	 //更新控制器,常被用在动画循环中。
requestAnimationFrame(render);
webGLRender.render(scene,camera);
}
飞行控制器(FlyControls)
  1. 使用飞行控制器可以像飞行模拟器一样在场景中飞行
  2. 首先需要在HTML页面中加载对于的JavaScript文件
  3. 创建控制器并绑定到摄像机上
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
  1. 摄像机的位置更新
第一视角控制器(FirstPersonControls)
  1. 通过第一视角控制器可以像第一视角射击游戏那样控制摄像机。鼠标用于控制视角,键盘用于控制移动角色
  2. 同样先引入对应的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;
  1. 摄像机的位置更新
轨道控制器(OrbitControls)
  1. 轨道控制器可以用于控制场景中的对象围绕场景中心旋转和平移
// 在HTML中先引入对应的JavaScript文件

...
// 创建控制器并绑定摄像机
var orbitControls = new THREE.OrbitControls(camera);
// 设置摄像机属性
orbitControls.autoRotate = true;
...
// 摄像机的位置更新
var clock = new THREE.Clock();
function render(){orbitControls.update(clock.getDelta());
}

你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧


当前名称:Threejs摄像机控件-创新互联
标题来源:http://www.cdkjz.cn/article/cdcjoo.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220