3

I'm working on a project using the three.js editor source code that you can download from the three.js website. As a part of the project I need to reorient the axes so that they can be aligned with standard coordinate axes used for airplanes (x-axis out the nose, y-axis out the left wing, z-axis down). The orientation I am describing can be seen when clicking on the link below: design axis orientation

In order to get this I have modified the index.html (in the editor folder), three.js (in the build folder), Editor.js (editor/js folder) files. After my modifications, detailed below, I can get the axes to rotate properly, but when I refresh/reload the page it breaks and no longer is in the orientation I need anymore. When I click File > New however, it reset and is exactly how I need it. Does anyone know why the code doesn't work when I reload the page?

Here are the modifications that I made to the code:

index.html (line 12):

<script src="../build/three.js"></script>

from 

<script src="../build/three.min.js"></script>

this allows me to use the three.js file instead of the min.js file

three.js (lines 40581 and 40582):

vertices.push( - size, k, 0, size, k, 0 );
vertices.push( k, - size, 0, k, size, 0 );

from

vertices.push( - size, 0, k, size, 0, k );
vertices.push( k, 0, - size, k, 0, size );

this causes the grid to rotate 90 degrees, from horizontal to vertical.

Editor.js (line 9): 

this.DEFAULT_CAMERA.position.set( -20, 20, -20 );

from

this.DEFAULT_CAMERA.position.set( 20, 10, 20 );

and I also added the line 

this.DEFAULT_CAMERA.up.set( 0, 0, -1 );

directly below the camera position.set function.

These last edits is supposed to reorient the grid and axes so that it looks like the picture in the link above.

Devin Gibson
  • 33
  • 5

1 Answers1

4

A lot of objects in three.js clone the THREE.Object3D.DefaultUp to determine their orientation (up vector) when they are constructed.
This default up is used for lights, objects, cameras and probably even more.

In three.js this vector is by default set to (0, 1, 0), as you can see here inside the THREE.Object3D class, meaning y-axis is pointing up.

Object3D.DefaultUp = new Vector3( 0, 1, 0 );

If you want the z-axis to point up by default you could set this default up to (0, 0, 1) (or if you want it to point down as you wrote in your question to (0, 0, -1) ).

If you do this very early inside your code, so before you instantiate (create) any objects, all objects would have by default the up property set correctly from the start and then you probably don't need to do any additional custom configuration. You can change the default up with this line of code:

THREE.Object3D.DefaultUp.set( 0, 0, 1 );

Try this, it will make it much easier to change the default orientation of your three.js scene, and I also expect this solution to solve the issue that you have when you are reloading the page.

Wilt
  • 41,477
  • 12
  • 152
  • 203