个人中心
gpt4 book ai didi

javascript - 无法解析模块说明符三

转载 作者：行者123 更新时间：2023-12-02 16:10:34 24 4
gpt4 key购买 nike

我正在尝试使用 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();

我在 HTML 中包含了我的 js 文件:

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

这是我的文件夹结构:

enter image description here

最佳答案

你需要向浏览器提供“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>

关于javascript - 无法解析模块说明符三，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68160473/

24 4 0
文章推荐： c# - Byte[] 在 REST API 中作为 base64 返回
文章推荐： sql - 在 SQLITE 中使用窗口函数
文章推荐： angular - 将 ng-template 传递给子组件
文章推荐： jq - 更新运算符在 JQ 中产生空对象
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com