Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TransformControls: Derive from Controls. #29146

Merged
merged 5 commits into from
Sep 12, 2024
Merged

TransformControls: Derive from Controls. #29146

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ea42d01
TransformControls: Derive from `Controls`.
Mugen87 Aug 15, 2024
de2d95f
Docs: Clean up.
Mugen87 Aug 20, 2024
4128d04
TransformControls: Clean up.
Mugen87 Aug 20, 2024
5a27137
Docs: Clean up.
Mugen87 Aug 20, 2024
714376e
Docs: Clean up.
Mugen87 Aug 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 7 additions & 22 deletions docs/examples/en/controls/TransformControls.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Object3D] &rarr;
[page:Controls] &rarr;

<h1>[name]</h1>

Expand Down Expand Up @@ -41,7 +41,7 @@ <h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement] )</h3>
[page:Camera camera]: The camera of the rendered scene.
</p>
<p>
[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
[page:HTMLDOMElement domElement]: The HTML element used for event listeners. (optional)
</p>
<p>
Creates a new instance of [name].
Expand Down Expand Up @@ -73,34 +73,18 @@ <h3>objectChange</h3>

<h2>Properties</h2>

<p>See the base [page:Object3D] class for common properties.</p>
<p>See the base [page:Controls] class for common properties.</p>

<h3>[property:String axis]</h3>
<p>
The current transformation axis.
</p>

<h3>[property:Camera camera]</h3>
<p>
The camera of the rendered scene.
</p>

<h3>[property:HTMLDOMElement domElement]</h3>
<p>
The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
not set up new event listeners.
</p>

<h3>[property:Boolean dragging]</h3>
<p>
Whether or not dragging is currently performed. Read-only property.
</p>

<h3>[property:Boolean enabled]</h3>
<p>
Whether or not the controls are enabled.
</p>

<h3>[property:String mode]</h3>
<p>
The current transformation mode. Possible values are "translate", "rotate" and "scale". Default is `translate`.
Expand Down Expand Up @@ -150,7 +134,7 @@ <h3>[property:Number translationSnap]</h3>

<h2>Methods</h2>

<p>See the base [page:Object3D] class for common methods.</p>
<p>See the base [page:Controls] class for common methods.</p>

<h3>[method:TransformControls attach] ( [param:Object3D object] )</h3>
<p>
Expand All @@ -167,9 +151,10 @@ <h3>[method:TransformControls detach] ()</h3>
Removes the current 3D object from the controls and makes the helper UI invisible.
</p>

<h3>[method:undefined dispose] ()</h3>
<h3>[method:Object3D getGizmo] ()</h3>
<p>
Should be called if the controls is no longer required.
Returns the visual representation of the controls. Add the gizmo to your scene to visually transform the attached
3D object.
</p>

<h3>[method:Raycaster getRaycaster] ()</h3>
Expand Down
2 changes: 1 addition & 1 deletion editor/js/Viewport.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ function Viewport( editor ) {

} );

sceneHelpers.add( transformControls );
sceneHelpers.add( transformControls.getGizmo() );

//

Expand Down
159 changes: 97 additions & 62 deletions examples/jsm/controls/TransformControls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
BoxGeometry,
BufferGeometry,
Controls,
CylinderGeometry,
DoubleSide,
Euler,
Expand Down Expand Up @@ -36,32 +37,22 @@ const _mouseDownEvent = { type: 'mouseDown', mode: null };
const _mouseUpEvent = { type: 'mouseUp', mode: null };
const _objectChangeEvent = { type: 'objectChange' };

