1
|
|
|
/** |
2
|
|
|
* @author arodic / https://github.com/arodic |
3
|
|
|
*/ |
4
|
|
|
/*jshint sub:true*/ |
5
|
|
|
|
6
|
|
|
( function () { |
7
|
|
|
|
8
|
|
|
'use strict'; |
9
|
|
|
|
10
|
|
|
|
11
|
|
|
var GizmoMaterial = function ( parameters ) { |
12
|
|
|
|
13
|
|
|
THREE.MeshBasicMaterial.call( this ); |
|
|
|
|
14
|
|
|
|
15
|
|
|
this.depthTest = false; |
16
|
|
|
this.depthWrite = false; |
17
|
|
|
this.side = THREE.FrontSide; |
18
|
|
|
this.transparent = true; |
19
|
|
|
|
20
|
|
|
this.setValues( parameters ); |
21
|
|
|
|
22
|
|
|
this.oldColor = this.color.clone(); |
23
|
|
|
this.oldOpacity = this.opacity; |
24
|
|
|
|
25
|
|
|
this.highlight = function( highlighted ) { |
26
|
|
|
|
27
|
|
|
if ( highlighted ) { |
28
|
|
|
|
29
|
|
|
this.color.setRGB( 1, 1, 0 ); |
30
|
|
|
this.opacity = 1; |
31
|
|
|
|
32
|
|
|
} else { |
33
|
|
|
|
34
|
|
|
this.color.copy( this.oldColor ); |
35
|
|
|
this.opacity = this.oldOpacity; |
36
|
|
|
|
37
|
|
|
} |
38
|
|
|
|
39
|
|
|
}; |
40
|
|
|
|
41
|
|
|
}; |
42
|
|
|
|
43
|
|
|
GizmoMaterial.prototype = Object.create( THREE.MeshBasicMaterial.prototype ); |
|
|
|
|
44
|
|
|
GizmoMaterial.prototype.constructor = GizmoMaterial; |
45
|
|
|
|
46
|
|
|
|
47
|
|
|
var GizmoLineMaterial = function ( parameters ) { |
48
|
|
|
|
49
|
|
|
THREE.LineBasicMaterial.call( this ); |
|
|
|
|
50
|
|
|
|
51
|
|
|
this.depthTest = false; |
52
|
|
|
this.depthWrite = false; |
53
|
|
|
this.transparent = true; |
54
|
|
|
this.linewidth = 1; |
55
|
|
|
|
56
|
|
|
this.setValues( parameters ); |
57
|
|
|
|
58
|
|
|
this.oldColor = this.color.clone(); |
59
|
|
|
this.oldOpacity = this.opacity; |
60
|
|
|
|
61
|
|
|
this.highlight = function( highlighted ) { |
62
|
|
|
|
63
|
|
|
if ( highlighted ) { |
64
|
|
|
|
65
|
|
|
this.color.setRGB( 1, 1, 0 ); |
66
|
|
|
this.opacity = 1; |
67
|
|
|
|
68
|
|
|
} else { |
69
|
|
|
|
70
|
|
|
this.color.copy( this.oldColor ); |
71
|
|
|
this.opacity = this.oldOpacity; |
72
|
|
|
|
73
|
|
|
} |
74
|
|
|
|
75
|
|
|
}; |
76
|
|
|
|
77
|
|
|
}; |
78
|
|
|
|
79
|
|
|
GizmoLineMaterial.prototype = Object.create( THREE.LineBasicMaterial.prototype ); |
|
|
|
|
80
|
|
|
GizmoLineMaterial.prototype.constructor = GizmoLineMaterial; |
81
|
|
|
|
82
|
|
|
|
83
|
|
|
var pickerMaterial = new GizmoMaterial( { visible: false, transparent: false } ); |
84
|
|
|
|
85
|
|
|
|
86
|
|
|
THREE.TransformGizmo = function () { |
87
|
|
|
|
88
|
|
|
var scope = this; |
|
|
|
|
89
|
|
|
|
90
|
|
|
this.init = function () { |
91
|
|
|
|
92
|
|
|
THREE.Object3D.call( this ); |
|
|
|
|
93
|
|
|
|
94
|
|
|
this.handles = new THREE.Object3D(); |
95
|
|
|
this.pickers = new THREE.Object3D(); |
96
|
|
|
this.planes = new THREE.Object3D(); |
97
|
|
|
|
98
|
|
|
this.add( this.handles ); |
99
|
|
|
this.add( this.pickers ); |
100
|
|
|
this.add( this.planes ); |
101
|
|
|
|
102
|
|
|
//// PLANES |
103
|
|
|
|
104
|
|
|
var planeGeometry = new THREE.PlaneBufferGeometry( 50, 50, 2, 2 ); |
105
|
|
|
var planeMaterial = new THREE.MeshBasicMaterial( { visible: false, side: THREE.DoubleSide } ); |
106
|
|
|
|
107
|
|
|
var planes = { |
108
|
|
|
"XY": new THREE.Mesh( planeGeometry, planeMaterial ), |
109
|
|
|
"YZ": new THREE.Mesh( planeGeometry, planeMaterial ), |
110
|
|
|
"XZ": new THREE.Mesh( planeGeometry, planeMaterial ), |
111
|
|
|
"XYZE": new THREE.Mesh( planeGeometry, planeMaterial ) |
112
|
|
|
}; |
113
|
|
|
|
114
|
|
|
this.activePlane = planes[ "XYZE" ]; |
115
|
|
|
|
116
|
|
|
planes[ "YZ" ].rotation.set( 0, Math.PI / 2, 0 ); |
117
|
|
|
planes[ "XZ" ].rotation.set( - Math.PI / 2, 0, 0 ); |
118
|
|
|
|
119
|
|
|
for ( var i in planes ) { |
|
|
|
|
120
|
|
|
|
121
|
|
|
planes[ i ].name = i; |
122
|
|
|
this.planes.add( planes[ i ] ); |
123
|
|
|
this.planes[ i ] = planes[ i ]; |
124
|
|
|
|
125
|
|
|
} |
126
|
|
|
|
127
|
|
|
//// HANDLES AND PICKERS |
128
|
|
|
|
129
|
|
|
var setupGizmos = function( gizmoMap, parent ) { |
130
|
|
|
|
131
|
|
|
for ( var name in gizmoMap ) { |
|
|
|
|
132
|
|
|
|
133
|
|
|
for ( i = gizmoMap[ name ].length; i --; ) { |
|
|
|
|
134
|
|
|
|
135
|
|
|
var object = gizmoMap[ name ][ i ][ 0 ]; |
136
|
|
|
var position = gizmoMap[ name ][ i ][ 1 ]; |
137
|
|
|
var rotation = gizmoMap[ name ][ i ][ 2 ]; |
138
|
|
|
|
139
|
|
|
object.name = name; |
140
|
|
|
|
141
|
|
|
if ( position ) object.position.set( position[ 0 ], position[ 1 ], position[ 2 ] ); |
|
|
|
|
142
|
|
|
if ( rotation ) object.rotation.set( rotation[ 0 ], rotation[ 1 ], rotation[ 2 ] ); |
|
|
|
|
143
|
|
|
|
144
|
|
|
parent.add( object ); |
145
|
|
|
|
146
|
|
|
} |
147
|
|
|
|
148
|
|
|
} |
149
|
|
|
|
150
|
|
|
}; |
151
|
|
|
|
152
|
|
|
setupGizmos( this.handleGizmos, this.handles ); |
153
|
|
|
setupGizmos( this.pickerGizmos, this.pickers ); |
154
|
|
|
|
155
|
|
|
// reset Transformations |
156
|
|
|
|
157
|
|
|
this.traverse( function ( child ) { |
158
|
|
|
|
159
|
|
|
if ( child instanceof THREE.Mesh ) { |
|
|
|
|
160
|
|
|
|
161
|
|
|
child.updateMatrix(); |
162
|
|
|
|
163
|
|
|
var tempGeometry = child.geometry.clone(); |
164
|
|
|
tempGeometry.applyMatrix( child.matrix ); |
165
|
|
|
child.geometry = tempGeometry; |
166
|
|
|
|
167
|
|
|
child.position.set( 0, 0, 0 ); |
168
|
|
|
child.rotation.set( 0, 0, 0 ); |
169
|
|
|
child.scale.set( 1, 1, 1 ); |
170
|
|
|
|
171
|
|
|
} |
172
|
|
|
|
173
|
|
|
} ); |
174
|
|
|
|
175
|
|
|
}; |
176
|
|
|
|
177
|
|
|
this.highlight = function ( axis ) { |
178
|
|
|
|
179
|
|
|
this.traverse( function( child ) { |
180
|
|
|
|
181
|
|
|
if ( child.material && child.material.highlight ) { |
182
|
|
|
|
183
|
|
|
if ( child.name === axis ) { |
184
|
|
|
|
185
|
|
|
child.material.highlight( true ); |
186
|
|
|
|
187
|
|
|
} else { |
188
|
|
|
|
189
|
|
|
child.material.highlight( false ); |
190
|
|
|
|
191
|
|
|
} |
192
|
|
|
|
193
|
|
|
} |
194
|
|
|
|
195
|
|
|
} ); |
196
|
|
|
|
197
|
|
|
}; |
198
|
|
|
|
199
|
|
|
}; |
200
|
|
|
|
201
|
|
|
THREE.TransformGizmo.prototype = Object.create( THREE.Object3D.prototype ); |
|
|
|
|
202
|
|
|
THREE.TransformGizmo.prototype.constructor = THREE.TransformGizmo; |
203
|
|
|
|
204
|
|
|
THREE.TransformGizmo.prototype.update = function ( rotation, eye ) { |
205
|
|
|
|
206
|
|
|
var vec1 = new THREE.Vector3( 0, 0, 0 ); |
|
|
|
|
207
|
|
|
var vec2 = new THREE.Vector3( 0, 1, 0 ); |
208
|
|
|
var lookAtMatrix = new THREE.Matrix4(); |
209
|
|
|
|
210
|
|
|
this.traverse( function( child ) { |
211
|
|
|
|
212
|
|
|
if ( child.name.search( "E" ) !== - 1 ) { |
213
|
|
|
|
214
|
|
|
child.quaternion.setFromRotationMatrix( lookAtMatrix.lookAt( eye, vec1, vec2 ) ); |
215
|
|
|
|
216
|
|
|
} else if ( child.name.search( "X" ) !== - 1 || child.name.search( "Y" ) !== - 1 || child.name.search( "Z" ) !== - 1 ) { |
217
|
|
|
|
218
|
|
|
child.quaternion.setFromEuler( rotation ); |
219
|
|
|
|
220
|
|
|
} |
221
|
|
|
|
222
|
|
|
} ); |
223
|
|
|
|
224
|
|
|
}; |
225
|
|
|
|
226
|
|
|
THREE.TransformGizmoTranslate = function () { |
|
|
|
|
227
|
|
|
|
228
|
|
|
THREE.TransformGizmo.call( this ); |
|
|
|
|
229
|
|
|
|
230
|
|
|
var arrowGeometry = new THREE.Geometry(); |
231
|
|
|
var mesh = new THREE.Mesh( new THREE.CylinderGeometry( 0, 0.05, 0.2, 12, 1, false ) ); |
232
|
|
|
mesh.position.y = 0.5; |
233
|
|
|
mesh.updateMatrix(); |
234
|
|
|
|
235
|
|
|
arrowGeometry.merge( mesh.geometry, mesh.matrix ); |
236
|
|
|
|
237
|
|
|
var lineXGeometry = new THREE.BufferGeometry(); |
238
|
|
|
lineXGeometry.addAttribute( 'position', new THREE.Float32Attribute( [ 0, 0, 0, 1, 0, 0 ], 3 ) ); |
239
|
|
|
|
240
|
|
|
var lineYGeometry = new THREE.BufferGeometry(); |
241
|
|
|
lineYGeometry.addAttribute( 'position', new THREE.Float32Attribute( [ 0, 0, 0, 0, 1, 0 ], 3 ) ); |
242
|
|
|
|
243
|
|
|
var lineZGeometry = new THREE.BufferGeometry(); |
244
|
|
|
lineZGeometry.addAttribute( 'position', new THREE.Float32Attribute( [ 0, 0, 0, 0, 0, 1 ], 3 ) ); |
245
|
|
|
|
246
|
|
|
this.handleGizmos = { |
247
|
|
|
|
248
|
|
|
X: [ |
249
|
|
|
[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0xff0000 } ) ), [ 0.5, 0, 0 ], [ 0, 0, - Math.PI / 2 ] ], |
250
|
|
|
[ new THREE.Line( lineXGeometry, new GizmoLineMaterial( { color: 0xff0000 } ) ) ] |
251
|
|
|
], |
252
|
|
|
|
253
|
|
|
Y: [ |
254
|
|
|
[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0x00ff00 } ) ), [ 0, 0.5, 0 ] ], |
255
|
|
|
[ new THREE.Line( lineYGeometry, new GizmoLineMaterial( { color: 0x00ff00 } ) ) ] |
256
|
|
|
], |
257
|
|
|
|
258
|
|
|
Z: [ |
259
|
|
|
[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0x0000ff } ) ), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ] ], |
260
|
|
|
[ new THREE.Line( lineZGeometry, new GizmoLineMaterial( { color: 0x0000ff } ) ) ] |
261
|
|
|
], |
262
|
|
|
|
263
|
|
|
XYZ: [ |
264
|
|
|
[ new THREE.Mesh( new THREE.OctahedronGeometry( 0.1, 0 ), new GizmoMaterial( { color: 0xffffff, opacity: 0.25 } ) ), [ 0, 0, 0 ], [ 0, 0, 0 ] ] |
265
|
|
|
], |
266
|
|
|
|
267
|
|
|
XY: [ |
268
|
|
|
[ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.29, 0.29 ), new GizmoMaterial( { color: 0xffff00, opacity: 0.25 } ) ), [ 0.15, 0.15, 0 ] ] |
269
|
|
|
], |
270
|
|
|
|
271
|
|
|
YZ: [ |
272
|
|
|
[ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.29, 0.29 ), new GizmoMaterial( { color: 0x00ffff, opacity: 0.25 } ) ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ] ] |
273
|
|
|
], |
274
|
|
|
|
275
|
|
|
XZ: [ |
276
|
|
|
[ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.29, 0.29 ), new GizmoMaterial( { color: 0xff00ff, opacity: 0.25 } ) ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ] ] |
277
|
|
|
] |
278
|
|
|
|
279
|
|
|
}; |
280
|
|
|
|
281
|
|
|
this.pickerGizmos = { |
282
|
|
|
|
283
|
|
|
X: [ |
284
|
|
|
[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), pickerMaterial ), [ 0.6, 0, 0 ], [ 0, 0, - Math.PI / 2 ] ] |
285
|
|
|
], |
286
|
|
|
|
287
|
|
|
Y: [ |
288
|
|
|
[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), pickerMaterial ), [ 0, 0.6, 0 ] ] |
289
|
|
|
], |
290
|
|
|
|
291
|
|
|
Z: [ |
292
|
|
|
[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), pickerMaterial ), [ 0, 0, 0.6 ], [ Math.PI / 2, 0, 0 ] ] |
293
|
|
|
], |
294
|
|
|
|
295
|
|
|
XYZ: [ |
296
|
|
|
[ new THREE.Mesh( new THREE.OctahedronGeometry( 0.2, 0 ), pickerMaterial ) ] |
297
|
|
|
], |
298
|
|
|
|
299
|
|
|
XY: [ |
300
|
|
|
[ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.4, 0.4 ), pickerMaterial ), [ 0.2, 0.2, 0 ] ] |
301
|
|
|
], |
302
|
|
|
|
303
|
|
|
YZ: [ |
304
|
|
|
[ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.4, 0.4 ), pickerMaterial ), [ 0, 0.2, 0.2 ], [ 0, Math.PI / 2, 0 ] ] |
305
|
|
|
], |
306
|
|
|
|
307
|
|
|
XZ: [ |
308
|
|
|
[ new THREE.Mesh( new THREE.PlaneBufferGeometry( 0.4, 0.4 ), pickerMaterial ), [ 0.2, 0, 0.2 ], [ - Math.PI / 2, 0, 0 ] ] |
309
|
|
|
] |
310
|
|
|
|
311
|
|
|
}; |
312
|
|
|
|
313
|
|
|
this.setActivePlane = function ( axis, eye ) { |
314
|
|
|
|
315
|
|
|
var tempMatrix = new THREE.Matrix4(); |
|
|
|
|
316
|
|
|
eye.applyMatrix4( tempMatrix.getInverse( tempMatrix.extractRotation( this.planes[ "XY" ].matrixWorld ) ) ); |
317
|
|
|
|
318
|
|
|
if ( axis === "X" ) { |
319
|
|
|
|
320
|
|
|
this.activePlane = this.planes[ "XY" ]; |
321
|
|
|
|
322
|
|
|
if ( Math.abs( eye.y ) > Math.abs( eye.z ) ) this.activePlane = this.planes[ "XZ" ]; |
|
|
|
|
323
|
|
|
|
324
|
|
|
} |
325
|
|
|
|
326
|
|
|
if ( axis === "Y" ) { |
327
|
|
|
|
328
|
|
|
this.activePlane = this.planes[ "XY" ]; |
329
|
|
|
|
330
|
|
|
if ( Math.abs( eye.x ) > Math.abs( eye.z ) ) this.activePlane = this.planes[ "YZ" ]; |
|
|
|
|
331
|
|
|
|
332
|
|
|
} |
333
|
|
|
|
334
|
|
|
if ( axis === "Z" ) { |
335
|
|
|
|
336
|
|
|
this.activePlane = this.planes[ "XZ" ]; |
337
|
|
|
|
338
|
|
|
if ( Math.abs( eye.x ) > Math.abs( eye.y ) ) this.activePlane = this.planes[ "YZ" ]; |
|
|
|
|
339
|
|
|
|
340
|
|
|
} |
341
|
|
|
|
342
|
|
|
if ( axis === "XYZ" ) this.activePlane = this.planes[ "XYZE" ]; |
|
|
|
|
343
|
|
|
|
344
|
|
|
if ( axis === "XY" ) this.activePlane = this.planes[ "XY" ]; |
|
|
|
|
345
|
|
|
|
346
|
|
|
if ( axis === "YZ" ) this.activePlane = this.planes[ "YZ" ]; |
|
|
|
|
347
|
|
|
|
348
|
|
|
if ( axis === "XZ" ) this.activePlane = this.planes[ "XZ" ]; |
|
|
|
|
349
|
|
|
|
350
|
|
|
}; |
351
|
|
|
|
352
|
|
|
this.init(); |
353
|
|
|
|
354
|
|
|
}; |
355
|
|
|
|
356
|
|
|
THREE.TransformGizmoTranslate.prototype = Object.create( THREE.TransformGizmo.prototype ); |
357
|
|
|
THREE.TransformGizmoTranslate.prototype.constructor = THREE.TransformGizmoTranslate; |
358
|
|
|
|
359
|
|
|
THREE.TransformGizmoRotate = function () { |
360
|
|
|
|
361
|
|
|
THREE.TransformGizmo.call( this ); |
|
|
|
|
362
|
|
|
|
363
|
|
|
var CircleGeometry = function ( radius, facing, arc ) { |
364
|
|
|
|
365
|
|
|
var geometry = new THREE.BufferGeometry(); |
|
|
|
|
366
|
|
|
var vertices = []; |
367
|
|
|
arc = arc ? arc : 1; |
368
|
|
|
|
369
|
|
|
for ( var i = 0; i <= 64 * arc; ++ i ) { |
370
|
|
|
|
371
|
|
|
if ( facing === 'x' ) vertices.push( 0, Math.cos( i / 32 * Math.PI ) * radius, Math.sin( i / 32 * Math.PI ) * radius ); |
|
|
|
|
372
|
|
|
if ( facing === 'y' ) vertices.push( Math.cos( i / 32 * Math.PI ) * radius, 0, Math.sin( i / 32 * Math.PI ) * radius ); |
|
|
|
|
373
|
|
|
if ( facing === 'z' ) vertices.push( Math.sin( i / 32 * Math.PI ) * radius, Math.cos( i / 32 * Math.PI ) * radius, 0 ); |
|
|
|
|
374
|
|
|
|
375
|
|
|
} |
376
|
|
|
|
377
|
|
|
geometry.addAttribute( 'position', new THREE.Float32Attribute( vertices, 3 ) ); |
378
|
|
|
return geometry; |
379
|
|
|
|
380
|
|
|
}; |
381
|
|
|
|
382
|
|
|
this.handleGizmos = { |
383
|
|
|
|
384
|
|
|
X: [ |
385
|
|
|
[ new THREE.Line( new CircleGeometry( 1, 'x', 0.5 ), new GizmoLineMaterial( { color: 0xff0000 } ) ) ] |
386
|
|
|
], |
387
|
|
|
|
388
|
|
|
Y: [ |
389
|
|
|
[ new THREE.Line( new CircleGeometry( 1, 'y', 0.5 ), new GizmoLineMaterial( { color: 0x00ff00 } ) ) ] |
390
|
|
|
], |
391
|
|
|
|
392
|
|
|
Z: [ |
393
|
|
|
[ new THREE.Line( new CircleGeometry( 1, 'z', 0.5 ), new GizmoLineMaterial( { color: 0x0000ff } ) ) ] |
394
|
|
|
], |
395
|
|
|
|
396
|
|
|
E: [ |
397
|
|
|
[ new THREE.Line( new CircleGeometry( 1.25, 'z', 1 ), new GizmoLineMaterial( { color: 0xcccc00 } ) ) ] |
398
|
|
|
], |
399
|
|
|
|
400
|
|
|
XYZE: [ |
401
|
|
|
[ new THREE.Line( new CircleGeometry( 1, 'z', 1 ), new GizmoLineMaterial( { color: 0x787878 } ) ) ] |
402
|
|
|
] |
403
|
|
|
|
404
|
|
|
}; |
405
|
|
|
|
406
|
|
|
this.pickerGizmos = { |
407
|
|
|
|
408
|
|
|
X: [ |
409
|
|
|
[ new THREE.Mesh( new THREE.TorusGeometry( 1, 0.12, 4, 12, Math.PI ), pickerMaterial ), [ 0, 0, 0 ], [ 0, - Math.PI / 2, - Math.PI / 2 ] ] |
410
|
|
|
], |
411
|
|
|
|
412
|
|
|
Y: [ |
413
|
|
|
[ new THREE.Mesh( new THREE.TorusGeometry( 1, 0.12, 4, 12, Math.PI ), pickerMaterial ), [ 0, 0, 0 ], [ Math.PI / 2, 0, 0 ] ] |
414
|
|
|
], |
415
|
|
|
|
416
|
|
|
Z: [ |
417
|
|
|
[ new THREE.Mesh( new THREE.TorusGeometry( 1, 0.12, 4, 12, Math.PI ), pickerMaterial ), [ 0, 0, 0 ], [ 0, 0, - Math.PI / 2 ] ] |
418
|
|
|
], |
419
|
|
|
|
420
|
|
|
E: [ |
421
|
|
|
[ new THREE.Mesh( new THREE.TorusGeometry( 1.25, 0.12, 2, 24 ), pickerMaterial ) ] |
422
|
|
|
], |
423
|
|
|
|
424
|
|
|
XYZE: [ |
425
|
|
|
[ new THREE.Mesh( new THREE.Geometry() ) ]// TODO |
426
|
|
|
] |
427
|
|
|
|
428
|
|
|
}; |
429
|
|
|
|
430
|
|
|
this.setActivePlane = function ( axis ) { |
431
|
|
|
|
432
|
|
|
if ( axis === "E" ) this.activePlane = this.planes[ "XYZE" ]; |
|
|
|
|
433
|
|
|
|
434
|
|
|
if ( axis === "X" ) this.activePlane = this.planes[ "YZ" ]; |
|
|
|
|
435
|
|
|
|
436
|
|
|
if ( axis === "Y" ) this.activePlane = this.planes[ "XZ" ]; |
|
|
|
|
437
|
|
|
|
438
|
|
|
if ( axis === "Z" ) this.activePlane = this.planes[ "XY" ]; |
|
|
|
|
439
|
|
|
|
440
|
|
|
}; |
441
|
|
|
|
442
|
|
|
this.update = function ( rotation, eye2 ) { |
443
|
|
|
|
444
|
|
|
THREE.TransformGizmo.prototype.update.apply( this, arguments ); |
|
|
|
|
445
|
|
|
|
446
|
|
|
var group = { |
|
|
|
|
447
|
|
|
|
448
|
|
|
handles: this[ "handles" ], |
449
|
|
|
pickers: this[ "pickers" ], |
450
|
|
|
|
451
|
|
|
}; |
452
|
|
|
|
453
|
|
|
var tempMatrix = new THREE.Matrix4(); |
454
|
|
|
var worldRotation = new THREE.Euler( 0, 0, 1 ); |
455
|
|
|
var tempQuaternion = new THREE.Quaternion(); |
456
|
|
|
var unitX = new THREE.Vector3( 1, 0, 0 ); |
457
|
|
|
var unitY = new THREE.Vector3( 0, 1, 0 ); |
458
|
|
|
var unitZ = new THREE.Vector3( 0, 0, 1 ); |
459
|
|
|
var quaternionX = new THREE.Quaternion(); |
460
|
|
|
var quaternionY = new THREE.Quaternion(); |
461
|
|
|
var quaternionZ = new THREE.Quaternion(); |
462
|
|
|
var eye = eye2.clone(); |
463
|
|
|
|
464
|
|
|
worldRotation.copy( this.planes[ "XY" ].rotation ); |
465
|
|
|
tempQuaternion.setFromEuler( worldRotation ); |
466
|
|
|
|
467
|
|
|
tempMatrix.makeRotationFromQuaternion( tempQuaternion ).getInverse( tempMatrix ); |
468
|
|
|
eye.applyMatrix4( tempMatrix ); |
469
|
|
|
|
470
|
|
|
this.traverse( function( child ) { |
471
|
|
|
|
472
|
|
|
tempQuaternion.setFromEuler( worldRotation ); |
473
|
|
|
|
474
|
|
|
if ( child.name === "X" ) { |
475
|
|
|
|
476
|
|
|
quaternionX.setFromAxisAngle( unitX, Math.atan2( - eye.y, eye.z ) ); |
477
|
|
|
tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX ); |
478
|
|
|
child.quaternion.copy( tempQuaternion ); |
479
|
|
|
|
480
|
|
|
} |
481
|
|
|
|
482
|
|
|
if ( child.name === "Y" ) { |
483
|
|
|
|
484
|
|
|
quaternionY.setFromAxisAngle( unitY, Math.atan2( eye.x, eye.z ) ); |
485
|
|
|
tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionY ); |
486
|
|
|
child.quaternion.copy( tempQuaternion ); |
487
|
|
|
|
488
|
|
|
} |
489
|
|
|
|
490
|
|
|
if ( child.name === "Z" ) { |
491
|
|
|
|
492
|
|
|
quaternionZ.setFromAxisAngle( unitZ, Math.atan2( eye.y, eye.x ) ); |
493
|
|
|
tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionZ ); |
494
|
|
|
child.quaternion.copy( tempQuaternion ); |
495
|
|
|
|
496
|
|
|
} |
497
|
|
|
|
498
|
|
|
} ); |
499
|
|
|
|
500
|
|
|
}; |
501
|
|
|
|
502
|
|
|
this.init(); |
503
|
|
|
|
504
|
|
|
}; |
505
|
|
|
|
506
|
|
|
THREE.TransformGizmoRotate.prototype = Object.create( THREE.TransformGizmo.prototype ); |
|
|
|
|
507
|
|
|
THREE.TransformGizmoRotate.prototype.constructor = THREE.TransformGizmoRotate; |
508
|
|
|
|
509
|
|
|
THREE.TransformGizmoScale = function () { |
510
|
|
|
|
511
|
|
|
THREE.TransformGizmo.call( this ); |
|
|
|
|
512
|
|
|
|
513
|
|
|
var arrowGeometry = new THREE.Geometry(); |
514
|
|
|
var mesh = new THREE.Mesh( new THREE.BoxGeometry( 0.125, 0.125, 0.125 ) ); |
515
|
|
|
mesh.position.y = 0.5; |
516
|
|
|
mesh.updateMatrix(); |
517
|
|
|
|
518
|
|
|
arrowGeometry.merge( mesh.geometry, mesh.matrix ); |
519
|
|
|
|
520
|
|
|
var lineXGeometry = new THREE.BufferGeometry(); |
521
|
|
|
lineXGeometry.addAttribute( 'position', new THREE.Float32Attribute( [ 0, 0, 0, 1, 0, 0 ], 3 ) ); |
522
|
|
|
|
523
|
|
|
var lineYGeometry = new THREE.BufferGeometry(); |
524
|
|
|
lineYGeometry.addAttribute( 'position', new THREE.Float32Attribute( [ 0, 0, 0, 0, 1, 0 ], 3 ) ); |
525
|
|
|
|
526
|
|
|
var lineZGeometry = new THREE.BufferGeometry(); |
527
|
|
|
lineZGeometry.addAttribute( 'position', new THREE.Float32Attribute( [ 0, 0, 0, 0, 0, 1 ], 3 ) ); |
528
|
|
|
|
529
|
|
|
this.handleGizmos = { |
530
|
|
|
|
531
|
|
|
X: [ |
532
|
|
|
[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0xff0000 } ) ), [ 0.5, 0, 0 ], [ 0, 0, - Math.PI / 2 ] ], |
533
|
|
|
[ new THREE.Line( lineXGeometry, new GizmoLineMaterial( { color: 0xff0000 } ) ) ] |
534
|
|
|
], |
535
|
|
|
|
536
|
|
|
Y: [ |
537
|
|
|
[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0x00ff00 } ) ), [ 0, 0.5, 0 ] ], |
538
|
|
|
[ new THREE.Line( lineYGeometry, new GizmoLineMaterial( { color: 0x00ff00 } ) ) ] |
539
|
|
|
], |
540
|
|
|
|
541
|
|
|
Z: [ |
542
|
|
|
[ new THREE.Mesh( arrowGeometry, new GizmoMaterial( { color: 0x0000ff } ) ), [ 0, 0, 0.5 ], [ Math.PI / 2, 0, 0 ] ], |
543
|
|
|
[ new THREE.Line( lineZGeometry, new GizmoLineMaterial( { color: 0x0000ff } ) ) ] |
544
|
|
|
], |
545
|
|
|
|
546
|
|
|
XYZ: [ |
547
|
|
|
[ new THREE.Mesh( new THREE.BoxGeometry( 0.125, 0.125, 0.125 ), new GizmoMaterial( { color: 0xffffff, opacity: 0.25 } ) ) ] |
548
|
|
|
] |
549
|
|
|
|
550
|
|
|
}; |
551
|
|
|
|
552
|
|
|
this.pickerGizmos = { |
553
|
|
|
|
554
|
|
|
X: [ |
555
|
|
|
[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), pickerMaterial ), [ 0.6, 0, 0 ], [ 0, 0, - Math.PI / 2 ] ] |
556
|
|
|
], |
557
|
|
|
|
558
|
|
|
Y: [ |
559
|
|
|
[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), pickerMaterial ), [ 0, 0.6, 0 ] ] |
560
|
|
|
], |
561
|
|
|
|
562
|
|
|
Z: [ |
563
|
|
|
[ new THREE.Mesh( new THREE.CylinderGeometry( 0.2, 0, 1, 4, 1, false ), pickerMaterial ), [ 0, 0, 0.6 ], [ Math.PI / 2, 0, 0 ] ] |
564
|
|
|
], |
565
|
|
|
|
566
|
|
|
XYZ: [ |
567
|
|
|
[ new THREE.Mesh( new THREE.BoxGeometry( 0.4, 0.4, 0.4 ), pickerMaterial ) ] |
568
|
|
|
] |
569
|
|
|
|
570
|
|
|
}; |
571
|
|
|
|
572
|
|
|
this.setActivePlane = function ( axis, eye ) { |
573
|
|
|
|
574
|
|
|
var tempMatrix = new THREE.Matrix4(); |
|
|
|
|
575
|
|
|
eye.applyMatrix4( tempMatrix.getInverse( tempMatrix.extractRotation( this.planes[ "XY" ].matrixWorld ) ) ); |
576
|
|
|
|
577
|
|
|
if ( axis === "X" ) { |
578
|
|
|
|
579
|
|
|
this.activePlane = this.planes[ "XY" ]; |
580
|
|
|
if ( Math.abs( eye.y ) > Math.abs( eye.z ) ) this.activePlane = this.planes[ "XZ" ]; |
|
|
|
|
581
|
|
|
|
582
|
|
|
} |
583
|
|
|
|
584
|
|
|
if ( axis === "Y" ) { |
585
|
|
|
|
586
|
|
|
this.activePlane = this.planes[ "XY" ]; |
587
|
|
|
if ( Math.abs( eye.x ) > Math.abs( eye.z ) ) this.activePlane = this.planes[ "YZ" ]; |
|
|
|
|
588
|
|
|
|
589
|
|
|
} |
590
|
|
|
|
591
|
|
|
if ( axis === "Z" ) { |
592
|
|
|
|
593
|
|
|
this.activePlane = this.planes[ "XZ" ]; |
594
|
|
|
if ( Math.abs( eye.x ) > Math.abs( eye.y ) ) this.activePlane = this.planes[ "YZ" ]; |
|
|
|
|
595
|
|
|
|
596
|
|
|
} |
597
|
|
|
|
598
|
|
|
if ( axis === "XYZ" ) this.activePlane = this.planes[ "XYZE" ]; |
|
|
|
|
599
|
|
|
|
600
|
|
|
}; |
601
|
|
|
|
602
|
|
|
this.init(); |
603
|
|
|
|
604
|
|
|
}; |
605
|
|
|
|
606
|
|
|
THREE.TransformGizmoScale.prototype = Object.create( THREE.TransformGizmo.prototype ); |
607
|
|
|
THREE.TransformGizmoScale.prototype.constructor = THREE.TransformGizmoScale; |
608
|
|
|
|
609
|
|
|
THREE.TransformControls = function ( camera, domElement ) { |
610
|
|
|
|
611
|
|
|
// TODO: Make non-uniform scale and rotate play nice in hierarchies |
612
|
|
|
// TODO: ADD RXYZ contol |
613
|
|
|
|
614
|
|
|
THREE.Object3D.call( this ); |
|
|
|
|
615
|
|
|
|
616
|
|
|
domElement = ( domElement !== undefined ) ? domElement : document; |
617
|
|
|
|
618
|
|
|
this.object = undefined; |
619
|
|
|
this.visible = false; |
620
|
|
|
this.translationSnap = null; |
621
|
|
|
this.rotationSnap = null; |
622
|
|
|
this.space = "world"; |
623
|
|
|
this.size = 1; |
624
|
|
|
this.axis = null; |
625
|
|
|
|
626
|
|
|
var scope = this; |
627
|
|
|
|
628
|
|
|
var _mode = "translate"; |
629
|
|
|
var _dragging = false; |
630
|
|
|
var _plane = "XY"; |
|
|
|
|
631
|
|
|
var _gizmo = { |
632
|
|
|
|
633
|
|
|
"translate": new THREE.TransformGizmoTranslate(), |
634
|
|
|
"rotate": new THREE.TransformGizmoRotate(), |
635
|
|
|
"scale": new THREE.TransformGizmoScale() |
636
|
|
|
}; |
637
|
|
|
|
638
|
|
|
for ( var type in _gizmo ) { |
|
|
|
|
639
|
|
|
|
640
|
|
|
var gizmoObj = _gizmo[ type ]; |
641
|
|
|
|
642
|
|
|
gizmoObj.visible = ( type === _mode ); |
643
|
|
|
this.add( gizmoObj ); |
644
|
|
|
|
645
|
|
|
} |
646
|
|
|
|
647
|
|
|
var changeEvent = { type: "change" }; |
648
|
|
|
var mouseDownEvent = { type: "mouseDown" }; |
649
|
|
|
var mouseUpEvent = { type: "mouseUp", mode: _mode }; |
650
|
|
|
var objectChangeEvent = { type: "objectChange" }; |
651
|
|
|
|
652
|
|
|
var ray = new THREE.Raycaster(); |
653
|
|
|
var pointerVector = new THREE.Vector2(); |
654
|
|
|
|
655
|
|
|
var point = new THREE.Vector3(); |
656
|
|
|
var offset = new THREE.Vector3(); |
657
|
|
|
|
658
|
|
|
var rotation = new THREE.Vector3(); |
659
|
|
|
var offsetRotation = new THREE.Vector3(); |
660
|
|
|
var scale = 1; |
661
|
|
|
|
662
|
|
|
var lookAtMatrix = new THREE.Matrix4(); |
663
|
|
|
var eye = new THREE.Vector3(); |
664
|
|
|
|
665
|
|
|
var tempMatrix = new THREE.Matrix4(); |
666
|
|
|
var tempVector = new THREE.Vector3(); |
667
|
|
|
var tempQuaternion = new THREE.Quaternion(); |
668
|
|
|
var unitX = new THREE.Vector3( 1, 0, 0 ); |
669
|
|
|
var unitY = new THREE.Vector3( 0, 1, 0 ); |
670
|
|
|
var unitZ = new THREE.Vector3( 0, 0, 1 ); |
671
|
|
|
|
672
|
|
|
var quaternionXYZ = new THREE.Quaternion(); |
673
|
|
|
var quaternionX = new THREE.Quaternion(); |
674
|
|
|
var quaternionY = new THREE.Quaternion(); |
675
|
|
|
var quaternionZ = new THREE.Quaternion(); |
676
|
|
|
var quaternionE = new THREE.Quaternion(); |
677
|
|
|
|
678
|
|
|
var oldPosition = new THREE.Vector3(); |
679
|
|
|
var oldScale = new THREE.Vector3(); |
680
|
|
|
var oldRotationMatrix = new THREE.Matrix4(); |
681
|
|
|
|
682
|
|
|
var parentRotationMatrix = new THREE.Matrix4(); |
683
|
|
|
var parentScale = new THREE.Vector3(); |
684
|
|
|
|
685
|
|
|
var worldPosition = new THREE.Vector3(); |
686
|
|
|
var worldRotation = new THREE.Euler(); |
687
|
|
|
var worldRotationMatrix = new THREE.Matrix4(); |
688
|
|
|
var camPosition = new THREE.Vector3(); |
689
|
|
|
var camRotation = new THREE.Euler(); |
690
|
|
|
|
691
|
|
|
domElement.addEventListener( "mousedown", onPointerDown, false ); |
692
|
|
|
domElement.addEventListener( "touchstart", onPointerDown, false ); |
693
|
|
|
|
694
|
|
|
domElement.addEventListener( "mousemove", onPointerHover, false ); |
695
|
|
|
domElement.addEventListener( "touchmove", onPointerHover, false ); |
696
|
|
|
|
697
|
|
|
domElement.addEventListener( "mousemove", onPointerMove, false ); |
698
|
|
|
domElement.addEventListener( "touchmove", onPointerMove, false ); |
699
|
|
|
|
700
|
|
|
domElement.addEventListener( "mouseup", onPointerUp, false ); |
701
|
|
|
domElement.addEventListener( "mouseout", onPointerUp, false ); |
702
|
|
|
domElement.addEventListener( "touchend", onPointerUp, false ); |
703
|
|
|
domElement.addEventListener( "touchcancel", onPointerUp, false ); |
704
|
|
|
domElement.addEventListener( "touchleave", onPointerUp, false ); |
705
|
|
|
|
706
|
|
|
this.dispose = function () { |
707
|
|
|
|
708
|
|
|
domElement.removeEventListener( "mousedown", onPointerDown ); |
709
|
|
|
domElement.removeEventListener( "touchstart", onPointerDown ); |
710
|
|
|
|
711
|
|
|
domElement.removeEventListener( "mousemove", onPointerHover ); |
712
|
|
|
domElement.removeEventListener( "touchmove", onPointerHover ); |
713
|
|
|
|
714
|
|
|
domElement.removeEventListener( "mousemove", onPointerMove ); |
715
|
|
|
domElement.removeEventListener( "touchmove", onPointerMove ); |
716
|
|
|
|
717
|
|
|
domElement.removeEventListener( "mouseup", onPointerUp ); |
718
|
|
|
domElement.removeEventListener( "mouseout", onPointerUp ); |
719
|
|
|
domElement.removeEventListener( "touchend", onPointerUp ); |
720
|
|
|
domElement.removeEventListener( "touchcancel", onPointerUp ); |
721
|
|
|
domElement.removeEventListener( "touchleave", onPointerUp ); |
722
|
|
|
|
723
|
|
|
}; |
724
|
|
|
|
725
|
|
|
this.attach = function ( object ) { |
726
|
|
|
|
727
|
|
|
this.object = object; |
728
|
|
|
this.visible = true; |
729
|
|
|
this.update(); |
730
|
|
|
|
731
|
|
|
}; |
732
|
|
|
|
733
|
|
|
this.detach = function () { |
734
|
|
|
|
735
|
|
|
this.object = undefined; |
736
|
|
|
this.visible = false; |
737
|
|
|
this.axis = null; |
738
|
|
|
|
739
|
|
|
}; |
740
|
|
|
|
741
|
|
|
this.setMode = function ( mode ) { |
742
|
|
|
|
743
|
|
|
_mode = mode ? mode : _mode; |
744
|
|
|
|
745
|
|
|
if ( _mode === "scale" ) scope.space = "local"; |
|
|
|
|
746
|
|
|
|
747
|
|
|
for ( var type in _gizmo ) _gizmo[ type ].visible = ( type === _mode ); |
|
|
|
|
748
|
|
|
|
749
|
|
|
this.update(); |
750
|
|
|
scope.dispatchEvent( changeEvent ); |
751
|
|
|
|
752
|
|
|
}; |
753
|
|
|
|
754
|
|
|
this.setTranslationSnap = function ( translationSnap ) { |
755
|
|
|
|
756
|
|
|
scope.translationSnap = translationSnap; |
757
|
|
|
|
758
|
|
|
}; |
759
|
|
|
|
760
|
|
|
this.setRotationSnap = function ( rotationSnap ) { |
761
|
|
|
|
762
|
|
|
scope.rotationSnap = rotationSnap; |
763
|
|
|
|
764
|
|
|
}; |
765
|
|
|
|
766
|
|
|
this.setSize = function ( size ) { |
767
|
|
|
|
768
|
|
|
scope.size = size; |
769
|
|
|
this.update(); |
770
|
|
|
scope.dispatchEvent( changeEvent ); |
771
|
|
|
|
772
|
|
|
}; |
773
|
|
|
|
774
|
|
|
this.setSpace = function ( space ) { |
775
|
|
|
|
776
|
|
|
scope.space = space; |
777
|
|
|
this.update(); |
778
|
|
|
scope.dispatchEvent( changeEvent ); |
779
|
|
|
|
780
|
|
|
}; |
781
|
|
|
|
782
|
|
|
this.update = function () { |
783
|
|
|
|
784
|
|
|
if ( scope.object === undefined ) return; |
|
|
|
|
785
|
|
|
|
786
|
|
|
scope.object.updateMatrixWorld(); |
787
|
|
|
worldPosition.setFromMatrixPosition( scope.object.matrixWorld ); |
788
|
|
|
worldRotation.setFromRotationMatrix( tempMatrix.extractRotation( scope.object.matrixWorld ) ); |
789
|
|
|
|
790
|
|
|
camera.updateMatrixWorld(); |
791
|
|
|
camPosition.setFromMatrixPosition( camera.matrixWorld ); |
792
|
|
|
camRotation.setFromRotationMatrix( tempMatrix.extractRotation( camera.matrixWorld ) ); |
793
|
|
|
|
794
|
|
|
scale = worldPosition.distanceTo( camPosition ) / 6 * scope.size; |
795
|
|
|
this.position.copy( worldPosition ); |
796
|
|
|
this.scale.set( scale, scale, scale ); |
797
|
|
|
|
798
|
|
|
eye.copy( camPosition ).sub( worldPosition ).normalize(); |
799
|
|
|
|
800
|
|
|
if ( scope.space === "local" ) { |
801
|
|
|
|
802
|
|
|
_gizmo[ _mode ].update( worldRotation, eye ); |
803
|
|
|
|
804
|
|
|
} else if ( scope.space === "world" ) { |
805
|
|
|
|
806
|
|
|
_gizmo[ _mode ].update( new THREE.Euler(), eye ); |
|
|
|
|
807
|
|
|
|
808
|
|
|
} |
809
|
|
|
|
810
|
|
|
_gizmo[ _mode ].highlight( scope.axis ); |
811
|
|
|
|
812
|
|
|
}; |
813
|
|
|
|
814
|
|
|
function onPointerHover( event ) { |
815
|
|
|
|
816
|
|
|
if ( scope.object === undefined || _dragging === true || ( event.button !== undefined && event.button !== 0 ) ) return; |
|
|
|
|
817
|
|
|
|
818
|
|
|
var pointer = event.changedTouches ? event.changedTouches[ 0 ] : event; |
819
|
|
|
|
820
|
|
|
var intersect = intersectObjects( pointer, _gizmo[ _mode ].pickers.children ); |
821
|
|
|
|
822
|
|
|
var axis = null; |
823
|
|
|
|
824
|
|
|
if ( intersect ) { |
825
|
|
|
|
826
|
|
|
axis = intersect.object.name; |
827
|
|
|
|
828
|
|
|
event.preventDefault(); |
829
|
|
|
|
830
|
|
|
} |
831
|
|
|
|
832
|
|
|
if ( scope.axis !== axis ) { |
833
|
|
|
|
834
|
|
|
scope.axis = axis; |
835
|
|
|
scope.update(); |
836
|
|
|
scope.dispatchEvent( changeEvent ); |
837
|
|
|
|
838
|
|
|
} |
839
|
|
|
|
840
|
|
|
} |
841
|
|
|
|
842
|
|
|
function onPointerDown( event ) { |
843
|
|
|
|
844
|
|
|
if ( scope.object === undefined || _dragging === true || ( event.button !== undefined && event.button !== 0 ) ) return; |
|
|
|
|
845
|
|
|
|
846
|
|
|
var pointer = event.changedTouches ? event.changedTouches[ 0 ] : event; |
847
|
|
|
|
848
|
|
|
if ( pointer.button === 0 || pointer.button === undefined ) { |
849
|
|
|
|
850
|
|
|
var intersect = intersectObjects( pointer, _gizmo[ _mode ].pickers.children ); |
851
|
|
|
|
852
|
|
|
if ( intersect ) { |
853
|
|
|
|
854
|
|
|
event.preventDefault(); |
855
|
|
|
event.stopPropagation(); |
856
|
|
|
|
857
|
|
|
scope.dispatchEvent( mouseDownEvent ); |
858
|
|
|
|
859
|
|
|
scope.axis = intersect.object.name; |
860
|
|
|
|
861
|
|
|
scope.update(); |
862
|
|
|
|
863
|
|
|
eye.copy( camPosition ).sub( worldPosition ).normalize(); |
864
|
|
|
|
865
|
|
|
_gizmo[ _mode ].setActivePlane( scope.axis, eye ); |
866
|
|
|
|
867
|
|
|
var planeIntersect = intersectObjects( pointer, [ _gizmo[ _mode ].activePlane ] ); |
868
|
|
|
|
869
|
|
|
if ( planeIntersect ) { |
870
|
|
|
|
871
|
|
|
oldPosition.copy( scope.object.position ); |
872
|
|
|
oldScale.copy( scope.object.scale ); |
873
|
|
|
|
874
|
|
|
oldRotationMatrix.extractRotation( scope.object.matrix ); |
875
|
|
|
worldRotationMatrix.extractRotation( scope.object.matrixWorld ); |
876
|
|
|
|
877
|
|
|
parentRotationMatrix.extractRotation( scope.object.parent.matrixWorld ); |
878
|
|
|
parentScale.setFromMatrixScale( tempMatrix.getInverse( scope.object.parent.matrixWorld ) ); |
879
|
|
|
|
880
|
|
|
offset.copy( planeIntersect.point ); |
881
|
|
|
|
882
|
|
|
} |
883
|
|
|
|
884
|
|
|
} |
885
|
|
|
|
886
|
|
|
} |
887
|
|
|
|
888
|
|
|
_dragging = true; |
889
|
|
|
|
890
|
|
|
} |
891
|
|
|
|
892
|
|
|
function onPointerMove( event ) { |
893
|
|
|
|
894
|
|
|
if ( scope.object === undefined || scope.axis === null || _dragging === false || ( event.button !== undefined && event.button !== 0 ) ) return; |
|
|
|
|
895
|
|
|
|
896
|
|
|
var pointer = event.changedTouches ? event.changedTouches[ 0 ] : event; |
897
|
|
|
|
898
|
|
|
var planeIntersect = intersectObjects( pointer, [ _gizmo[ _mode ].activePlane ] ); |
899
|
|
|
|
900
|
|
|
if ( planeIntersect === false ) return; |
|
|
|
|
901
|
|
|
|
902
|
|
|
event.preventDefault(); |
903
|
|
|
event.stopPropagation(); |
904
|
|
|
|
905
|
|
|
point.copy( planeIntersect.point ); |
906
|
|
|
|
907
|
|
|
if ( _mode === "translate" ) { |
908
|
|
|
|
909
|
|
|
point.sub( offset ); |
910
|
|
|
point.multiply( parentScale ); |
911
|
|
|
|
912
|
|
|
if ( scope.space === "local" ) { |
913
|
|
|
|
914
|
|
|
point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) ); |
915
|
|
|
|
916
|
|
|
if ( scope.axis.search( "X" ) === - 1 ) point.x = 0; |
|
|
|
|
917
|
|
|
if ( scope.axis.search( "Y" ) === - 1 ) point.y = 0; |
|
|
|
|
918
|
|
|
if ( scope.axis.search( "Z" ) === - 1 ) point.z = 0; |
|
|
|
|
919
|
|
|
|
920
|
|
|
point.applyMatrix4( oldRotationMatrix ); |
921
|
|
|
|
922
|
|
|
scope.object.position.copy( oldPosition ); |
923
|
|
|
scope.object.position.add( point ); |
924
|
|
|
|
925
|
|
|
} |
926
|
|
|
|
927
|
|
|
if ( scope.space === "world" || scope.axis.search( "XYZ" ) !== - 1 ) { |
928
|
|
|
|
929
|
|
|
if ( scope.axis.search( "X" ) === - 1 ) point.x = 0; |
|
|
|
|
930
|
|
|
if ( scope.axis.search( "Y" ) === - 1 ) point.y = 0; |
|
|
|
|
931
|
|
|
if ( scope.axis.search( "Z" ) === - 1 ) point.z = 0; |
|
|
|
|
932
|
|
|
|
933
|
|
|
point.applyMatrix4( tempMatrix.getInverse( parentRotationMatrix ) ); |
934
|
|
|
|
935
|
|
|
scope.object.position.copy( oldPosition ); |
936
|
|
|
scope.object.position.add( point ); |
937
|
|
|
|
938
|
|
|
} |
939
|
|
|
|
940
|
|
|
if ( scope.translationSnap !== null ) { |
941
|
|
|
|
942
|
|
|
if ( scope.space === "local" ) { |
943
|
|
|
|
944
|
|
|
scope.object.position.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) ); |
945
|
|
|
|
946
|
|
|
} |
947
|
|
|
|
948
|
|
|
if ( scope.axis.search( "X" ) !== - 1 ) scope.object.position.x = Math.round( scope.object.position.x / scope.translationSnap ) * scope.translationSnap; |
|
|
|
|
949
|
|
|
if ( scope.axis.search( "Y" ) !== - 1 ) scope.object.position.y = Math.round( scope.object.position.y / scope.translationSnap ) * scope.translationSnap; |
|
|
|
|
950
|
|
|
if ( scope.axis.search( "Z" ) !== - 1 ) scope.object.position.z = Math.round( scope.object.position.z / scope.translationSnap ) * scope.translationSnap; |
|
|
|
|
951
|
|
|
|
952
|
|
|
if ( scope.space === "local" ) { |
953
|
|
|
|
954
|
|
|
scope.object.position.applyMatrix4( worldRotationMatrix ); |
955
|
|
|
|
956
|
|
|
} |
957
|
|
|
|
958
|
|
|
} |
959
|
|
|
|
960
|
|
|
} else if ( _mode === "scale" ) { |
961
|
|
|
|
962
|
|
|
point.sub( offset ); |
963
|
|
|
point.multiply( parentScale ); |
964
|
|
|
|
965
|
|
|
if ( scope.space === "local" ) { |
966
|
|
|
|
967
|
|
|
if ( scope.axis === "XYZ" ) { |
968
|
|
|
|
969
|
|
|
scale = 1 + ( ( point.y ) / 50 ); |
970
|
|
|
|
971
|
|
|
scope.object.scale.x = oldScale.x * scale; |
972
|
|
|
scope.object.scale.y = oldScale.y * scale; |
973
|
|
|
scope.object.scale.z = oldScale.z * scale; |
974
|
|
|
|
975
|
|
|
} else { |
976
|
|
|
|
977
|
|
|
point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) ); |
978
|
|
|
|
979
|
|
|
if ( scope.axis === "X" ) scope.object.scale.x = oldScale.x * ( 1 + point.x / 50 ); |
|
|
|
|
980
|
|
|
if ( scope.axis === "Y" ) scope.object.scale.y = oldScale.y * ( 1 + point.y / 50 ); |
|
|
|
|
981
|
|
|
if ( scope.axis === "Z" ) scope.object.scale.z = oldScale.z * ( 1 + point.z / 50 ); |
|
|
|
|
982
|
|
|
|
983
|
|
|
} |
984
|
|
|
|
985
|
|
|
} |
986
|
|
|
|
987
|
|
|
} else if ( _mode === "rotate" ) { |
988
|
|
|
|
989
|
|
|
point.sub( worldPosition ); |
990
|
|
|
point.multiply( parentScale ); |
991
|
|
|
tempVector.copy( offset ).sub( worldPosition ); |
992
|
|
|
tempVector.multiply( parentScale ); |
993
|
|
|
|
994
|
|
|
if ( scope.axis === "E" ) { |
995
|
|
|
|
996
|
|
|
point.applyMatrix4( tempMatrix.getInverse( lookAtMatrix ) ); |
997
|
|
|
tempVector.applyMatrix4( tempMatrix.getInverse( lookAtMatrix ) ); |
998
|
|
|
|
999
|
|
|
rotation.set( Math.atan2( point.z, point.y ), Math.atan2( point.x, point.z ), Math.atan2( point.y, point.x ) ); |
1000
|
|
|
offsetRotation.set( Math.atan2( tempVector.z, tempVector.y ), Math.atan2( tempVector.x, tempVector.z ), Math.atan2( tempVector.y, tempVector.x ) ); |
1001
|
|
|
|
1002
|
|
|
tempQuaternion.setFromRotationMatrix( tempMatrix.getInverse( parentRotationMatrix ) ); |
1003
|
|
|
|
1004
|
|
|
quaternionE.setFromAxisAngle( eye, rotation.z - offsetRotation.z ); |
1005
|
|
|
quaternionXYZ.setFromRotationMatrix( worldRotationMatrix ); |
1006
|
|
|
|
1007
|
|
|
tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionE ); |
1008
|
|
|
tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionXYZ ); |
1009
|
|
|
|
1010
|
|
|
scope.object.quaternion.copy( tempQuaternion ); |
1011
|
|
|
|
1012
|
|
|
} else if ( scope.axis === "XYZE" ) { |
1013
|
|
|
|
1014
|
|
|
quaternionE.setFromEuler( point.clone().cross( tempVector ).normalize() ); // rotation axis |
1015
|
|
|
|
1016
|
|
|
tempQuaternion.setFromRotationMatrix( tempMatrix.getInverse( parentRotationMatrix ) ); |
1017
|
|
|
quaternionX.setFromAxisAngle( quaternionE, - point.clone().angleTo( tempVector ) ); |
1018
|
|
|
quaternionXYZ.setFromRotationMatrix( worldRotationMatrix ); |
1019
|
|
|
|
1020
|
|
|
tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX ); |
1021
|
|
|
tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionXYZ ); |
1022
|
|
|
|
1023
|
|
|
scope.object.quaternion.copy( tempQuaternion ); |
1024
|
|
|
|
1025
|
|
|
} else if ( scope.space === "local" ) { |
1026
|
|
|
|
1027
|
|
|
point.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) ); |
1028
|
|
|
|
1029
|
|
|
tempVector.applyMatrix4( tempMatrix.getInverse( worldRotationMatrix ) ); |
1030
|
|
|
|
1031
|
|
|
rotation.set( Math.atan2( point.z, point.y ), Math.atan2( point.x, point.z ), Math.atan2( point.y, point.x ) ); |
1032
|
|
|
offsetRotation.set( Math.atan2( tempVector.z, tempVector.y ), Math.atan2( tempVector.x, tempVector.z ), Math.atan2( tempVector.y, tempVector.x ) ); |
1033
|
|
|
|
1034
|
|
|
quaternionXYZ.setFromRotationMatrix( oldRotationMatrix ); |
1035
|
|
|
|
1036
|
|
|
if ( scope.rotationSnap !== null ) { |
1037
|
|
|
|
1038
|
|
|
quaternionX.setFromAxisAngle( unitX, Math.round( ( rotation.x - offsetRotation.x ) / scope.rotationSnap ) * scope.rotationSnap ); |
1039
|
|
|
quaternionY.setFromAxisAngle( unitY, Math.round( ( rotation.y - offsetRotation.y ) / scope.rotationSnap ) * scope.rotationSnap ); |
1040
|
|
|
quaternionZ.setFromAxisAngle( unitZ, Math.round( ( rotation.z - offsetRotation.z ) / scope.rotationSnap ) * scope.rotationSnap ); |
1041
|
|
|
|
1042
|
|
|
} else { |
1043
|
|
|
|
1044
|
|
|
quaternionX.setFromAxisAngle( unitX, rotation.x - offsetRotation.x ); |
1045
|
|
|
quaternionY.setFromAxisAngle( unitY, rotation.y - offsetRotation.y ); |
1046
|
|
|
quaternionZ.setFromAxisAngle( unitZ, rotation.z - offsetRotation.z ); |
1047
|
|
|
|
1048
|
|
|
} |
1049
|
|
|
|
1050
|
|
|
if ( scope.axis === "X" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionX ); |
|
|
|
|
1051
|
|
|
if ( scope.axis === "Y" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionY ); |
|
|
|
|
1052
|
|
|
if ( scope.axis === "Z" ) quaternionXYZ.multiplyQuaternions( quaternionXYZ, quaternionZ ); |
|
|
|
|
1053
|
|
|
|
1054
|
|
|
scope.object.quaternion.copy( quaternionXYZ ); |
1055
|
|
|
|
1056
|
|
|
} else if ( scope.space === "world" ) { |
1057
|
|
|
|
1058
|
|
|
rotation.set( Math.atan2( point.z, point.y ), Math.atan2( point.x, point.z ), Math.atan2( point.y, point.x ) ); |
1059
|
|
|
offsetRotation.set( Math.atan2( tempVector.z, tempVector.y ), Math.atan2( tempVector.x, tempVector.z ), Math.atan2( tempVector.y, tempVector.x ) ); |
1060
|
|
|
|
1061
|
|
|
tempQuaternion.setFromRotationMatrix( tempMatrix.getInverse( parentRotationMatrix ) ); |
1062
|
|
|
|
1063
|
|
|
if ( scope.rotationSnap !== null ) { |
1064
|
|
|
|
1065
|
|
|
quaternionX.setFromAxisAngle( unitX, Math.round( ( rotation.x - offsetRotation.x ) / scope.rotationSnap ) * scope.rotationSnap ); |
1066
|
|
|
quaternionY.setFromAxisAngle( unitY, Math.round( ( rotation.y - offsetRotation.y ) / scope.rotationSnap ) * scope.rotationSnap ); |
1067
|
|
|
quaternionZ.setFromAxisAngle( unitZ, Math.round( ( rotation.z - offsetRotation.z ) / scope.rotationSnap ) * scope.rotationSnap ); |
1068
|
|
|
|
1069
|
|
|
} else { |
1070
|
|
|
|
1071
|
|
|
quaternionX.setFromAxisAngle( unitX, rotation.x - offsetRotation.x ); |
1072
|
|
|
quaternionY.setFromAxisAngle( unitY, rotation.y - offsetRotation.y ); |
1073
|
|
|
quaternionZ.setFromAxisAngle( unitZ, rotation.z - offsetRotation.z ); |
1074
|
|
|
|
1075
|
|
|
} |
1076
|
|
|
|
1077
|
|
|
quaternionXYZ.setFromRotationMatrix( worldRotationMatrix ); |
1078
|
|
|
|
1079
|
|
|
if ( scope.axis === "X" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionX ); |
|
|
|
|
1080
|
|
|
if ( scope.axis === "Y" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionY ); |
|
|
|
|
1081
|
|
|
if ( scope.axis === "Z" ) tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionZ ); |
|
|
|
|
1082
|
|
|
|
1083
|
|
|
tempQuaternion.multiplyQuaternions( tempQuaternion, quaternionXYZ ); |
1084
|
|
|
|
1085
|
|
|
scope.object.quaternion.copy( tempQuaternion ); |
1086
|
|
|
|
1087
|
|
|
} |
1088
|
|
|
|
1089
|
|
|
} |
1090
|
|
|
|
1091
|
|
|
scope.update(); |
1092
|
|
|
scope.dispatchEvent( changeEvent ); |
1093
|
|
|
scope.dispatchEvent( objectChangeEvent ); |
1094
|
|
|
|
1095
|
|
|
} |
1096
|
|
|
|
1097
|
|
|
function onPointerUp( event ) { |
1098
|
|
|
|
1099
|
|
|
if ( event.button !== undefined && event.button !== 0 ) return; |
|
|
|
|
1100
|
|
|
|
1101
|
|
|
if ( _dragging && ( scope.axis !== null ) ) { |
1102
|
|
|
|
1103
|
|
|
mouseUpEvent.mode = _mode; |
1104
|
|
|
scope.dispatchEvent( mouseUpEvent ) |
1105
|
|
|
|
1106
|
|
|
} |
1107
|
|
|
|
1108
|
|
|
_dragging = false; |
1109
|
|
|
onPointerHover( event ); |
1110
|
|
|
|
1111
|
|
|
} |
1112
|
|
|
|
1113
|
|
|
function intersectObjects( pointer, objects ) { |
1114
|
|
|
|
1115
|
|
|
var rect = domElement.getBoundingClientRect(); |
1116
|
|
|
var x = ( pointer.clientX - rect.left ) / rect.width; |
1117
|
|
|
var y = ( pointer.clientY - rect.top ) / rect.height; |
1118
|
|
|
|
1119
|
|
|
pointerVector.set( ( x * 2 ) - 1, - ( y * 2 ) + 1 ); |
1120
|
|
|
ray.setFromCamera( pointerVector, camera ); |
1121
|
|
|
|
1122
|
|
|
var intersections = ray.intersectObjects( objects, true ); |
1123
|
|
|
return intersections[ 0 ] ? intersections[ 0 ] : false; |
1124
|
|
|
|
1125
|
|
|
} |
1126
|
|
|
|
1127
|
|
|
}; |
1128
|
|
|
|
1129
|
|
|
THREE.TransformControls.prototype = Object.create( THREE.Object3D.prototype ); |
|
|
|
|
1130
|
|
|
THREE.TransformControls.prototype.constructor = THREE.TransformControls; |
1131
|
|
|
|
1132
|
|
|
}() ); |
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.