Всего за 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.

Параметры

обновить настройки

Получает 2 аргумента. Первый — это строка с идентификатором тега контейнера HTML, а второй — объект, равный объектам в request_settings. Эта функция позволяет вам манипулировать 3D-моделью, не запуская ее снова.

Развертывание

Наиболее распространенный способ создания развертывания наVercel — это отправка кода в репозитории Git.

Дайте мне знать, что вы думаете об этом. Вы можете пинговать меня в Твиттере. Не могу дождаться, чтобы услышать от вас!