Three.js - FirstPersonControls 第一人称控件

最新推荐文章于 2024-08-26 09:08:24 发布

「已注销」

最新推荐文章于 2024-08-26 09:08:24 发布

阅读量9.3k

点赞数 2

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/82351844

版权

本文介绍了如何在Three.js中使用FirstPersonControls实现第一人称视角控制，包括示例链接、js文件引入、实例创建及属性设置，允许通过键盘操作相机进行漫游和视角追踪。

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

THREE.FirstPersonControls()，可以控制相机实现类似漫游、前后左右移动、视角追踪等效果，也可以使用键盘来控制移动。

1、示例

https://ithanmang.gitee.io/threejs/home/201809/20180903/02-FirstPersonControls.html
这里写图片描述

2、引入 js 文件

<script src="../../libs/examples/js/controls/FirstPersonControls.js"></script>

3、创建实例

 /* 第一人称控件 */
controls = new THREE.FirstPersonControls(camera);

3.1、设置属性

controls.enabled = true;
controls.lookSpeed = 0.02; //鼠标移动查看的速度
controls.movementSpeed = 10; //相机移动速度
controls.noFly = false;
controls.constrainVertical = true; //约束垂直
controls.verticalMin = 1.0;
controls.verticalMax = 2.0;
controls.lon = 0; //进入初始视角x轴的角度
controls.lat = 0; //初始视角进入后y轴的角度

上面是一些比较常用的属性，具体的可以查看FIrstPersonControls的构造函数。

3.2 、更新控件

let clock = new THREE.Clock();
/* 数据更新 */
function update() {
   

    stats.update();

    controls.update(clock.getDelta());

}

另外，如果窗口变动，需要更新控件的操控范围

controls.handleResize();

3.3、操控方法

操控	动作
移动鼠标	以指针为中心点移动视角
上下左右方向键（w，a，s，d）	前后左右移动
鼠标左键按下	向前移动
鼠标右键按下	向后移动
R	向上移动
F	向下移动

4、示例代码

<!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/FirstPersonControls.js"></script>
    <script src="../../libs/examples/js/controls/OrbitControls.js"></script>
    <