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();
}, []);
}

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

这是我正在关注的链接。此链接上的示例显示ArchicalEmbed作为构造函数初始化查看器，然后在页面上显示它。

下面是Archilogic的代码沙盒示例。

Answer 1

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

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

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

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 />;
}