class TransformControls extends Object3D {
class TransformControls extends Controls {

constructor( camera, domElement ) {
constructor( camera, domElement = null ) {

super();

if ( domElement === undefined ) {

console.warn( 'THREE.TransformControls: The second parameter "domElement" is now mandatory.' );
domElement = document;
super( camera, domElement );

}
const root = new TransformControlsRoot( this );
this._root = root;

this.isTransformControls = true;
const gizmo = new TransformControlsGizmo();
this._gizmo = gizmo;
root.add( gizmo );

this.visible = false;
this.domElement = domElement;
this.domElement.style.touchAction = 'none'; // disable touch scroll

const _gizmo = new TransformControlsGizmo();
this._gizmo = _gizmo;
this.add( _gizmo );

const _plane = new TransformControlsPlane();
this._plane = _plane;
this.add( _plane );
const plane = new TransformControlsPlane();
this._plane = plane;
root.add( plane );

const scope = this;

Expand All @@ -83,8 +74,8 @@ class TransformControls extends Object3D {
if ( propValue !== value ) {

propValue = value;
_plane[ propName ] = value;
_gizmo[ propName ] = value;
plane[ propName ] = value;
gizmo[ propName ] = value;

scope.dispatchEvent( { type: propName + '-changed', value: value } );
scope.dispatchEvent( _changeEvent );
Expand All @@ -96,8 +87,8 @@ class TransformControls extends Object3D {
} );

scope[ propName ] = defaultValue;
_plane[ propName ] = defaultValue;
_gizmo[ propName ] = defaultValue;
plane[ propName ] = defaultValue;
gizmo[ propName ] = defaultValue;

}

Expand Down Expand Up @@ -172,50 +163,38 @@ class TransformControls extends Object3D {
this._onPointerMove = onPointerMove.bind( this );
this._onPointerUp = onPointerUp.bind( this );

this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
this.domElement.addEventListener( 'pointermove', this._onPointerHover );
this.domElement.addEventListener( 'pointerup', this._onPointerUp );

}

// updateMatrixWorld updates key transformation variables
updateMatrixWorld( force ) {

if ( this.object !== undefined ) {
if ( domElement !== null ) {

this.object.updateMatrixWorld();

if ( this.object.parent === null ) {

console.error( 'TransformControls: The attached 3D object must be a part of the scene graph.' );

} else {
this.connect();

this.object.parent.matrixWorld.decompose( this._parentPosition, this._parentQuaternion, this._parentScale );
}

}
}

this.object.matrixWorld.decompose( this.worldPosition, this.worldQuaternion, this._worldScale );
connect() {

this._parentQuaternionInv.copy( this._parentQuaternion ).invert();
this._worldQuaternionInv.copy( this.worldQuaternion ).invert();
this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
this.domElement.addEventListener( 'pointermove', this._onPointerHover );
this.domElement.addEventListener( 'pointerup', this._onPointerUp );

}
this.domElement.style.touchAction = 'none'; // disable touch scroll

this.camera.updateMatrixWorld();
this.camera.matrixWorld.decompose( this.cameraPosition, this.cameraQuaternion, this._cameraScale );
}

if ( this.camera.isOrthographicCamera ) {
disconnect() {

this.camera.getWorldDirection( this.eye ).negate();
this.domElement.removeEventListener( 'pointerdown', this._onPointerDown );
this.domElement.removeEventListener( 'pointermove', this._onPointerHover );
this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
this.domElement.removeEventListener( 'pointerup', this._onPointerUp );

} else {
this.domElement.style.touchAction = 'auto';

this.eye.copy( this.cameraPosition ).sub( this.worldPosition ).normalize();
}

}
getGizmo() {

super.updateMatrixWorld( force );
return this._root;

}

Expand Down Expand Up @@ -555,10 +534,7 @@ class TransformControls extends Object3D {

dispose() {

this.domElement.removeEventListener( 'pointerdown', this._onPointerDown );
this.domElement.removeEventListener( 'pointermove', this._onPointerHover );
this.domElement.removeEventListener( 'pointermove', this._onPointerMove );
this.domElement.removeEventListener( 'pointerup', this._onPointerUp );
this.disconnect();

this.traverse( function ( child ) {

Expand All @@ -573,7 +549,7 @@ class TransformControls extends Object3D {
attach( object ) {

this.object = object;
this.visible = true;
this._root.visible = true;

return this;

Expand All @@ -583,9 +559,10 @@ class TransformControls extends Object3D {
detach() {

this.object = undefined;
this.visible = false;
this.axis = null;

this._root.visible = false;

return this;

}
Expand Down Expand Up @@ -778,6 +755,64 @@ const _v1 = new Vector3();
const _v2 = new Vector3();
const _v3 = new Vector3();

class TransformControlsRoot extends Object3D {

constructor( controls ) {

super();

this.isTransformControlsRoot = true;

this.controls = controls;
this.visible = false;

}

// updateMatrixWorld updates key transformation variables
updateMatrixWorld( force ) {

const controls = this.controls;

if ( controls.object !== undefined ) {

controls.object.updateMatrixWorld();

if ( controls.object.parent === null ) {

console.error( 'TransformControls: The attached 3D object must be a part of the scene graph.' );

} else {

controls.object.parent.matrixWorld.decompose( controls._parentPosition, controls._parentQuaternion, controls._parentScale );

}

controls.object.matrixWorld.decompose( controls.worldPosition, controls.worldQuaternion, controls._worldScale );

controls._parentQuaternionInv.copy( controls._parentQuaternion ).invert();
controls._worldQuaternionInv.copy( controls.worldQuaternion ).invert();

}

controls.camera.updateMatrixWorld();
controls.camera.matrixWorld.decompose( controls.cameraPosition, controls.cameraQuaternion, controls._cameraScale );

if ( controls.camera.isOrthographicCamera ) {

controls.camera.getWorldDirection( controls.eye ).negate();

} else {

controls.eye.copy( controls.cameraPosition ).sub( controls.worldPosition ).normalize();

}

super.updateMatrixWorld( force );

}

}

class TransformControlsGizmo extends Object3D {

constructor() {
Expand Down
5 changes: 3 additions & 2 deletions examples/misc_controls_transform.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,6 @@

control = new TransformControls( currentCamera, renderer.domElement );
control.addEventListener( 'change', render );

control.addEventListener( 'dragging-changed', function ( event ) {

orbit.enabled = ! event.value;
Expand All @@ -89,7 +88,9 @@
scene.add( mesh );

control.attach( mesh );
scene.add( control );

const gizmo = control.getGizmo();
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mrdoob Are you okay with getGizmo()?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@arodic How does this change look to you?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getGizmo() is okay 👌

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, getHelper() would follow the current naming:
https://github.com/mrdoob/three.js/tree/dev/examples/jsm/helpers

scene.add( gizmo );

window.addEventListener( 'resize', onWindowResize );

Expand Down
2 changes: 1 addition & 1 deletion examples/webgl_animation_skinning_ik.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@
transformControls.showX = false;
transformControls.space = 'world';
transformControls.attach( OOI.target_hand_l );
scene.add( transformControls );
scene.add( transformControls.getGizmo() );

// disable orbitControls while using transformControls
transformControls.addEventListener( 'mouseDown', () => orbitControls.enabled = false );
Expand Down
2 changes: 1 addition & 1 deletion examples/webgl_geometry_spline_editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@
controls.enabled = ! event.value;

} );
scene.add( transformControl );
scene.add( transformControl.getGizmo() );

transformControl.addEventListener( 'objectChange', function () {

Expand Down
2 changes: 1 addition & 1 deletion examples/webgl_modifier_curve.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@

const target = intersects[ 0 ].object;
control.attach( target );
scene.add( control );
scene.add( control.getGizmo() );

}

Expand Down
2 changes: 1 addition & 1 deletion examples/webgl_modifier_curve_instanced.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@

const target = intersects[ 0 ].object;
control.attach( target );
scene.add( control );
scene.add( control.getGizmo() );

}

Expand Down
4 changes: 2 additions & 2 deletions examples/webgl_shadowmap_progressive.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@

} );
control.attach( lightOrigin );
scene.add( control );
scene.add( control.getGizmo() );

// create 8 directional lights to speed up the convergence
for ( let l = 0; l < lightCount; l ++ ) {
Expand Down Expand Up @@ -142,7 +142,7 @@

} );
control2.attach( object );
scene.add( control2 );
scene.add( control2.getGizmo() );
const lightTarget = new THREE.Group();
lightTarget.position.set( 0, 20, 0 );
for ( let l = 0; l < dirLights.length; l ++ ) {
Expand Down
Loading