Three.js - TrackballControls 轨迹球控件

最新推荐文章于 2024-08-09 14:40:48 发布

「已注销」

最新推荐文章于 2024-08-09 14:40:48 发布

阅读量1.6w

点赞数 6

分类专栏： threejs

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

版权

本文介绍了Three.js中常用的TrackballControls控件，用于轻松地通过鼠标操作场景。内容包括控件的库文件引入、实例创建、构造函数、属性设置以及如何在渲染循环中更新控件。同时提供了示例代码和操作方式。

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

THREE.TrackballControls()轨迹球控件，最常用的控件，可以使用鼠标轻松的移动、平移，缩放场景。

示例

https://ithanmang.gitee.io/threejs/home/201809/20180903/01-TrackballControls.html

1、加入库文件

加入正确的js文件
这里写图片描述

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

2、创建实例

然后,创建控件并绑定到相机上

/* 轨迹球控件 */
controls = new THREE.TrackballControls(camera, renderer.domElement);

这里需要两个参数camere和render.domELement，第二个参数可选，但是默认为当前文档的document，如果你只想控制某个画布，可以添加画布的domLement元素。

2.1、构造函数

THREE.TrackballControls = function ( object, domElement )

this.object = object;
this.domElement = ( domElement !== undefined ) ? domElement : document;

2.2、设置属性

/* 属性参数 */
controls.rotateSpeed = 0.2;// 旋转速度
controls.zoomSpeed = 0.2;// 缩放速度
controls.panSpeed = 0.1;// 平controls


controls.staticMoving = false;// 静止移动，为 true 则没有惯性
controls.dynamicDampingFactor = 0.2;// 阻尼系数 越小 则滑动越大

controls.minDistance = 50; // 最小视角
controls.maxDistance = 350;// 最大视角 Infinity 无穷大

这是一些常需要设置的属性，也可以直接默认。

2.3、更新 controls

需要在循环函数中不断的更新 controls

/* 数据更新 */
 function update() {
   

     stats.update();
     controls.update();

 }

4、操作方式

操控	动作
按住左键，拖动	场景旋转，翻滚
滚轮、中键	缩放
右键	平移

5、示例代码

示例中用到了一个处理颜色的js库文件，可以去https://github.com/gka/chroma.js 下载，官方文档http://gka.github.io/chroma.js/#color-rgba 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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&#