Почему не отображается 3D модель?
Добрый день!
Не могу подключить модуль Three.js подскажите в чем проблема.
Файлы Three.js находятся в папке static
но модель не загружается в консоли браузера ошибка
Скрипт для отображения модели
<script type="module"> import * as THREE from "{% static '/main/js/three.module.js' %}"; import { GLTFLoader } from "{% static '/main/bibleotec/GLTFLoader.js' %}"; import { OrbitControls } from "{% static 'main/jsm/controls/OrbitControls.js' %}"; function loadModel(modelId) { var modelPath; // Определение пути к модели на основе переданного идентификатора if (modelId === "model1") { modelPath = "{{ STATIC_URL }}/models/GLTF/33_1/1.1/scene.gltf"; } else if (modelId === "model2") { modelPath = "{{ STATIC_URL }}models/other_model.gltf"; } console.log("Model Path:", modelPath); const canvas = document.getElementById("model-canvas"); const renderer = new THREE.WebGLRenderer({ canvas }); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, canvas.width / canvas.height, 0.1, 1000 ); camera.position.z = 5; const loader = new GLTFLoader(); loader.load(modelPath, function (gltf) { scene.add(gltf.scene); }); const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(10, 10, 10); scene.add(directionalLight); const controls = new OrbitControls(camera, renderer.domElement); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); } // Загрузка модели при загрузке страницы window.onload = function () { const urlParams = new URLSearchParams(window.location.search); const modelId = urlParams.get("model"); if (modelId) { loadModel(modelId); } }; </script> |
<script type="module"> import * as THREE from "{% static '/main/js/three.module.js' %}"; import { GLTFLoader } from "{% static '/main/bibleotec/GLTFLoader.js' %}"; import { OrbitControls } from "{% static 'main/jsm/controls/OrbitControls.js' %}"; function loadModel(modelId) { var modelPath; // Определение пути к модели на основе переданного идентификатора if (modelId === "model1") { modelPath = "{{ STATIC_URL }}/models/GLTF/33_1/1.1/scene.gltf"; } else if (modelId === "model2") { modelPath = "{{ STATIC_URL }}models/other_model.gltf"; } console.log("Model Path:", modelPath); const canvas = document.getElementById("model-canvas"); const renderer = new THREE.WebGLRenderer({ canvas }); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 75, canvas.width / canvas.height, 0.1, 1000 ); camera.position.z = 5; const loader = new GLTFLoader(); loader.load(modelPath, function (gltf) { scene.add(gltf.scene); }); const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(10, 10, 10); scene.add(directionalLight); const controls = new OrbitControls(camera, renderer.domElement); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); } // Загрузка модели при загрузке страницы window.onload = function () { const urlParams = new URLSearchParams(window.location.search); const modelId = urlParams.get("model"); if (modelId) { loadModel(modelId); } }; </script>
и сама ошибка в консоли браузера...
model_viewer/:1 Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". |
model_viewer/:1 Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
Дополнительно:
ну так открой свой "Скрипт для отображения модели" и посмотри что в итоге в нём отрендерилось после django
Ответы:
Подозрительно выглядит, что у вас в коде одни пути относительные, а другие абсолютные. Причём, с общим префиксом, что дополнительно наводит на мысль об ошибке.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы определить причину того, что 3D модель не отображается на вашем сайте, следует рассмотреть несколько возможных проблем и способов их решения:
1. Проверьте путь к файлу с 3D моделью: убедитесь, что путь к файлу указан правильно и файл доступен для загрузки. Проверьте также расширение файла - оно должно быть поддерживаемым форматом для отображения 3D моделей.
if (file_exists('path/to/3d-model-file.obj')) { // код загрузки 3D модели } else { echo 'Файл с 3D моделью не найден'; }
2. Убедитесь, что используемый 3D модельный просмотрщик поддерживается вашим браузером: не все браузеры поддерживают все форматы 3D моделей. Проверьте совместимость браузера с форматом 3D модели.
3. Проверьте наличие ошибок в консоли браузера: откройте консоль разработчика в браузере и посмотрите наличие ошибок при загрузке 3D модели. Это может помочь в определении проблемы.
4. Проверьте правильность использования скриптов и библиотек для отображения 3D модели: убедитесь, что скрипты и библиотеки, необходимые для отображения 3D модели, подключены правильно и работают корректно.
5. Проверьте наличие необходимых ресурсов для отображения 3D модели: убедитесь, что все текстуры, материалы и другие ресурсы, необходимые для отображения 3D модели, доступны и загружены.
Следуя этим рекомендациям, вы сможете определить и исправить причину проблемы с отображением 3D модели на вашем сайте.