ThreeJS Translate устаревший теперь добавляет в позицию вместо

#three.js #rotation #translate-animation

#three.js #вращение #перевод-анимация

Вопрос:

В three.js r96, существует translate(x, y, z). Я бы использовал это, чтобы переместить объект из его исходной точки.

Теперь в r103 это устарело для translateX(x), однако при просмотре вывода сетки на консоль я вижу, что если у меня есть позиция, скажем, position.set(50,0,0) и traslateX(50), то атрибуты сетки показывают позицию (100,0,0).

https://codepen.io/anon/pen/XQVmyZ

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

Если ширина моей плоскости равна 100, то установка позиции в (50,0,0) должна переместить синюю центральную точку к самому правому краю красного. Это должно быть новое происхождение blue.

Теперь, если я переведу синий на ось x 50, тогда исходная точка все равно должна находиться в том же месте, но теперь синий при повороте будет вращаться по оси Y, расположенной в самой внешней левой точке синего. Как вы видите, это не так.

Взгляд на сетку показывает, что нет translate, а есть только position .

 plane3.position.set(50,0,0);
//plane3.translate(50,0,0);  //Used to work
plane3.translateX(50); //New translate, adds to position instead
//var vector = new THREE.Vector3( 1, 0, 0 );
//plane3.translateOnAxis(vector,40);

function render() {
 requestAnimationFrame( render );
 plane3.rotation.y  = 0.03;
     renderer.render( scene, camera );
}
 

Мой желаемый результат таков, каким он был, когда я мог повернуть синий на крайнюю левую ось Y.

Ответ №1:

Кажется, вы смешиваете устаревший Object3D.translate() метод с BufferGeometry.translate() . Если вы переводите геометрию вместо 3D-объекта, можно изменить точку поворота, как ожидалось. Я надеюсь, что обновленный codepen покажет ваш предполагаемый визуальный результат:

https://codepen.io/anon/pen/BEJpLg

Комментарии:

1. Ты да Человек. Большое вам спасибо. Это именно то, что я пытаюсь сделать.