question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using TransformControls to move an object along the axis, the path is not correct

See original GitHub issue

Describe the bug

Using TransformControls to move an object along the axis, the path is not correct

To Reproduce

Use TransformControls to move the object along the axis. When the following three conditions are met, the path is not correct

  1. This object has a parent object that has been rotated

  2. The coordinate space is ‘world’

  3. The translationSnap is a a numeric value

Code TransformControls.js line 421

if ( space === 'world' ) {
  // if ( object.parent ) {
  // object.position.add( _tempVector.setFromMatrixPosition( object.parent.matrixWorld ) );
  // }
  // if ( axis.search( 'X' ) !== - 1 ) {
  // 	object.position.x = Math.round( object.position.x / this.translationSnap ) * this.translationSnap;
  // }
  // if ( axis.search( 'Y' ) !== - 1 ) {
  // 	object.position.y = Math.round( object.position.y / this.translationSnap ) * this.translationSnap;
  // }
  // if ( axis.search( 'Z' ) !== - 1 ) {
  // 	object.position.z = Math.round( object.position.z / this.translationSnap ) * this.translationSnap;
  // }
  // if ( object.parent ) {
  // 	object.position.sub( _tempVector.setFromMatrixPosition( object.parent.matrixWorld ) );
  // }
  var vector_temp = new Vector3();
  object.getWorldPosition(vector_temp);
  if ( axis.search( 'X' ) !== - 1 ) {
    vector_temp.x = Math.round( vector_temp.x / this.translationSnap ) * this.translationSnap;
  }
  if ( axis.search( 'Y' ) !== - 1 ) {
    vector_temp.y = Math.round( vector_temp.y / this.translationSnap ) * this.translationSnap;
  }
  if ( axis.search( 'Z' ) !== - 1 ) {
    vector_temp.z = Math.round( vector_temp.z / this.translationSnap ) * this.translationSnap;
  }
  object.position.copy(object.parent.worldToLocal(vector_temp))
}

Live example

Expected behavior

Using TransformControls to move an object along the axis, the path is correct.

Screenshots

5f5b9b60161e38e6d8e23cadc066b62 40fbe4deb93aa81fe1da913d23ebedf

Platform:

  • Device: [Desktop]
  • OS: [Windows]
  • Browser: [Chrome]
  • Three.js version: [dev, r123]

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
Mugen87commented, May 17, 2021

It seems your change is not correct. Even when applying it, you don’t get the expected result if you rotate the scene in misc_controls_transform. TransformControls possibly does not fully support transformed ancestors.

/ping @arodic

0reactions
pesutoakacommented, Feb 23, 2022

This also does not work in the r137. This is what I have ended up with, the problem seams to be a parent transform. ` if ( space === ‘world’ ) {

				if ( object.parent ) {

					object.getWorldPosition(_tempVector);
					if ( axis.search( 'X' ) !== - 1 ) {
						_tempVector.x = Math.round( _tempVector.x / this.translationSnap ) * this.translationSnap;
					}
					if ( axis.search( 'Y' ) !== - 1 ) {
						_tempVector.y = Math.round( _tempVector.y / this.translationSnap ) * this.translationSnap;
					}
					if ( axis.search( 'Z' ) !== - 1 ) {
						_tempVector.z = Math.round( _tempVector.z / this.translationSnap ) * this.translationSnap;
					}
					object.position.copy(object.parent.worldToLocal(_tempVector));

				}
				else {

					if ( axis.search( 'X' ) !== - 1 ) {

						object.position.x = Math.round( object.position.x / this.translationSnap ) * this.translationSnap;

					}

					if ( axis.search( 'Y' ) !== - 1 ) {

						object.position.y = Math.round( object.position.y / this.translationSnap ) * this.translationSnap;

					}

					if ( axis.search( 'Z' ) !== - 1 ) {

						object.position.z = Math.round( object.position.z / this.translationSnap ) * this.translationSnap;

					}
				}

			}`

GIF 23 02 2022 17-03-13

Read more comments on GitHub >

github_iconTop Results From Across the Web

TransformControls – three.js docs
This class can be used to transform objects in 3D space by adapting a similar interaction model of DCC tools like Blender. Unlike...
Read more >
TransformController rotation affects multiple axes
I am using the THREE.TransformControls code to manipulate objects. Position and scale are independent x, y, and z but rotation on any axis...
Read more >
Transform images, shapes, and paths - Adobe Support
If you are transforming a selection, pixel-based layer, or selection border, choose the Move tool . Then select Show Transform Controls in the ......
Read more >
Transformations, Coordinate Systems, and the Scene Graph
Moving objects around in 3D space is a fundamental skill on your path of ... A position one unit to the right along...
Read more >
Move and rotate a 3D object in Motion - Apple Support
Move and rotate a 3D object in Motion. 3D objects have multiple spatial properties, including faces (flat or curved surfaces on a 3D...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found