Основываясь на команде-победителе Tokopedia Web Hackathons 2020, речь идет о деталях 360 View, которые создаются на мероприятии.

Как дела?

Вы когда-нибудь спрашивали себя, если вы покупаете товары через Интернет, вы хотите знать мелкие детали этих товаров? Например, если вы покупаете телевизор, знаете ли вы, где разъемы для питания, подключения HDMI? Все это будет гарантировано, когда товар прибудет к вам, чтобы вы могли проверить его самостоятельно.

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

Итак, чтобы решить проблему. Мы можем применить 360 View с React!

Что это?

Обзор 360 ° - это функция для просмотра продукта, управляемая пользователем. Единственная цель - избавить от ощущения от просмотра продукта лично.

Как творить самостоятельно?

Мы используем одну из библиотек React.js под названием react-3d-viewer. С помощью библиотеки вы можете добавить компонент Viewer на основе используемой объектной модели и поместить его в свой код.

Например, в наших продуктах мы хотим продемонстрировать продукт с расширением .mtl, поэтому мы используем MTLModel для включения средства просмотра.

<MTLModel
   src={src}
   mtl={mtl}
   texPath={texPath}
   enableZoom={false}
   position={position}
   rotation={rotation}
>
   <AmbientLight color={0xffffff} />
</MTLModel>

Итак, в этом фрагменте вы также увидите внутри программы просмотра под названием AmbientLight. Как следует из названия, он освещает модель, чтобы пользователь мог ее четко видеть. Вьювер также доступен для моделей с расширениями .obj, .dae. Доступен даже .json!

Интересно! Но в чем уловка?

Создать программу просмотра для реализации в вашем веб-приложении не так сложно, как вы думаете. Но главное - как найти модель. Если вы занимаетесь личными проектами, вы можете искать модели в Интернете (Free3d, CGTrader). В противном случае для компании вы должны заплатить за модель или даже разработать свою собственную модель для просмотра пользователями.

Заключение

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

Спасибо всем за то, что прочитали это. Наслаждайтесь 2021 годом!