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

Jump to bottom

TransformControls v3 #20720

Closed
wants to merge 5 commits into from
Closed

TransformControls v3 #20720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8a9a42c
TransformControls v3
Dec 29, 2020
e5260ef
Merge branch 'dev' into TransformControls_v3
Apr 22, 2021
7089ab0
Merge branch 'dev' into TransformControls_v3
Apr 22, 2021
f933275
Implemented WebXRManager "move" event for TransformControls XR support.
Apr 23, 2021
dd37322
Added js version of TransformControls 3
Apr 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
105 changes: 39 additions & 66 deletions docs/examples/en/controls/TransformControls.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,19 +45,14 @@ <h3>change</h3>
are separate events you can add event listeners to. The event type is "propertyname-changed".
</p>

<h3>mouseDown</h3>
<h3>dragging-changed</h3>
<p>
Fires if a pointer (mouse/touch) becomes active.
Fires at the begining and the end of dragging gesture.
</p>

<h3>mouseUp</h3>
<h3>transform-changed</h3>
<p>
Fires if a pointer (mouse/touch) is no longer active.
</p>

<h3>objectChange</h3>
<p>
Fires if the controlled 3D object is changed.
Fires when the controlled 3D object is changed.
</p>

<h2>Properties</h2>
Expand Down Expand Up @@ -90,20 +85,24 @@ <h3>[property:Boolean enabled]</h3>
Whether or not the controls are enabled.
</p>

<h3>[property:String mode]</h3>
<h3>[property:String showTranslate]</h3>
<p>
The current transformation mode. Possible values are "translate", "rotate" and "scale". Default is *translate*.
Whether or not the translate gizmo is visible.
</p>

<h3>[property:Object3D object]</h3>
<h3>[property:String showRotate]</h3>
<p>
The 3D object being controlled.
Whether or not the rotate gizmo is visible.
</p>

<h3>[property:Number rotationSnap]</h3>
<h3>[property:String showScale]</h3>
<p>
By default, 3D objects are continuously rotated. If you set this property to a numeric value (radians), you can define in which
steps the 3D object should be rotated. Deault is *null*.
Whether or not the scale gizmo is visible.
</p>

<h3>[property:Object3D object]</h3>
<p>
The 3D object being controlled.
</p>

<h3>[property:Boolean showX]</h3>
Expand Down Expand Up @@ -137,83 +136,57 @@ <h3>[property:Number translationSnap]</h3>
steps the 3D object should be translated. Deault is *null*.
</p>

<h2>Methods</h2>

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

<h3>[method:TransformControls attach] ( [param:Object3D object] )</h3>
<h3>[property:Number rotationSnap]</h3>
<p>
<p>
[page:Object3D object]: The 3D object that should be transformed.
</p>
<p>
Sets the 3D object that should be transformed and ensures the controls UI is visible.
</p>
By default, 3D objects are continuously rotated. If you set this property to a numeric value (radians), you can define in which
steps the 3D object should be rotated. Deault is *null*.
</p>

<h3>[method:TransformControls detach] ()</h3>
<h3>[property:Number scaleSnap]</h3>
<p>
Removes the current 3D object from the controls and makes the helper UI is invisible.
By default, 3D objects are continously scaled. If you set this property to a numeric value (world units), you can define in which
steps the 3D object should be scaled. Deault is *null*.
</p>

<h3>[method:null dispose] ()</h3>
<h3>[property:Number minGrazingAngle]</h3>
<p>
Should be called if the controls is no longer required.
Set to adjust grazing angle avoidance algorithm which prevents extreme transformation changes when principal transformation axis is sharply aligned with the camera.
Default is 30.
</p>

<h3>[method:String getMode] ()</h3>
<h3>[property:Boolean enableDamping]</h3>
<p>
Returns the transformation mode.
Set to true to enable damping (inertia), which can be used to give a sense of weight to the controls. Default is false.
</p>

<h3>[method:null setMode] ( [param:String mode] )</h3>
<h3>
[property:Float dampingFactor]</h3>
<p>
<p>
[page:String mode]: The transformation mode.
</p>
<p>
Sets the transformation mode.
</p>
The damping inertia used if [page:.enableDamping] is set to true.
</p>

<h3>[method:null setRotationSnap] ( [param:Number rotationSnap] )</h3>
<p>
<p>
[page:Number rotationSnap]: The rotation snap.
</p>
<p>
Sets the rotation snap.
</p>
</p>
<h2>Methods</h2>

