Блог

Главная - Вопросы по программированию - Не удалось разрешить описатель модуля thre

Не удалось разрешить описатель модуля thre

#javascript #express #ecmascript-6 #three.js #webgl

Вопрос:

Я пытаюсь работать над Three.js и теперь на этот раз в трех модулях. Я использую express в качестве внутреннего сервера.

Я постоянно получаю ошибки:

Неперехваченная ошибка типа: Не удалось разрешить спецификатор модуля «три». Относительные ссылки должны начинаться с»/»,». / » или «../». в моей консоли.

Это внутренний код app.js

  "use strict";

 const express = require("express");
 const app = express();
 const path = require("path");

 const port = process.env.PORT || 9000;

 app.use(express.static(__dirname   "/public"));

 app.use("/build/", express.static(path.join(__dirname, "node_modules/three/build")));
 app.use("/jsm/", express.static(path.join(__dirname, "node_modules/three/examples/jsm")));

 app.get("/", (req, res) => {
 response.send("Connected successfully");
});

app.listen(port, (error) => {
 if (error) {
  console.warn(`${error} occured while starting server`);
  return;
 }
 console.log(`listening successfully to the port ${port}`);
});

а это мой файл js:

 import * as THREE from "/build/three.module.js";
import { OrbitControls } from "/jsm/controls/OrbitControls.js";
import Stats from "/jsm/libs/stats.module.js";

let scene, camera, renderer;

function main() {
 scene = new THREE.Scene();

 const windowsWidth = window.innerWidth;
 const windowsHeight = window.innerHeight;

 renderer = new THREE.WebGLRenderer({ antialias: true });
 renderer.setSize(windowsWidth, windowsHeight);
 document.body.appendChild(renderer.domElement);

 const aspect = windowsWidth / windowsHeight;
 camera = new THREE.PerspectiveCamera(90, aspect, 0.1, 1000);
 camera.position.z = 2;
 // camera.position.set(-900, -200, -900);

 const controls = new OrbitControls(camera, renderer.domElement);
 controls.addEventListener("change", renderer);

 let materialArrays = [];

 let textureImages = [
   "meadow_ft.jpg",
   "meadow_bk.jpg",
   "meadow_up.jpg",
   "meadow_dn.jpg",
   "meadow_rt.jpg",
   "meadow_lf.jpg",
 ];

 for (let i = 0; i < 6; i  ) {
 let texture = new THREE.TextureLoader().load(
   `../images/skyboxday1/greenery/${textureImages[i]}`
 );
 let material = new THREE.MeshBasicMaterial({ map: texture });
 materialArrays.push(material);
}

const geometry = new THREE.boxGeometry(10000, 10000, 10000);

let skyBox = new THREE.Mesh(geometry, materialArrays);
scene.add(skyBox);
function draw() {
  renderer.render(scene, camera);
  requestAnimationFrame(draw);
  }
 }

main();

Я включил свой файл js в HTML с:

 <script type="module" src="./client.js"></script>

Это моя структура папок:

введите описание изображения здесь

Ответ №1:

Вам необходимо указать «importmap» в браузере, в index.html добавьте тип сценария importmap перед

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>deore.in</title>    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            overflow: hidden;
            margin: 0px;
        }
    </style>
    <script type="importmap">
        {
            "imports": {
                "three": "./build/three.module.js",
                "three/examples/jsm/controls/OrbitControls":"./jsm/controls/OrbitControls.js",
                "three/examples/jsm/libs/stats.module":"./jsm/libs/stats.module.js",
            }
        }
    </script>
</head>

<body>
    <script type="module" src="client.js"></script>
</body>

</html>

Комментарии:

1. На данный момент не все браузеры поддерживают импортные карты (см. caniuse.com/import-maps ), но вы можете использовать эту прокладку: github.com/guybedford/es-module-shims чтобы преодолеть это ограничение.

Метки: