I am currently working on a project that involves using the three.js editor source code available for download on the three.js website. As part of this project, I am required to adjust the orientation of the axes to align with standard airplane coordinate axes (x-axis out the nose, y-axis out the left wing, z-axis down). You can view the specific orientation I am aiming for by clicking on the following link: design axis orientation
To achieve this, I made modifications to the index.html (located in the editor folder), three.js (found in the build folder), and Editor.js (in the editor/js folder) files. Despite successfully rotating the axes as desired initially, upon refreshing or reloading the page, the orientation reverts back and no longer maintains the correct positioning. However, when I select File > New, it resets back to the intended orientation. Could someone enlighten me on why the code fails to retain the adjustments after a reload?
Below are the changes I implemented within the code:
index.html (line 12):
<script src="../build/three.js"></script>
replaced from
<script src="../build/three.min.js"></script>
This modification allows the use of the full three.js file instead of the minified version.
three.js (lines 40581 and 40582):
vertices.push( - size, k, 0, size, k, 0 );
vertices.push( k, - size, 0, k, size, 0 );
changed from
vertices.push( - size, 0, k, size, 0, k );
vertices.push( k, 0, - size, k, 0, size );
This alteration results in a 90-degree rotation of the grid orientation, transitioning it from horizontal to vertical.
Editor.js (line 9):
this.DEFAULT_CAMERA.position.set( -20, 20, -20 );
revised from
this.DEFAULT_CAMERA.position.set( 20, 10, 20 );
I also included the line
this.DEFAULT_CAMERA.up.set( 0, 0, -1 );
directly below the camera position.set function.
All these adjustments are aimed at realigning the grid and axes to mirror the image displayed in the provided link.