Skip to content

Commit fe0d640

Browse files
mrdoobmrdoob
authored
Merge pull request #17494 from Mugen87/dev38
Docs: Add TransformControls page.
2 parents 2ac4547 + c363dab commit fe0d640

File tree

4 files changed

+459
-13
lines changed

4 files changed

+459
-13
lines changed

‎docs/examples/en/controls/TransformControls.html‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<base href="../../../" />
6+
<script src="list.js"></script>
7+
<script src="page.js"></script>
8+
<link type="text/css" rel="stylesheet" href="page.css" />
9+
</head>
10+
<body>
11+
[page:Object3D] &rarr;
12+
13+
<h1>[name]</h1>
14+
15+
<p class="desc">
16+
This class can be used to transform objects in 3D space by adapting a similar interaction model of DCC tools like Blender.
17+
Unlike other controls, it is not intended to transform the scene's camera.
18+
</p>
19+
20+
<h2>Example</h2>
21+
22+
<p>[example:misc_controls_transform misc / controls / transform ]</p>
23+
24+
<h2>Constructor</h2>
25+
26+
<h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement] )</h3>
27+
<p>
28+
<p>
29+
[page:Camera camera]: The camera of the rendered scene.
30+
</p>
31+
<p>
32+
[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
33+
however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.
34+
</p>
35+
<p>
36+
Creates a new instance of [name].
37+
</p>
38+
</p>
39+
40+
<h2>Events</h2>
41+
42+
<h3>change</h3>
43+
<p>
44+
Fires if any type of change (object or property change) is performed. Property changes
45+
are separate events you can add event listeners to. The event type is "propertyname-changed".
46+
</p>
47+
48+
<h3>mouseDown</h3>
49+
<p>
50+
Fires if a pointer (mouse/touch) becomes active.
51+
</p>
52+
53+
<h3>mouseUp</h3>
54+
<p>
55+
Fires if a pointer (mouse/touch) is no longer active.
56+
</p>
57+
58+
<h3>objectChange</h3>
59+
<p>
60+
Fires if the controlled 3D object is changed.
61+
</p>
62+
63+
<h2>Properties</h2>
64+
65+
<p>See the base [page:Object3D] class for common properties.</p>
66+
67+
<h3>[property:String axis]</h3>
68+
<p>
69+
The current transformation axis.
70+
</p>
71+
72+
<h3>[property:Camera camera]</h3>
73+
<p>
74+
The camera of the rendered scene.
75+
</p>
76+
77+
<h3>[property:HTMLDOMElement domElement]</h3>
78+
<p>
79+
The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
80+
not set up new event listeners. Default is the whole document.
81+
</p>
82+
83+
<h3>[property:Boolean dragging]</h3>
84+
<p>
85+
Whether or not dragging is currently performed. Read-only property.
86+
</p>
87+
88+
<h3>[property:Boolean enabled]</h3>
89+
<p>
90+
Whether or not the controls are enabled.
91+
</p>
92+
93+
<h3>[property:String mode]</h3>
94+
<p>
95+
The current transformation mode. Possible values are "translate", "rotate" and "scale". Default is *translate*.
96+
</p>
97+
98+
<h3>[property:Object3D object]</h3>
99+
<p>
100+
The 3D object being controlled.
101+
</p>
102+
103+
<h3>[property:Number rotationSnap]</h3>
104+
<p>
105+
By default, 3D objects are continously rotated. If you set this property to a numeric value (radians), you can define in which
106+
steps the 3D object should be rotated. Deault is *null*.
107+
</p>
108+
109+
<h3>[property:Boolean showX]</h3>
110+
<p>
111+
Whether or not the x-axis helper should be visible. Default is *true*.
112+
</p>
113+
114+
<h3>[property:Boolean showY]</h3>
115+
<p>
116+
Whether or not the y-axis helper should be visible. Default is *true*.
117+
</p>
118+
119+
<h3>[property:Boolean showZ]</h3>
120+
<p>
121+
Whether or not the z-axis helper should be visible. Default is *true*.
122+
</p>
123+
124+
<h3>[property:Number size]</h3>
125+
<p>
126+
The size of the helper UI (axes/planes). Default is *1*.
127+
</p>
128+
129+
<h3>[property:String space]</h3>
130+
<p>
131+
Defines in which coordinate space transformations should be performed. Possible values are "world" and "local". Default is *world*.
132+
</p>
133+
134+
<h3>[property:Number translationSnap]</h3>
135+
<p>
136+
By default, 3D objects are continously translated. If you set this property to a numeric value (world units), you can define in which
137+
steps the 3D object should be translated. Deault is *null*.
138+
</p>
139+
140+
<h2>Methods</h2>
141+
142+
<p>See the base [page:Object3D] class for common methods.</p>
143+
144+
<h3>[method:TransformControls attach] ( [param:Object3D object] )</h3>
145+
<p>
146+
<p>
147+
[page:Object3D object]: The 3D object that should be transformed.
148+
</p>
149+
<p>
150+
Sets the 3D object that should be transformed and ensures the controls UI is visible.
151+
</p>
152+
</p>
153+
154+
<h3>[method:TransformControls detach] ()</h3>
155+
<p>
156+
Removes the current 3D object from the controls and makes the helper UI is invisible.
157+
</p>
158+
159+
<h3>[method:null dispose] ()</h3>
160+
<p>
161+
Should be called if the controls is no longer required.
162+
</p>
163+
164+
<h3>[method:String getMode] ()</h3>
165+
<p>
166+
Returns the transformation mode.
167+
</p>
168+
169+
<h3>[method:null setMode] ( [param:String mode] )</h3>
170+
<p>
171+
<p>
172+
[page:String mode]: The transformation mode.
173+
</p>
174+
<p>
175+
Sets the transformation mode.
176+
</p>
177+
</p>
178+
179+
<h3>[method:null setRotationSnap] ( [param:Number rotationSnap] )</h3>
180+
<p>
181+
<p>
182+
[page:Number rotationSnap]: The rotation snap.
183+
</p>
184+
<p>
185+
Sets the rotation snap.
186+
</p>
187+
</p>
188+
189+
<h3>[method:null setSize] ( [param:Number size] )</h3>
190+
<p>
191+
<p>
192+
[page:Number size]: The size of the helper UI.
193+
</p>
194+
<p>
195+
Sets the size of the helper UI.
196+
</p>
197+
</p>
198+
199+
<h3>[method:null setSpace] ( [param:String space] )</h3>
200+
<p>
201+
<p>
202+
[page:String space]: The coordinate space in which transformations are applied.
203+
</p>
204+
<p>
205+
Sets the coordinate space in which transformations are applied.
206+
</p>
207+
</p>
208+
209+
<h3>[method:null setTranslationSnap] ( [param:Number translationSnap] )</h3>
210+
<p>
211+
<p>
212+
[page:Number translationSnap]: The translation snap.
213+
</p>
214+
<p>
215+
Sets the translation snap.
216+
</p>
217+
</p>
218+
219+
<h2>Source</h2>
220+
221+
<p>
222+
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TransformControls.js examples/js/controls/TransformControls.js]
223+
</p>
224+
</body>
225+
</html>

0 commit comments

Comments
 (0)