Я написал демонстрационный зал обуви с углом обзора 720° для Hongxing Erke.

Эта статья участвовала в мероприятии Haowen Convocation Order,Нажмите, чтобы просмотреть: двойные заявки на вход и сервер, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов!

Недавно, поскольку Hongxing Erke пожертвовала 50 миллионов материалов Хэнаню, действительно много пользователей сети много плакали.Обычные компании, жертвующие 50 миллионов, могут не иметь такого сочувствия, но, прочитав предысторию Hongxing Erke, я обнаружил, что это действительно впечатляющий Сад. Доход Hongxing Erke в 2020 году составляет 2,8 млрд, но прибыль представляет собой убыток в размере 200 млн. Даже официальный аккаунт Weibo не хочет открывать членство. В этом случае смело пожертвовать 50 млн, что действительно сломано.

Пользователи сети также называют Хунсин Эрке, особенно им нравятся сбережения, которые старшее поколение копило копейки, бережно храня в железной коробке. Как только я услышал, что это нужно Родине, я сразу достал железный ящик и отдал его тебе. Пусть на самые дорогие туфли, достал пару 249.

Затем я зашел на официальный сайт Hongxing Erke, чтобы посмотреть его обувь.

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

Совпав с выходными, я отправился в ближайший Hongxing Erke, чтобы посмотреть. Купил пару обуви 136 (очень дешево, главное комфорт).

После того, как я купил его, я подумал про себя, что, как и у тех Ади и Найк в ядовитом приложении, есть онлайн-просмотр 360 °, я подумал, могу ли я сделать это и для Хунсин Эрке, в качестве скудного вклада технического специалиста.

действие

Имея эту идею, я немедленно начал действовать. Затем я примерно резюмирую следующие шаги:

1. Моделирование

2. Создайте сцену с Thee.js

3. Импортируйте модель

4. Добавьте контроллер Three.js

Поскольку я уже изучил некоторые связанные знания о Three.js, он довольно базовый для отображения после того, как у меня есть модель, поэтому самое хлопотное — это моделирование, потому что нам нужно поместить трехмерную вещь в компьютер. Для 2-мерных объектов мы все знаем, что если вы хотите поместить их на компьютер, это очень просто, просто используйте камеру, чтобы сделать снимок, но если вы хотите просмотреть 3-мерные объекты на компьютере, это другой. У него есть дополнительное измерение. Величина увеличения действительно умножалась, поэтому я начал просматривать различные источники, чтобы увидеть, как можно построить модель объекта.

После проверки большого количества информации я хочу построить модель обуви.В итоге есть два режима.

1. Фотограмметрия: Делая снимок, он преобразуется в 3D-модель с помощью чистого алгоритма, также известного как монокулярная реконструкция в графике.

2. Лидарное сканирование: Сканируется лидаром.В последнем видео студента Хе тоже упоминается таким способом сканировать облако точек.

Поместите схему, которую я обобщил, большинство из которых являются иностранными веб-сайтами/инструментами.

В начале результатов поиска большинство людей упомянули 123D Catch, а также просмотрели много видео, говоря, что он строит модели быстро и реалистично, но после дальнейшего изучения я обнаружил, что он, кажется, работает с 2017 года. Слияние было интегрированным. Интегрированный ReMake должен быть платным, и я не стал продолжать из соображений стоимости. (В конце концов, это просто демонстрационная попытка)

Позже я нашел программное обеспечение под названием Polycam, и готовый продукт работает очень хорошо.

Но когда я решил использовать его, обнаружил, что ему нужен лазер.радарСканер (LiDAR), который необходимо использовать на iPhone 12 pro или более поздней версии.

В конце концов, я выбрал Reality Capture для создания модели.Он может синтезировать модель с помощью нескольких изображений.Посмотрев несколько видеороликов станции B, я чувствую, что его эффект рендеринга изображения также хорош, но он поддерживает только окна и работает в памяти. , Мне нужно 8 г. В это время я переехал с моего компьютера с Windows 7 лет назад ... Также неожиданно обнаружить, что я не ожидал, что он все еще будет в эксплуатации.

моделирование

Давайте начнем официальный контент, главный герой — туфли, которые я купил на этот раз (пара в начале)

Затем мы начали съемку, сначала я сделал случайный набор фотографий вокруг туфель, но нашел, что модель действительно неудовлетворительна...

Позже я также использовал форму белого экрана и добавил слой фона.Позже я обнаружил, что это все еще не работает.Приложение распознало номера фона за ним.

Наконец... С помощью Nanxi я сделал фоновое изображение P белым.

Huangtian окупается, конечный эффект неплохой, вышла базовая модель облака точек. (Ощущение неплохое, есть ощущение черной техники в фильме)

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

Для того, чтобы модель выглядела максимально идеально, на тестирование модели ушло в общей сложности один день.Из-за ракурса съемки и поколения модели я сделал в общей сложности около 1G снимков и около 500 снимков (из-за к непониманию на начальном этапе).Как тюнинговать модель, так много чего перепробовал.)

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

Создайте приложение

Он в основном состоит из трех частей (создание сцены, загрузка модели, добавление контроллера).

1. Создайте 3D-сцену

