Three.js: Добавление и удаление детей с вращающимися объектами

Question

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

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

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

Что я сделал.

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

Что я отлажен

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

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

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

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

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

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

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

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

Answer 1

Хитрость заключается в использовании THREE.SceneUtils.attach() и THREE.SceneUtils.detach().

Вам необходимо начать со всех ваших 27 кубиков в качестве ребенка от scene.

Позвольте pivot быть Object3D().

Позвольте active быть массивом, содержащим 9 кубов, которые вы хотите повернуть.Теперь сделайте кубики Дитя шарнира:

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 источник, чтобы вы понимали, что происходит.

three.js r.63