Добрый день!
Не могу подключить модуль 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>
и сама ошибка в консоли браузера...
model_viewer/:1 Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".