При встраивании Autodesk viewer в модальное окно интерфейс viewer оказывается за рамками окна
Прошу помочь победить проблему с которой бьюсь уже не один месяц! Autodesk viewer улетает далеко за пределы модального окна bootstrap 5.3
<?php foreach ($models as $model): ?>
<div class="modal fade" id="staticBackdrop-<?=$model['id']?>" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel-<?=$model['id']?>" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel-<?=$model['id']?>">
<?= htmlspecialchars($model['name']) ?>
</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
</div>
<div class="modal-body">
<div id="forgeViewer-<?=$model['id']?>" data-model-urn="<?= htmlspecialchars($model['urn']) ?>"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('DOMContentLoaded event fired');
$('[id^=staticBackdrop-]').on('shown.bs.modal', function () {
console.log('Modal window shown');
var canvasId = $(this).find('div[id^=forgeViewer-]').attr('id');
var canvas = document.getElementById(canvasId);
if (!canvas) {
console.error('Canvas element not found');
return;
}
canvas.parentElement.classList.add("viewer-container");
canvas.style.width = '100%';
canvas.style.height = '100%';
console.log('Canvas dimensions set on modal open:', canvas.style.width, canvas.style.height);
async function initializeViewer() {
try {
const token = '<?=$adesk_token?>';
if (!token) {
console.error('Failed to fetch token');
return;
}
var options = {
env: 'AutodeskProduction2',
api: 'streamingV2',
getAccessToken: (onTokenReady) => {
console.log('AccessToken fetched:', token);
onTokenReady(token, 3600);
}
};
var viewerConfig = {
disabledExtensions: { measure: false, viewCubeUi: true },
loadingIconImage: 'https://developer.api.autodesk.com/viewingservice/v1/viewers/v7/viewer/loading.gif',
};
console.log('Initializing Autodesk.Viewing');
Autodesk.Viewing.Initializer(options, function() {
console.log('Autodesk.Viewing.Initializer started');
var viewer = new Autodesk.Viewing.GuiViewer3D(canvas, viewerConfig);
window.viewer = viewer;
var startedCode = viewer.start();
console.log('Viewer started with code:', startedCode);
viewer.setTheme('light-theme');
viewer.resize();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
var documentId = canvas.dataset.modelUrn;
if (!documentId) {
console.error('Model URN is not defined');
return;
}
console.log('Loading document:', documentId);
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
console.log('Initialization complete');
});
function onDocumentLoadSuccess(viewerDocument) {
console.log('Document load success');
var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
console.log('Default model obtained:', defaultModel);
viewer.loadDocumentNode(viewerDocument, defaultModel, onLoadModelSuccess, onLoadModelError);
console.log('Loading default model');
}
function onDocumentLoadFailure(errorCode) {
console.error('Failed fetching Forge manifest with error code:', errorCode);
}
function onLoadModelSuccess() {
console.log('Model loaded successfully');
}
function onLoadModelError(errorCode) {
console.error('Error loading model with error code:', errorCode);
}
$('.btn-close, .btn-secondary').on('click', function(event) {
console.log('Close button clicked');
$('#staticBackdrop-' + canvasId.split('-')[1]).modal('hide');
viewer.tearDown();
viewer.finish();
viewer.navigation.setZoomTowardsPivot(100, true);
viewer.navigation.setPivotPoint(viewer.model.getBoundingBox().center().clone());
});
} catch (error) {
console.error('Error initializing viewer:', error);
}
}
initializeViewer();
});
});
</script>
HTML код из контекстного меню
<!-- Модальные окна -->
<div class="modal fade" id="staticBackdrop-1" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel-1">
Усадьба Риф И-1 </h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
</div>
<div class="modal-body">
<div id="forgeViewer-1" data-model-urn="urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bXlfcHJvamVjdHMvJUQwJTk4MTEuZHdmeA"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop-2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel-2" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel-2">
Усадьба Риф И-2 </h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
</div>
<div class="modal-body">
<div id="forgeViewer-2" data-model-urn="urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bXlfcHJvamVjdHMvJUQwJTk4MjIuZHdmeA"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop-3" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel-3" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel-3">
Усадьба Риф И-3 </h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
</div>
<div class="modal-body">
<div id="forgeViewer-3" data-model-urn="urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bXlfcHJvamVjdHMvJUQwJTk4MzMzLmR3Zng"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop-4" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel-4" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel-4">
Усадьба Риф И-4 </h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
</div>
<div class="modal-body">
<div id="forgeViewer-4" data-model-urn="urn:placeholder"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop-10" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel-10" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel-10">
Усадьба Риф И-5 </h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
</div>
<div class="modal-body">
<div id="forgeViewer-10" data-model-urn="urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bXlfcHJvamVjdHMvJUQwJTk4LTUuZHdmeA"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop-5" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel-5" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel-5">
Ресторанно-развлекательный комплекс "Морской круиз" </h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
</div>
<div class="modal-body">
<div id="forgeViewer-5" data-model-urn="urn:placeholder"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop-6" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel-6" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel-6">
Аква-парк "Жемчужина Рифа" </h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
</div>
<div class="modal-body">
<div id="forgeViewer-6" data-model-urn="urn:placeholder"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop-7" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel-7" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel-7">
Здание администрации ЖРК "Риф" </h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
</div>
<div class="modal-body">
<div id="forgeViewer-7" data-model-urn="urn:placeholder"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop-8" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel-8" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel-8">
Таун хаус для проживания персонала </h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
</div>
<div class="modal-body">
<div id="forgeViewer-8" data-model-urn="urn:placeholder"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop-9" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel-9" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel-9">
Магазин "Дары Тритона" с вертолетной площадкой на кровле </h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
</div>
<div class="modal-body">
<div id="forgeViewer-9" data-model-urn="urn:placeholder"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('DOMContentLoaded event fired');
$('[id^=staticBackdrop-]').on('shown.bs.modal', function () {
console.log('Modal window shown');
var canvasId = $(this).find('div[id^=forgeViewer-]').attr('id');
var canvas = document.getElementById(canvasId);
if (!canvas) {
console.error('Canvas element not found');
return;
}
canvas.parentElement.classList.add("viewer-container");
canvas.style.width = '100%';
canvas.style.height = '100%';
console.log('Canvas dimensions set on modal open:', canvas.style.width, canvas.style.height);
async function initializeViewer() {
try {
const token = 'eyJhbGciOiJSUzI1NiIsImtpZCI6IlhrUFpfSmhoXzlTYzNZS01oRERBZFBWeFowOF9SUzI1NiIsInBpLmF0bSI6ImFzc2MifQ.eyJzY29wZSI6WyJjb2RlOmFsbCIsImRhdGE6d3JpdGUiLCJkYXRhOnJlYWQiLCJidWNrZXQ6Y3JlYXRlIiwiYnVja2V0OmRlbGV0ZSIsImJ1Y2tldDpyZWFkIl0sImNsaWVudF9pZCI6IlRtbXNMc1dMZzNpVDdYcHRhS2NQUWJGc1lQSmIxekk1RVBTR25NaUpOZkRDYnRHeSIsImlzcyI6Imh0dHBzOi8vZGV2ZWxvcGVyLmFwaS5hdXRvZGVzay5jb20iLCJhdWQiOiJodHRwczovL2F1dG9kZXNrLmNvbSIsImp0aSI6ImMxa2RSUFVFNzdaS1RmREZjT0g0SGFuM2Y4WXNWd1ExMmp2dmRGbFpkcXFsWU5ybWVkVlI3aDBERWRubWdVdFEiLCJleHAiOjE3NDg2ODIyNTB9.K260XkPkW3vPCc50xE119yLbiOgooMPorYWVMzKJq-S3FdR7EdO14xHMunRuq52AdpvC3ODI1SZNHbEDJX8GCTAIEZ9HHAiH512LQttQBC4f4MWOpFq7DB1_aLfhNdbihjCYZpMAr9FVi8wSA1Y56tj-0Vla_b7Io_RB1DM6MYXgYI_UDajr8uDpBVlrfyUM14zuYNDKV-ijwzJij124QboQhko4Z34HM7yk-Z1k6LOdBcgrO0CoCdiIaAKJvZTQng3aIC0E7KUQA5aExuaAtOGpS5U_mQPYDZlx7El-QbwuA8JB2qc3sxFkXSiihmXmYNki4NbT_FJU2ChM80Fi0g';
if (!token) {
console.error('Failed to fetch token');
return;
}
var options = {
env: 'AutodeskProduction2',
api: 'streamingV2',
getAccessToken: (onTokenReady) => {
console.log('AccessToken fetched:', token);
onTokenReady(token, 3600);
}
};
var viewerConfig = {
disabledExtensions: { measure: false, viewCubeUi: true },
loadingIconImage: 'https://developer.api.autodesk.com/viewingservice/v1/viewers/v7/viewer/loading.gif',
};
console.log('Initializing Autodesk.Viewing');
Autodesk.Viewing.Initializer(options, function() {
console.log('Autodesk.Viewing.Initializer started');
var viewer = new Autodesk.Viewing.GuiViewer3D(canvas, viewerConfig);
window.viewer = viewer;
var startedCode = viewer.start();
console.log('Viewer started with code:', startedCode);
viewer.setTheme('light-theme');
viewer.resize();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
var documentId = canvas.dataset.modelUrn;
if (!documentId) {
console.error('Model URN is not defined');
return;
}
console.log('Loading document:', documentId);
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
console.log('Initialization complete');
});
function onDocumentLoadSuccess(viewerDocument) {
console.log('Document load success');
var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
console.log('Default model obtained:', defaultModel);
viewer.loadDocumentNode(viewerDocument, defaultModel, onLoadModelSuccess, onLoadModelError);
console.log('Loading default model');
}
function onDocumentLoadFailure(errorCode) {
console.error('Failed fetching Forge manifest with error code:', errorCode);
}
function onLoadModelSuccess() {
console.log('Model loaded successfully');
}
function onLoadModelError(errorCode) {
console.error('Error loading model with error code:', errorCode);
}
$('.btn-close, .btn-secondary').on('click', function(event) {
console.log('Close button clicked');
$('#staticBackdrop-' + canvasId.split('-')[1]).modal('hide');
viewer.tearDown();
viewer.finish();
viewer.navigation.setZoomTowardsPivot(100, true);
viewer.navigation.setPivotPoint(viewer.model.getBoundingBox().center().clone());
});
} catch (error) {
console.error('Error initializing viewer:', error);
}
}
initializeViewer();
});
});
</script>
введите сюда код
Ответы (1 шт):
Автор решения: Борис Пелевин
→ Ссылка
Разобрался, оказалось забыл прописать CSS стили Autodesk viewer.
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">