Threes.js入门篇之5 - 场景操纵器Trackball

最新推荐文章于 2025-10-14 12:50:05 发布

原创

最新推荐文章于 2025-10-14 12:50:05 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#WebGL #Three.js #Three.js入门 #操纵器 #Trackball

本文介绍Three.js中的TrackballControls，这是一种常用的场景操纵器，它将鼠标操作映射为对场景对象包围球的旋转。通过引用examples/js/controls/TrackballControls.js，开发者可以在WebGL项目中实现灵活的视角控制。示例代码展示了如何使用TrackballControls，为用户提供直观的交互体验。

Three.js 提供了很多操纵器，example下也给了一些操纵器（也叫控制器）的例子，引用 js 可以参考 examples/js/controls/TrackballControls.js 。

Trackball 是众多控制器中应用最多的样例之一，将场景对象封装到一个包围球，将鼠标操作映射为对包围球的旋转（拖拽）。

下图是 example下提供的例子：（对应代码 misc_controls_trackball.html）

只贴出来和控制器有关的部分代码：

    controls = new THREE.TrackballControls( camera );

    controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;

    controls.noZoom = false;
    controls.noPan = false;

    controls.staticMoving = true;
    controls.dynamicDampingFactor = 0.3;

    controls.keys = [ 65, 83, 68 ];
    controls.addEventListener( 'change', render );

// 对应函数