© Young 2018-04-29 21:08
существуетThreeJS делает простой кубик Рубика за четыре шагаКак реализовать простой кубик Рубика, который можно вращать, представлено в разделе , а затем я собираюсь представить, как заставить этот простой кубик Рубика иметь функцию автоматического восстановления.
Примеры следующие:
Вы можете отсканировать следующие QR-коды, чтобы испытать:
или перейдите по ссылкеу новичка это есть. GitHub.IO/three JS_if not…;
код находится вGitHub.com/новичок молодой…В проекте:
step1.html, step2.html, step3.html, step4.html
ThreeJS四步制作一个简易魔方соответствующий код; папка wegame для Simple Cube小游戏код, в настоящее время включены только первые четыре шага;step5.htmlКод для автоматического восстановления слоя простого кубика Рубика, который является кодом приведенного выше примера, будет кратко объяснен позже;auto-reset-v1-test.jsдля приведенного выше примера测试用例код, в тестовом примере соответствующая информация журнала (например, количество шагов, необходимых для восстановления, и продолжительность) будет выводиться вauto-reset-v1-log.txtфайл, чтобы облегчить последующий анализ;analyze.jsПримеры вышеописанного кода анализа логарифма, вычисляющего среднюю длину и среднее количество шагов при всех выборочных данных, и выводящего результат вauto-reset-v1-analyze.txtв файле.
существует210В автоматических тестах среднее количество шагов было197шагов, средняя продолжительность44секунд и установить в коде0.2Второй и первый шаг в основном согласованы.С точки зрения данных автоматического тестирования, текущая реализация еще не достигла оптимума алгоритма, и предполагается, что его можно оптимизировать для平均步数150(поворот на 90 градусов считается одним шагом).
Следует отметить, что магический куб третьего порядка имеет
8!×3^7×12!×2^11/2 = 43252003274489856000Поэтому, несмотря на то, что я тестировал код примера тысячи раз, я все еще не могу гарантировать, что реализованный алгоритм восстановления может справиться со всеми ситуациями, поэтому я надеюсь, что вы можете сообщить мне, если вы столкнетесь с какой-либо ненормальной ситуацией во время опыта (最好是六个面都截图).
层先法Это относится к разделению куба на три слоя: нижний слой, средний слой и верхний слой, который можно восстановить по слоям.Если вы обратите внимание на приведенный выше пример, вы можете обнаружить, что процесс восстановления начинается снизу слоя на верхний слой, как показано на рисунке:
Метод «первый слой» можно выполнить, только запомнив несколько простых формул, поэтому он подходит для использования кубиком Рубика новичками, но эффективность его низкая.
Как этого добиться? Сделай первый шаг, Маленький Белый Цветочек:
Сначала определите цвет, соответствующий центральному цвету верхней поверхности в текущей модели;
Маленький белый цветок требует, чтобы цвет вокруг центра верхней поверхности был соответствующим ему цветом;
К счастью, когда мы строим куб из массива цветов в ThreeJS, закон был определен;
Когда мы присваиваем значения шести граням по очереди, их фиксированный порядок右、左、上、下、前、后, Который означает, что根据颜色序号获取初始化时其对面颜色序号Метод заключается в следующем:
Это первый базовый метод в реализации метода Layer-First.
Поскольку куб вращается с помощью предоставленного ThreeJS轨道控制器OrbitControls, причина изменения угла обзора - изменение положения камеры, сам куб не вращается, кроме того, после поворота определенного слоя будет обновляться порядковый номер квадратика, так что он будет всегда сохранить исходный серийный номер без изменений;
Так上表面中心小方块序号则为10, в то же время нам нужен способ根据序号选取小方块:
rotateNumУказывает, сколько раз маленький квадрат поворачивается на 90 градусов против часовой стрелки вокруг оси Y в мировой системе координат, напримерgetCubeByIndex(2,1)Фактическое количество маленьких квадратов, полученных20;
Причина этого в том, что на самом деле существует три эквивалентных ситуации для каждой ситуации в методе первого слоя, потому что соотношение между верхним и нижним уровнями кубика Рубика фиксируется после его определения, но его можно изменить; Это второй базовый метод в реализации метода первого уровня.
После выбора конкретного маленького квадрата нам также необходимо получить порядковый номер плоскости, вектор нормали которой параллелен оси Y мировой системы координат в маленьком квадрате, а затем получить соответствующий цвет в соответствии с порядковым номером квадрата. плоскости, поэтому нам также нужен метод для获取某个小方块中法向量和已知向量方向相同的面的颜色序号:
В этом методе нужно отметить две вещи:
其一: При оценке того, что два вектора параллельны, невозможно определить, равен ли их внутренний угол 0, поскольку существует ошибка в операциях с числами с плавающей запятой, реальная ситуация может заключаться в том, что внутренний угол является очень маленьким числом, но не равно 0, поэтому его необходимо изменить, чтобы судить о методе минимального значения;
其二:cube.faces[i].normalПолученный вектор нормали находится в системе координат самого маленького квадрата.К счастью, ThreeJS необходимо выполнять операции, связанные со светом, поэтому матрица вектора нормали хранится в маленьком квадратном объекте.cube.normalMatrix, вектор нормали его собственной системы координат умножается на матрицу вектора нормали, чтобы получить вектор нормали в системе координат вида; но поскольку вектор оси координат, который мы передаем в этот метод, находится в мировой системе координат, его нельзя использовать для прямой расчет, и его необходимо преобразовать в систему координат вида, метод преобразования заключается в умножении на视图矩阵的逆反矩阵;
потому что с помощью透视投影相机 THREE.PerspectiveCameraТаким образом, матрицу просмотра можно рассчитать следующим образом:
позвонить напрямую
THREE.Matrix4статический методgetInverseМожно получить обратную матрицу матрицы; Это третий базовый метод в реализации метода первого слоя.
Пока мы можем достичь首先得确定当前模型中上表面中心颜色的对应颜色Вот шаг:
Затем оцените, завершен ли маленький белый цветок, и если да, то переходите ко второму шагу;
Решение Xiaobaihua очень простое, просто нужно оценить серийный номер как1、9、11、19Является ли цвет верхней поверхности маленького квадрата соответствующим цвету цвета верхней поверхности центрального маленького квадрата:
Затем вам придется иметь дело с различными ситуациями Xiaobaihua;
В качестве примера возьмем первый пример:
Как показано3маленькая площадьZПоверхность вала底色когда, если9маленькая площадьYПоверхность вала также底色, тебе нужно逆时针转动顶层; в противном случае требуется逆时针转动左侧:
В приведенном выше коде есть два предостережения:
其一:rotateAxisByYLineМетод используется для обработки изменений каждой оси координат в различных эквивалентных ситуациях, таких какZ轴在逆时针绕Y轴旋转90度之后就变成了X轴;
Это четвертый базовый метод в реализации метода первого слоя.
其二:逆时针转动顶层логикаuинкапсулированный метод;逆时针转动左侧логикаlметод инкапсулирован; причина в том, что层先法Наконец, различные повороты редукционного куба можно представить как12Основная ротация выглядит следующим образом:
Код инкапсулирован следующим образом:
Это другой базовый метод в реализации метода первого слоя.
Следуйте инструкциям шаг за шагом, чтобы реализовать, в основном, применение вышеуказанных основных методов.
层先法Хотя это просто для понимания, легко сделать ошибки из-за большого количества шагов.При написании кода лучше быть осторожным!
Кроме того, я хочу сделать кубик Рубика на основе мини-игр WeChat.На раннем этапе я в основном хочу воссоздать опыт кубика Рубика и объединить некоторые удобные небольшие функции, такие как отметка определенного состояния и возврат к отмеченному состоянию. сразу если возникнут проблемы с последующими операциями, а также история операций, информационная статистика и т.д.; добро пожаловать; заинтересованные студенты могут прийти и поиграть вместе (можно оставить сообщение в моем блоге и оставить контактные данные).
Наконец-то интересная научно-популярная статьяКубик Рубика и «Число богов»Почувствуйте магию кубика Рубика.