Всего за 3 простых шага — вы сможете настроить свой веб-сайт и поделиться впечатлениями как о 3D, так и о дополненной реальности.
В связи с высоким спросом на 3D-модели в Интернете. Sketchfab стал основным эталоном по многим причинам, одна из которых связана с подключением 3D средства просмотра к тегу iframe. Я лично создал небольшую библиотеку в GitLab Package, которая позволяет вам легко и просто манипулировать Sketchfab Viewer API.
Знание HTML, CSS или JavaScript не требуется, но рекомендуется для этого проекта. Некоторый опыт работы с такими фреймворками, как React и Next.js, также очень полезен. Это руководство не предназначено для изучения этих технологий.
Начало работы
Создать приложение Next.js
Самый простой способ начать работу с Next.js — использовать create-next-app
. Этот инструмент командной строки позволяет вам быстро приступить к созданию нового приложения Next.js со всеми настройками для вас. Вы можете создать новое приложение, используя стандартный шаблон Next.js или воспользовавшись одним из официальных примеров Next.js. Для начала используйте следующую команду:
- npx create-nextapp@latest
Установите initViewer
При загрузке библиотек в Gitlab необходимо передать authToken, чтобы иметь возможность загрузить пакет.
- В корень вашего проекта добавьте файл
.npmrc
и вставьте следующие строки
@ibisdev:registry https://gitlab.com/api/v4/projects/38973164/packages/npm/ //gitlab.com/api/v4/projects/38973164/packages/npm/:_authToken=JDvMU1iqmtYHNjRgeo8C
- Затем используйте следующую команду:
- npm install @ibisdev/init-viewer
Запустить средство просмотра
В index вашего приложения поместите следующий код
import { initViewer, updateSettings } from "@ibisdev/init-viewer"; import { useEffect, useState } from "react"; export default function Home() { const [viewerReady, setViewerReady] = useState(false); useEffect(() => { const config = { model_uid: "5fcdee479ca049e78a1070e87499b103", container_id: "model_container_id", request_settings: [ { name: "getCameraLookAt", arguments: [], }, ], }; initViewer( config, (data) => { if (data) setViewerReady(true); }, { options: { ui_ar_qrcode: 1 }, } ); }, []); return ( <> <div style={{ width: "100%", height: "100vh", backgroundColor: `${!viewerReady ? "black" : "transparent"}`, }} > <main id="model_container_id"></main> </div> {viewerReady && ( <button onClick={() => { updateSettings("model_container_id", { name: "startAR", arguments: [], }); }} > ARButton </button> )} </> ); }
Сохраните и запустите: npm run dev
Если все прошло хорошо, вы можете увидеть что-то вроде этого
initViewer
Конфигурация
- model_uid: относится к идентификации 3D-модели, ранее загруженной в Sketchfab.
- container_id: относится к идентификатору контейнера тега HTML.
- request_settings: это массив объектов, содержащий 2 свойства. Имя функции и аргументы (если она не принимает аргументов, передать пустой массив) см. в документации
Обратный звонок
- Получает ответ на функции в request_settings и/или updateSettings.
Параметры
- Параметры опций для 3D-просмотра см. в документации
обновить настройки
Получает 2 аргумента. Первый — это строка с идентификатором тега контейнера HTML, а второй — объект, равный объектам в request_settings. Эта функция позволяет вам манипулировать 3D-моделью, не запуская ее снова.
Развертывание
Наиболее распространенный способ создания развертывания наVercel — это отправка кода в репозитории Git.
Дайте мне знать, что вы думаете об этом. Вы можете пинговать меня в Твиттере. Не могу дождаться, чтобы услышать от вас!