Archilogic 将平面图嵌入下一个 js 项目

Question

我正在尝试使用 Archilogic 嵌入模块在我的 next.js 项目中显示 3d 平面图。

我正在尝试下面的代码，它说：TypeError: ArchilogicEmbed is not a constructor

import React, { useEffect } from "react";
import dynamic from "next/dynamic";

//import ArchilogicEmbed from "@archilogic/embed-api";

const Archilogic = () => import("@archilogic/embed-api");
const ArchilogicEmbed = dynamic(Archilogic, {
  ssr: false,
});



export default function Dashboard() {
  useEffect(() => {
    async function demo() {
      
      const embedEl = document.getElementById('mapid')
       const embedEl = document.getElementById("mapid");
      const viewer = ArchilogicEmbed(embedEl, {
        transparentBackground: true,
        //presentationMode: PresentationMode.jumpToCameraDefault,
        minimap: false,
        showTitle: false,
        showLogo: false,
        lowResTexturesOnly: false, // prevent hi-res textures from loading, gives a loading-time performance boost at the cost of visual quality
        bookmarksActive: false, // control whether the bookmarks menu should be open or closed
        uiButtons: {
          birdMode: false,
          personMode: false,
          fullscreen: false,
          bookmarkStrip: false,
          share: false,
          help: false,
          presentation: false,
          exportImage: false,
        },
      });

      // await for the viewer embed to be ready
      await viewer.viewerReadyPromise.catch((err) =>
        console.error("viewer couldnt be initialized", err)
      );

      const demoSceneId = <sceneId>;
      const publishableToken = <token>;
      const tokenOptions = { publishableToken };
      await viewer.loadScene(demoSceneId, tokenOptions).catch((err) => {
        // scene couldn't be loaded - it may be private or the ID couldn't be found
        console.error("There was an error loading the scene:", err);
      });
    }

    demo();
  }, []);

}

如何将 ArchilogicEmbed 与 Next.js 一起使用？

Here is the link我在关注。此 link 上的示例显示 ArchilogicEmbed 作为构造函数来初始化查看器，然后将其显示在页面上。

这里是codesandboxexample from Archilogic。

Answer 1

next/dynamic用于动态导入React组件。要动态导入常规 JavaScript 库，您只需使用 ES2020 dynamic import().

您还需要将 publishableToken 选项重命名为 publishableAccessToken，因为这是预期的语法。

import React, { useEffect } from "react";

export default function Dashboard() {
    useEffect(() => {
        async function demo() {
            // Dynamically importing `@archilogic/embed-api`
            const ArchilogicEmbed = (await import("@archilogic/embed-api")).default;
            // Target the `demoId` element
            const embedEl = document.getElementById("demoId");
            const viewer = new ArchilogicEmbed(embedEl, {
                // Your options here
            });

            await viewer.viewerReadyPromise.catch((err) =>
                console.error("viewer couldn't be initialized", err)
            );

            const publishableAccessToken = "<your-token>"; // Replace with your token
            const sceneId = "<your-sceneId>"; // Replace with your scene ID
            await viewer
                .loadScene(sceneId, { publishableAccessToken })
                .catch((err) => {
                    console.error("There was an error loading the scene:", err);
                });
        }

        demo();
    }, []);

    return <div id="demoId"></div>;
}

Answer 2

我能够使用动态导入解决它，这是一种与 juliomalves 在此处建议的方法略有不同的方法。

我用常规导入创建了另一个文件，但在客户端动态调用它。如下：

import React, { useEffect } from "react";
import dynamic from "next/dynamic";

export default function FloorPlan3D() {
  const Map3D = dynamic(() => import("./floorplan"), {
    loading: () => <p>A map is loading</p>,
    ssr: false, // This line is important. It's what prevents server-side render
  });

  return <Map3D />;
}

Archilogic 将平面图嵌入下一个 js 项目

Archilogic embed floor plan with next js project

dynamic-import

reactjs

next.js

archilogic