threejs TransformControls.js API

最新推荐文章于 2025-07-04 20:01:15 发布

原创最新推荐文章于 2025-07-04 20:01:15 发布 · 9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#threejs #editor #web3d

代码技术专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个基于 Three.js 的实用插件 TransformControls.js，该插件允许用户通过鼠标直观地控制三维场景中的物体进行移动、旋转和缩放操作。文章详细说明了如何加载插件、实例化控件并将其添加到场景中，为开发者提供了快速上手的教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

three js 封装的对物体进行移动、缩放、旋转的库

property

object
 - [object] default undefined 
 - 控制的对象

visible
 - [boolean] true of false,default false  
 - 是否启用控制

translationSnap
----------

rotationSnap
----------

space
----------

size
----------

axis
----------

method

dispose()
----------
解绑所有事件

attach()
----------

detach()
----------

setMode(mode)
 - mode[scale/rotate/translate][string]
 - 设置场景编辑模式

setTranslationSnap()
----------

setRotationSnap()
----------

setSize()
----------

setSpace()
----------

update()
----------

使用方法：

1.引入库文件

<script src = 'somepath/three.js'></script>
<script src = 'somepath/transformControl.js'></script>

2.实例化

...
var camera = ...
var secen = ...
var renderer = ...
...

var transformControls = new THREE.TransformControls(camera, renderer.domElement);

scene.add(transformControls);

3.去创建一个cube试试吧

THREE常用实用插件介绍

TransformControls.js：鼠标操控物体移动、缩放、旋转的控件（物体操作工具）[单独引入]
EditorControls.js：鼠标操控场景视角（即场景Camera位置），模拟实现平移整个场景的控件（场景控制工具）[单独引入]
GridHelper：网格参考系空间（模拟地平面）[three源码已嵌入]
SpotLightHelper：显示聚光灯锥形的帮助工具（即用可视线条标识锥形范围，直观明了）[three源码已嵌入]
stats.js：three性能检测工具类[单独引入]
dat.gui.js：用于创建菜单栏，提供场景中的各个参数编辑功能（调试场景利器）[单独引入]