THREE.FlyControls()
飞行控件,和第一人称类似,但是操作不同,使用THREE.FlyControls
可以模拟飞行器操作杆,在场景中飞行的效果。
1、示例
https://ithanmang.gitee.io/threejs/home/201809/20180903/03-FlyControls.html
1.1、效果图
2、创建实例
2.1、引入js文件
<script src="../../libs/examples/js/controls/FlyControls.js"></script>
2.2、创建实例
/* 飞行控件 */
controls = new THREE.FlyControls(camera, renderer.domElement);
2.3、设置属性
controls.rollSpeed = Math.PI / 24; // 翻滚速度
controls.autoForward = true; //自动向前移动
controls.dragToLook = false;
controls.movementSpeed = 25; //移动速度
2.4、操控方法
操控 | 动作 |
---|---|
鼠标左右键 | 前进和后退 |
w、a、s、d | 前后左右移动 |
q、e | 切斜 |
r、f | 上下移动 |
3、示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="../../../three.png">
<title>TrackballControls 轨迹球控件</title>
<style>
body {
margin: 0;
overflow: hidden; /* 溢出隐藏 */
}
#loading {
position: fixed;
top: 50%;
left: 50%;
color: #FFFFFF;
font-size: 20px;
margin-top: -30px;
margin-left: -40px;
}
</style>
<script src="../../libs/build/three-r93.js"></script>
<script src="../../libs/examples/js/Detector.js"></script>
<script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
<script src="../../libs/examples/js/libs/stats.min.js"></script>
<script src="../../libs/examples/js/controls/FlyControls.js">