Вершины перемещаются вдоль неправильной оси после вращения

Question

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

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

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

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

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

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

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

Answer 1

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

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

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

Старайтесь избегать такого кода:

  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