3d-viewer/app/components/Map.tsx

41 lines
927 B
TypeScript

"use client";
import { useContext, useEffect, useRef } from "react";
import { SceneView } from "../three/SceneView";
import {
SceneViewContext,
SceneViewContextType,
} from "../providers/scene-view-provider";
export function Map() {
const divRef = useRef<HTMLDivElement>(null);
const { setSceneView } = useContext(SceneViewContext) as SceneViewContextType;
useEffect(() => {
let ignore = false;
if (!divRef.current) return;
async function loadScene() {
if (divRef.current) {
const _sceneView = await SceneView.create(divRef.current, "20");
if (_sceneView) {
setSceneView(_sceneView);
}
}
}
if (!ignore) {
loadScene();
}
return () => {
ignore = true;
};
}, [divRef]);
return (
<div className="w-full h-full flex flex-col justify-center">
<div className="w-full h-full" ref={divRef}></div>
</div>
);
}