刷新网页时，三个.js中的重定向轴失败 [英] Reorienting axes in three.js fails when webpage is refreshed

问题描述

我正在使用您可以从three.js网站下载的three.js编辑器源代码开发一个项目。作为项目的一部分，我需要重新调整轴的方向，以便它们可以与用于飞机的标准坐标轴（x轴向外，y轴向左翼，z轴向下）对齐。点击以下链接可以看到我所描述的方向：设计轴方向

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

为了得到这个，我修改了index.html（在编辑器文件夹中），three.js（在build文件夹中），Editor.js（编辑/ js文件夹）文件。在我修改后， 详细说明 ，我可以让轴正确旋转，但是当我刷新/重新加载页面时，它会断开，不再是我需要的方向。当我单击文件>新建时，它会重置并且正是我需要的方式。当我重新加载页面时，有谁知道为什么代码不起作用？

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 （第12行）：

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

来自

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

这允许我使用three.js文件而不是min.js文件

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

three.js （第40581和40582行）：

three.js (lines 40581 and 40582):

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

来自

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

这会导致网格从水平旋转到垂直90度。

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

Editor.js （第9行）：

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

来自

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

我还添加了行

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

直接位于相机position.set函数下方。

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.

推荐答案

three.js中的很多对象克隆 THREE.Object3D.DefaultUp 以确定其方向（向上向量）当它们被构造时。

这个默认值用于灯光，物体，相机甚至更多。

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.

在three.js中这个向量是默认情况下设置为（0,1,0），如您所见这里是 THREE.Object3D 类，意思是y轴指向up。

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）;

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

如果您希望z轴默认指向，您可以设置此默认值最多（0,0,1）（或者如果你想让它在你的问题中写下来指向（0,0， - 1））。

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) ).

如果你在代码中很早就这样做了，那么在实例化（创建）任何对象之前，所有对象都会有默认情况下，从一开始就正确设置 up 属性，然后您可能不需要进行任何其他自定义配置。您可以使用以下代码行更改默认值：

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 );

试试这个，它会让你更容易改变你的three.js场景的默认方向，我还希望这个解决方案能够解决您重新加载页面时遇到的问题。

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.

这篇关于刷新网页时，三个.js中的重定向轴失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！