Three.js: Показать мировые координатные оси в углу сцены

Вероятно, это очень простая проблема, но я пока не нашел решения, и это меня беспокоит. Я хотел бы показать стрелки, указывающие направления мировых координат (x, y, z) в нижнем правом углу камеры, как это делается в Maya, чтобы при вращении камеры вокруг объекта или перемещении по сцене, вы все еще можете определить направления мировых координат. Я пытался сделать это, используя два разных подхода, и ни один из них не работал до сих пор.

У меня есть объект с тремя стрелками, как дети, использующиеTHREE.ArrowHelper класс, мы будем называть этоXYZ на момент. Первый подход заключается в том, чтобы сделатьXYZ дочерний элемент сцены и задайте ему положение, рассчитанное по текущему положению камеры, плюс смещение в направлении, в котором камера направлена, и отрегулируйте его так, чтобы оно отображалось вниз в углу, который я хочу, а не в центре экрана. У меня это почти получилось, так как стрелки поддерживают правильное вращение, но положение немного забавное, и я перестал идти по этому маршруту, потому что он был действительно "нервным" при перемещении камеры. Я не уверен, была ли это проблема производительности или что-то еще.

Второй метод заключается в том, чтобы сделатьXYZ дочерний элемент камеры с локальным смещением положения, а затем обратный поворот камеры и применить обратное вращение кXYZ так что это соответствует мировым координатам. Я, кажется, близок к использованию этого метода, но я могу получить правильное положение или правильное вращение, но не оба.

Я сейчас использую кодXYZ.matrix.extractRotation( camera.matrixWorldInverse ); чтобы дать мне правильную ориентацию дляXYZ, но это позиционирование выключено. Если я используюXYZ.matrixWorld.extractRotation( camera.matrixWorldInverse ); тогда позиция остается в порядке (прикреплена к камере), но ориентация не меняется.

Если у кого-то есть быстрый взлом, чтобы заставить это работать, это будет очень цениться. Если у вас есть лучший метод, чем тот, который я использую, то это также будет полезно.

** - РЕДАКТИРОВАТЬ - ** Следует, вероятно, упомянуть, что вы можете найти рабочую версию здесь - (https://googledrive.com/host/0B45QP71QXoR0Mm9Mbkp3WGI1Qkk/) Я храню свой код на Google Диске, но работаю локально, используя wamp и псевдонимы, что означает, что любые изменения, которые я делаю локально, отражаются онлайн, как только Google Drive синхронизируется. И.Е. это может быть сломано, когда вы смотрите.

Ответы на вопрос(3)

Ваш ответ на вопрос