Статья первоначально опубликована на мой блог
За последние несколько недель я работал над новым побочным проектом, чтобы воспроизвести визуальный эффект, называемый «перспектива, связанная с головой». Эта техника не нова, но я был заинтересован в том, чтобы выяснить, как заставить ее работать с помощью Three.js Так что я мог бы сделать какое-то интерактивное искусство с отслеживанием головы.
Вот конечный результат:
По мере того, как пользователь движется, перспектива меняется, чтобы создать впечатление, что сможет заглянуть внутрь кадра, хотя это 2D -дисплей.
Графика сделана с использованием Три.js , завод – 3D -модель, загруженная из Sketchfab и отслеживание головы выполняется с использованием Movenet Model в Tensorflow.js Анкет
Проводя некоторые исследования в отношении реализации перспективного эффекта, я узнал, что это связано с изменением проекционной матрицы камеры и наткнулся на Потянуть запрос на Three.js Repo , казалось, это было близко к тому, что я искал.
PR был объединен, и новый UTIL под названием FrameCorners () был добавлен в библиотеку. Согласно документам, этот util «Устанавливает ProjectionMatrix и кватернион перспективного камера, чтобы точно подвести углы произвольного прямоугольника» Анкет Это звучало точно так же, как мне нужно! Если вы внимательно посмотрите на демонстрацию выше, вы можете заметить, что, поскольку перспектива меняется, внешние углы коробки не меняют позицию.
Обновление проекционной матрицы камеры
Способ использования этого UTIL состоит в том, чтобы передать ее камеру, а 3 вектора, представляющие координаты точек, которые будут представлять ваш произвольный прямоугольник.
CameraUtils.frameCorners( camera, bottomLeftCorner, bottomRightCorner, topLeftCorner, false // This boolean is for the argument `estimateViewFrustum` but to be honest I don't quite understand what it means. );
В моей сцене у меня есть геометрия плоскости, используемая для создания 5 сетей, которые составляют мою «коробку». Эта геометрия составляет около 100×100, и каждая сетка, использующая ее, имеет различное положение и вращение в зависимости от того, для какой стороны коробки она используется.
Вот какой -то образец кода, чтобы проиллюстрировать то, о чем я говорю
// Top part of the box planeTop.position.y = 100; planeTop.rotateX(Math.PI / 2); // bottom part of the box planeBottom.rotateX(-Math.PI / 2); // Back of the box planeBack.position.z = -50; planeBack.position.y = 50; // Right side of the box planeRight.position.x = 50; planeRight.position.y = 50; planeRight.rotateY(-Math.PI / 2); // Left side of the box planeLeft.position.x = -50; planeLeft.position.y = 50; planeLeft.rotateY(Math.PI / 2);
Учитывая эти позиции, мы можем создать векторы, чтобы представлять точки, которые мы хотим использовать для нашей камеры:
let bottomLeftCorner = new THREE.Vector3(); let bottomRightCorner = new THREE.Vector3(); let topLeftCorner = new THREE.Vector3(); bottomLeftCorner.set(-50.0, 0.0, -20.0); bottomRightCorner.set(50.0, 0.0, -20.0); topLeftCorner.set(-50.0, 100.0, -20.0);
NoteMleftCorner Вектор имеет x позиция -50 в соответствии с x Координата Planeleft , a y позиция 0, чтобы соответствовать положению y Самолетный боттом Какое значение по умолчанию равно 0, а z Положение -20, чтобы иметь немного глубины, но не слишком много.
Мне потребовалось некоторое время, чтобы понять, как выбрать координаты моих векторов, чтобы получить эффект, который я хотел, но этот GIF очень помог:
Когда вы меняете координаты векторов, камера меняет положение и ориентацию, чтобы создать эти углы.
Это была только одна часть решения, однако, вторая часть произошла случайно. 😂
OrbitControls
Как только мне удалось получить правильные координаты для моих векторов и использовать FrameCorners () Util, положение камеры подгоняло правильный прямоугольник, но при попытке изменить перспективу отслеживанием лица, происходило что -то странное.
Хотел бы я записать это в то время, чтобы я мог показать вам, что я имею в виду Но я все равно попытаюсь объяснить это.
В демонстрации в начале этого поста вы можете видеть, что независимо от того, как меняется перспектива, задний плоскость всегда параллельна мне. Что случилось, когда я использовал FrameCorners () Это то, что эта плоскость вращалась, поэтому положение Z вектора менялась, что вообще не дало реалистичного эффекта.
Немного похоже на GIF ниже Но представьте, что это происходит только с одной стороны:
До тех пор, пока это называется «Долли зум»!
Чтобы попытаться отладить это, я подумал, что, возможно, использование OrbitControls поможет, позволить мне вращаться вокруг моей сцены и, возможно, использовать помощника камеры, чтобы посмотреть, что происходит, но вместо этого это просто исправило мою проблему!
Только добавив пусть orbitcontrols (камера, рендерер. domelement); Теперь я смог изменить перспективу сцены без вращения задней плоскости, что сделало ее намного более реалистичным!
То, что произошло дальше, это чистая лень … Я мог бы рассмотреть глубже в том, как OrbitControls работают, чтобы точно выяснить, какую часть мне нужна, но вместо этого, чтобы сэкономить время (в конце концов, это только побочный проект), я сделал несколько обновлений непосредственно в Orbitcontrols.js файл.
Я обнаружил, где функция HandlemouseMoverotate был, дублировал его и назвал новый HandlefaceMoverotate обрабатывать движения лица. Я немного изменил его, чтобы получить координаты лица вместо координат мыши, и TADAAA !! Это сработало! 🎉
Следующие шаги
Я хотел бы создать еще несколько сцен, и у меня есть идея подтолкнуть этот проект немного дальше Но я чувствую, что мне нужен отдохнуть от этого прямо сейчас.
Когда я провожу слишком много времени, пытаясь отлаживать побочный проект, он иногда устраняет удовольствие от него. Мне нужно оставить его на стороне на некоторое время и вернуться к нему, когда я чувствую себя взволнованным, чтобы снова работать над этим. 😊
А пока не стесняйтесь проверять код .
Оригинал: “https://dev.to/devdevcharlie/making-an-interactive-digital-frame-with-head-tracking-using-three-js-and-tensorflow-js-5dfo”