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

Question

我正在尝试使用Archilogic嵌入模块在我的next.js项目中显示三维布局。

我正在尝试下面的代码，上面写着：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结合使用？

这是链接，我在跟踪。该链接上的示例显示ArchilogicEmbed作为构造函数初始化查看器，然后在页面上显示它。

这是代码箱阿奇罗格。

Answer 1

我能够使用动态导入来解决这个问题，这与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 />;
}

Answer 2

next/dynamic用于动态导入React组件。要动态导入常规JavaScript库，只需使用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>;
}