Сначала загружаем Three.js

<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.129.0/build/three.module.js';
</script>

затем создайтеWebGL渲染器

const container = document.createElement( 'div' );
document.body.appendChild( container );

let renderer = new THREE.WebGLRenderer( { antialias: true } );
container.appendChild( renderer.domElement );

Будет добавлена ​​еще одна сцена и камера

let scene = new THREE.Scene();

синтаксис камерыPerspectiveCamera(fov, aspect, near, far)

// 设置一个透视摄像机
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 1000 );
// 设置相机的位置
camera.position.set( 0, 1.5, -30.0 );

Добавляйте сцены и камеры вWebGL渲染器середина.

renderer.render( scene, camera );

2. Загрузка модели

Поскольку наша экспортируемая модель в формате OBJ, объем очень большой, я сжал ее в форматы gltf и glb один за другим, Three.js уже написал за нас загрузчик GLTF, и мы можем использовать его напрямую.

// 加载模型
const gltfloader = new GLTFLoader();
const draco = new DRACOLoader();
draco.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
gltfloader.setDRACOLoader(draco);
gltfloader.setPath('assets/obj4/');
gltfloader.load('er4-1.glb', function (gltf) {
  gltf.scene.scale.set(0.2, 0.2, 0.2); //设置缩放
  gltf.scene.rotation.set(-Math.PI / 2, 0, 0) // 设置角度
  const Orbit = new THREE.Object3D();
  Orbit.add(gltf.scene);
  Orbit.rotation.set(0, Math.PI / 2, 0);

  scene.add(Orbit);
  render();
});

Но открытие нашей страницы через приведенный выше код будет темным, это потому, что наше освещение не было добавлено. Итак, мы пошли дальше и добавили луч света, чтобы осветить нашу обувь.

// 设置灯光
const directionalLight = new THREE.AmbientLight(0xffffff, 4);
scene.add(directionalLight);
directionalLight.position.set(2, 5, 5);

Теперь мы можем ясно видеть нашу обувь, как если бы мы могли видеть свет в темноте, но в настоящее время мы не можем управлять ею с помощью мыши или жестов, нам нужно использовать наш контроллер Three.js, чтобы помочь нам контролировать угол наша модель.

3. Добавьте контроллер

const controls = new OrbitControls( camera, renderer.domElement );
controls.addEventListener('change', render );
controls.minDistance = 2; // 限制缩放
controls.maxDistance = 10;
controls.target.set( 0, 0, 0 );  // 旋转中心点
controls.update();

На этот раз мы можем посмотреть на нашу обувь со всех сторон.

Готово!

Адрес онлайн-опыта:resume.mdedit.online/erke/

Адрес с открытым исходным кодом (включая инструменты, рабочие шаги и актуальную демонстрацию):GitHub.com/flower1995116/…

Последующее планирование

Из-за ограниченного времени (на это ушел целый день и выходные) я так и не получил очень совершенную модель.Я продолжу изучать реализацию этой штуки в будущем, а потом изучу, можно ли использовать автоматизированный метод реализовано, от съемки до модели.Покажите, и на самом деле, после того, как у нас есть модель, это недалеко от пробной обуви AR.Если вы заинтересованы или у вас есть лучшие идеи и предложения, добро пожаловать в общение со мной.

Наконец, я очень благодарен Nanxi за то, что она отказалась от некоторых вещей, изначально запланированных для помощи в съемке и постобработке, а также за то, что целый день сопровождала меня в работе с моделью. (Стрелять в ограниченных условиях действительно сложно.)

И я желаю, чтобы Hongxing Erke могла стать долгосрочным предприятием, продолжать вводить новшества, производить больше и лучше спортивной одежды и поддерживать нынешнее состояние, одобряемое всем народом.

приложение

Также официально предоставляются несколько полученных навыков стрельбы.

1. Не ограничивайте количество изображений, RealityCapture может обрабатывать любое количество изображений.

2. Используйте изображения с высоким разрешением.

3. Каждая точка поверхности сцены должна быть хорошо видна как минимум на двух качественных изображениях.

4. Двигайтесь вокруг объекта по кругу во время фотосъемки.

5. Не поворачивайтесь более чем на 30 градусов.

6. Делая снимок всего объекта, перемещая его и обращая внимание на детали, убедитесь, что все они примерно одинакового размера.

7. Полное объемное звучание. (Не делайте полукруг, и все кончено)

Оглядываясь назад на предыдущие высоко оцененные статьи автора, вы можете получить больше!

• Список книг по начальному обучению на 2021 год - Дорога к саморазвитию:570+Хвалить

• Говоря о переднем водяном знаме от растрескивания веб-сайта дизайна (подробный учебник):790+Нравится

• В этой статье вы шаг за шагом раскрываете тайну «загрузки файла».:140+Нравится

• 10 междоменных решений (с окончательным трюком):940+Нравится

Эпилог

❤️Подписаться + Нравится + Избранное + Комментарий + Переслать ❤️, оригинальность - это не просто, поощряйте автора создавать лучшие статьи

Обратите внимание на публичный аккаунт秋风的笔记, внешний общедоступный аккаунт, посвященный предварительным интервью, разработке и открытому исходному коду.