Support Skew in Editor

[crubier]

This is a feature request.

1. When importing skewed objects in the Editor, their matrix gets orthogonalized and the skew disappears. It would be nice to be at least able to visualize skewed objects in the editor.
2. There also are no tools to manually skew objects in the editor. It would be nice to be able to manually edit the skew in the editor

Looking forward to this, thank you !

[WestLangley]

A shear object matrix is not compatible with three.js unless object.matrixAutoUpdate = false. So the loaders would need to honor that setting.

See if you can apply the shear matrix to your geometry, instead.

[crubier]

Yes, I read this exact stackOverflow post before asking :-) . I know it is possible to shear objects in general in Three JS, I do it on a daily basis :-)

My question was related to the possibility of 1. Visualizing the result in the editor and 2. Editing the shear in the editor.

I believe the work needed to get point 2 is pretty large, but point 1 should be doable relatively easily.

[WestLangley]

three.js does not support sheared transforms unless the user sets the matrix directly and prevents it from being overwritten.

What file format are you using?

[crubier]

Ok so here is my use case:

I am developing a script which use Three JS, purely for the 3D computations, not at all for visualisation. This script runs on node JS. This script updates the matrices of some Three JS objects in a Scene. These matrices are updated based on a custom algorithm which includes a shear component in the matrices (I know, you can't specify a shear in Three JS directly, but this is irrelevant here, as the matrices are computed outside of Three JS).

Alright, now I want to iterate on the development on this script. And the Three JS editor is a fantastic tool for that. Just export the Three JS scene JSON from my script (And yes I checked, the exported matrices still include the shear component) and import it in the editor and voila ! A nice 3D visualisation of all the Three JS objects my script is working on, super easy to debug.

However, when importing the Scene, the editor transforms the matrices by removing their shear component, making them orthogonal. Not nice, since I can't properly visualise the output of my script.

[WestLangley]

Do you know the answer to my question? What file format are you using?

[crubier]

Three JS scene JSON. I don't know any other name for this format. The format that is output when you export a Three JS Scene as Json.

[WestLangley]

Does your file look like this -- except without the matrixAutoUpdate key?

"object": {
	"uuid": "3E39133A-15B3-4594-B564-F31D1EC5D7FB",
	"type": "Mesh",
	"matrixAutoUpdate": false,
	"matrix": [1,1,0,0,0.125,1,1,0,0,0,1,0,0,0,0,1],
	"geometry": "E7F4E5EE-FD94-4157-B8CE-59A4BCE2E5E9",
	"material": "28661413-F0AE-4D9A-9DBC-219532053672"
}

[mrdoob]

As far as I remember, the main problem of shearing was the complications that brings to bounding box/sphere computation...?

[WestLangley]

However, when importing the Scene, the editor transforms the matrices by removing their shear component, making them orthogonal.

See if #13840 addresses your issue. If you are going to set a shear matrix, then you need to set mesh.matrixAutoUpdate = false before exporting. The loader should honor that setting.

[crubier]

@WestLangley it works ! Well done !

Would be nice to merge #13840 now :-)

[crubier]

Also the imported skewed cube is not editable in the editor, which is a good thing:

• You can't "lose" the skew by editing the translation of the cube for example.
• It is still possible to put the skewed cube it into a group with rotation / translation / scaling if one needs to transform it.

So overall I am impressed by how such a small pull request adds a feature and still works seamlessly with the editor. This is a testimony of the general code quality of three.js .