Вершины перемещаются вдоль неправильной оси после вращения - PullRequest
0 голосов
/ 11 июля 2019

Я перемещаю вершины фигуры при движении мыши, и это работает хорошо.Тем не менее, когда к фигуре применяется вращение, вершины перемещаются по неправильной оси.

Здесь создан кодandandbox.io: https://codesandbox.io/embed/gatsby-starter-default-l16ui

Два файла, к которым следует обратиться, - это индекс.js в каталоге страницы и shape.js в каталоге компонентов.

Переместите курсор по экрану, и вы увидите, что он реагирует, однако в неправильном направлении.

Установите радианы Y в 0и форма вернется в исходное положение.Теперь попробуйте переместить курсор, и он должен правильно отреагировать на курсор.

ОБНОВЛЕНИЕ: Я обновил изолированную программную среду кода, чтобы преобразовать добавленный вектор из мира в локальное пространство в shape.js в строке 47, но это помещает всетеперь формируется в одном месте.

const changedPoint = self.worldToLocal(point.clone())

1 Ответ

0 голосов
/ 11 июля 2019

При прочтении вашего описания звучит так, будто вы перемещаете объект в пространстве объектов, а не в мировом пространстве.Есть 2 метода, которые могут помочь.Object.localToWorld и .worldToLocal.

Попробуйте преобразовать вектор движения, используя object.worldToLocal (yourMovementVector), прежде чем добавить вектор в object.position?

edit: некоторые отзывы о стиле кодирования:

Старайтесь избегать кода, подобного следующему:

  const vertex1 = self.geometry.vertices[1].clone()
    if (originalV1 === undefined) {
      setOriginalV1(vertex1)
      mousePosition = vertex1.add(changedPoint)
    } else {
      mousePosition = originalV1.clone().add(changedPoint)
    }

, который должен быть в функции. Также .clone () - дорогостоящая операция.Кроме того, предварительно инициализируйте originalV1 ... Просто .clone () геометрию один раз, вместо .cloning () каждой из ее вершин.AFAIK, .clone () сделает это за вас.

Вы можете заменить весь этот файл следующим образом:

if(!originalGeometry)originalGeometry = geometry.clone()
for(let i=0;i<geometry.vertices.length;i++)
geometry.vertices[i].copy(originalGeometry.vertices[i]).add(changedPoint);
geometry.needsUpdate = true;

Но также ... вам, вероятно, даже не нужно делать это вычисление вершинвещи ... Просто сделайте набор сверхдлинных кубов, которые простираются до горизонта, и установите свой camera.far на достаточно большой размер, чтобы кубы в перспективе исчезали до этой точки.

Вот пример:

https://codesandbox.io/embed/threejs-simple-template-mousey-cubes-vmx91

...