Три.js: добавление и удаление дочерних элементов повернутых объектов

Я пытаюсь имитировать кубик Рубика. Я хотел выбрать лицо наугад и повернуть его. Поэтому я создал 27 кубических сеток и расположил их. Вы можете видеть рабочий (беспорядочно) кубик Рубика здесь http://codepen.io/theonepa1/full/fzAli

в чем проблема.

Как вы можете видеть из приведенной выше ссылки, меньшие Кубы по краям перемещаются случайным образом (по крайней мере, не так, как я ожидаю)

Что я сделанный.

при попытке повернуть грань я сгруппировал 9 кубов, принадлежащих грани, добавил их в качестве дочерних объектов к новому объекту Object3D. Я тогда повернул object3d вдоль своей оси с помощью object3d.поворот.x (или y или z).

Что я отладил

Я убедился, что кубики, которые я выбираю для второго поворота лица, верны. После того, как первое вращение лица завершено, я обновляю их виртуальные позиции (не фактические координаты). Так что для второго лица вращение я проверил, что кубики выбраны правильно.

что на самом деле происходит

одно замечание, которое я сделал, заключалось в том, что оси кубов (меньшие) изменяются после поворота object3d (родитель, держащий 9 кубов грани). А также координаты кубов не обновляются автоматически после поворота граней. Скажем, например, если один из кубов имеет (0,0,22) в качестве координат перед гранью вращения, координаты такие же, даже после вращения. Однако изменяется ориентация осей Куба.

каков наилучший способ поворота группы объектов вокруг оси ? Использует Object3D правильно ? Мы должны удалить детей из одного родителя, прежде чем добавлять его в другую группу для второго поворота лица ?

должен ли я сделать какое-то обновление для отдельных кубов, прежде чем добавлять их во вторую группу для второго поворота лица ?

Я читал некоторые сообщения о applyMatrixWorld, но я действительно мог не понимаю, как это повлияло на ориентацию осей а координаты Куба ?

можете ли вы сообщить мне, где я могу прочитать о концепциях , таких как applyMatrixWorld, это какая-то общая концепция в обычный 3D-программирования ?

Это очень длинный вопрос. Был бы очень признателен за ваш ответ:)

7
3d three.js

1 ответов

фокус в том, чтобы использовать THREE.SceneUtils.attach() и THREE.SceneUtils.detach().

вы должны начать со всех ваших 27 кубов, как ребенок scene.

пусть pivot будет Object3D().

пусть active быть массивом, содержащим 9 кубов, которые вы хотите повернуть. Теперь сделайте кубики дочерним элементом pivot:

pivot.rotation.set( 0, 0, 0 );
pivot.updateMatrixWorld();

for ( var i in active ) {

    THREE.SceneUtils.attach( active[ i ], scene, pivot );

}

затем, после вращения, положите кубики обратно как дети scene.

pivot.updateMatrixWorld();
for ( var i in active ) {

    cubes[ i ].updateMatrixWorld(); // if not done by the renderer
    THREE.SceneUtils.detach( active[ i ], pivot, scene );

}

читать SceneUtils.js источник так что вы понимаете, что происходит?

эти утилиты можно найти в /examples/js/utils/SceneUtils.js. Этот файл должен быть добавлен в ваш проект.

три.js r.96

12