Failed to resolve module specifier thre

Question

I am trying to work on the Three.js and now this time in three modules. I am using express as a backend server.

I am constantly getting error of:

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". in my console.

This is the backend code of 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}`);
});

and this is my js file:

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();

I included my js file in HTML with:

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

This is my folder structure:

Answer 1

You need to provide "importmap" to the browser, in index.html add script type importmap before

<!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>

Failed to resolve module specifier thre

Question

1 answers

solution1
5 2021-10-15 22:41:42

Failed to resolve module specifier thre

Question

1 answers

solution1 5 2021-10-15 22:41:42

solution1
5 2021-10-15 22:41:42