Forge Viewer를 사용하여 로컬에 저장된 SVF 파일을 보는 방법은 무엇입니까?
현재 Forge Viewer를 사용하여 브라우저에 로컬로 저장된 SVF 파일을 표시하려는 프로젝트를 진행 중입니다. 나는 이미 다른 접근 방식을 시도했지만 그들 중 어느 것도 작동하지 않는 것 같고 매번 다른 예외가 발생합니다.
다음은 React와 Typescript를 사용하여 수행하는 방법입니다.
뷰어 구성 요소를로드하는 App.tsx입니다.
<div className="col-sm-8 fill">
<ForgeViewer />
</div>
이것은 내 뷰어 구성 요소입니다.
import React from 'react';
import {useEffect} from 'react'
import {initializeViewer} from './viewer-helper';
const ForgeViewer: React.FC = () => {
useEffect(() => {
initializeViewer()
}, [])
return (
<div>
<div id="forgeviewer"></div>
</div>
);
}
export default ForgeViewer
그리고 이것은 뷰어 구성 요소에 대해 작성한 도우미입니다.
const options : Autodesk.Viewing.InitializerOptions = {
doc: './models/small-revit-sample-house/Resource/3D_View/_3D_/_3D_.svf',
env: "Local",
}
export const initializeViewer = () => {
let container: HTMLElement | null;
let viewer: Autodesk.Viewing.GuiViewer3D;
container = document.getElementById('forgeviewer');
if(container !== null){
viewer = new Autodesk.Viewing.GuiViewer3D(container);
}
Autodesk.Viewing.Initializer(options, function () {
//viewer.loadDocumentNode(options.doc, "/public/manifest.json");
//viewer.loadModel(options.doc, onDocumentLoadSuccess, onDocumentLoadFailure);
//Autodesk.Viewing.Document.load(modelURL, onDocumentLoadSuccess, onDocumentLoadFailure);
viewer.start(options.doc);
//loadViewer(modelURL);
});
}
보시다시피 이미 다른 접근 방식을 시도했지만 어느 것도 작동하지 않는 것 같습니다.
1 : viewer.start 함수를 사용하면-> "SVF 처리 중 오류 : 중앙 디렉토리 레코드 끝을 찾을 수 없음"이 표시됩니다.
2 : viewer.loadDocumentNode 사용 i get-> "처리되지 않은 거부 (TypeError) : e.getViewableUrn은 함수가 아닙니다."
3 : viewer.loadModel 사용하기-> "Uncaught (in promise) TypeError : te is undefined"Btw. onDocumentLoadSuccess 함수는 호출되지 않는 빈 함수입니다.
이런 방식으로 일하고 무슨 일이 일어나고 있는지 더 많이 이해할 수 있다면 정말 기쁠 것입니다. :)
답변
start 메서드 또는 loadModel 메서드를 사용하여 사용자 지정 위치에서 SVF를로드 할 수 있습니다 .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css" type="text/css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
#preview {
height: 100%;
}
</style>
<title>Autodesk Forge: Local SVF</title>
</head>
<body>
<div id="preview"></div>
<script>
const MODEL_URL = 'https://petrbroz.s3-us-west-1.amazonaws.com/svf-samples/sports-car/0.svf';
Autodesk.Viewing.Initializer({ env: 'Local' }, async function () {
const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('preview'));
viewer.start(MODEL_URL);
// viewer.loadModel(MODEL_URL);
});
</script>
</body>
</html>발생하는 오류가 React 래퍼와 관련이있을 수 있습니다.
나는 그것을 작동시켰다. 내가 한 방법은 다음과 같습니다. models-folder는 이제 공용 폴더 안에 있습니다 (보안 상 좋지 않지만 내 프로젝트에는 중요하지 않음). 다음과 같이 svf 파일을로드 할 수 있습니다.
Autodesk.Viewing.Initializer(options, function () {
viewer.start( "./models/path/file.svf");
});