<h3>[method:null setSize] ( [param:Number size] )</h3>
<p>See the base [page:Object3D] class for common methods.</p>

<h3>[method:TransformControls attach] ( [param:Object3D object] )</h3>
<p>
<p>
[page:Number size]: The size of the helper UI.
[page:Object3D object]: The 3D object that should be transformed.
</p>
<p>
Sets the size of the helper UI.
Sets the 3D object that should be transformed and ensures the controls UI is visible.
</p>
</p>

<h3>[method:null setSpace] ( [param:String space] )</h3>
<h3>[method:TransformControls detach] ()</h3>
<p>
<p>
[page:String space]: The coordinate space in which transformations are applied.
</p>
<p>
Sets the coordinate space in which transformations are applied.
</p>
Removes the current 3D object from the controls and makes the helper UI is invisible.
</p>

<h3>[method:null setTranslationSnap] ( [param:Number translationSnap] )</h3>
<h3>[method:null dispose] ()</h3>
<p>
<p>
[page:Number translationSnap]: The translation snap.
</p>
<p>
Sets the translation snap.
</p>
Should be called if the controls is no longer required.
</p>

<h2>Source</h2>
Expand Down
45 changes: 20 additions & 25 deletions editor/js/Viewport.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,9 @@ function Viewport( editor ) {
selectionBox.visible = false;
sceneHelpers.add( selectionBox );

var objectPositionOnDown = null;
var objectRotationOnDown = null;
var objectScaleOnDown = null;

var transformControls = new TransformControls( camera, container.dom );
transformControls.showRotate = false;
transformControls.showScale = false;
transformControls.addEventListener( 'change', function () {

var object = transformControls.object;
Expand All @@ -97,50 +95,44 @@ function Viewport( editor ) {
render();

} );
transformControls.addEventListener( 'mouseDown', function () {

var object = transformControls.object;

objectPositionOnDown = object.position.clone();
objectRotationOnDown = object.rotation.clone();
objectScaleOnDown = object.scale.clone();
transformControls.addEventListener( 'start', function () {

controls.enabled = false;

} );
transformControls.addEventListener( 'mouseUp', function () {
transformControls.addEventListener( 'end', function ( event ) {

var object = transformControls.object;

if ( object !== undefined ) {
if ( event.object !== undefined ) {

switch ( transformControls.getMode() ) {
switch ( event.mode ) {

case 'translate':

if ( ! objectPositionOnDown.equals( object.position ) ) {
if ( ! event.positionStart.equals( event.position ) ) {

editor.execute( new SetPositionCommand( editor, object, object.position, objectPositionOnDown ) );
editor.execute( new SetPositionCommand( editor, event.object, event.position, event.positionStart ) );

}

break;

case 'rotate':

if ( ! objectRotationOnDown.equals( object.rotation ) ) {
if ( ! event.quaternionStart.equals( event.quaternion ) ) {

editor.execute( new SetRotationCommand( editor, object, object.rotation, objectRotationOnDown ) );
const rotation = new THREE.Euler().setFromQuaternion( event.quaternion );
const rotationEnd = new THREE.Euler().setFromQuaternion( event.quaternionStart );
editor.execute( new SetRotationCommand( editor, event.object, rotation, rotationEnd ) );

}

break;

case 'scale':

if ( ! objectScaleOnDown.equals( object.scale ) ) {
if ( ! event.scaleStart.equals( event.scale ) ) {

editor.execute( new SetScaleCommand( editor, object, object.scale, objectScaleOnDown ) );
editor.execute( new SetScaleCommand( editor, event.object, event.scale, event.scaleStart ) );

}

Expand Down Expand Up @@ -315,19 +307,22 @@ function Viewport( editor ) {

signals.transformModeChanged.add( function ( mode ) {

transformControls.setMode( mode );
// TODO: implement "combined mode in UI";
transformControls.showTranslate = mode === 'translate' || mode === 'combined';
transformControls.showRotate = mode === 'rotate' || mode === 'combined';
transformControls.showScale = mode === 'scale' || mode === 'combined';

} );

signals.snapChanged.add( function ( dist ) {

transformControls.setTranslationSnap( dist );
transformControls.translationSnap = dist;

} );

signals.spaceChanged.add( function ( space ) {

transformControls.setSpace( space );
transformControls.space = space;

} );

Expand Down