加载器路径语法存在问题（无 CDN）/ThreeJs npm node js/相对引用必须以“/”、“./”或

Question

错误： 未捕获的类型错误：无法解析模块说明符“三”。相对引用必须以“/”、“./”或“../”开头。

我已经读过几个关于这个问题的内外问题，但我仍然不太清楚难以沟通的地方在哪里。 我读过一些关于它的文章，很多用户建议使用 CDN，但是通过 npm(?) 安装的意义在哪里，这是我第一次使用模块，我想学习这种方法，但是这个起点并没有让我清楚地明白嘿嘿

无论如何，在加载程序 URL 以“node_modules/...”开头之前，而现在我添加了“/”，尽管理论上我认为不需要，对吗？

正如您所看到的，WebGL 也以相同的方式导入，但它不会导致错误，目前仅导入 GLTFLoader，我还读到不建议从不同的文件夹导入模块，那么为什么要安装节点模块所有包都具有此文件夹层次结构吗？

我的目录截图：

代码：

/* SUPPORT WARN SUPPORT WARN SUPPORT WARN SUPPORT WARN SUPPORT WARN SUPPORT WARN SUPPORT WARN SUPPORT WARN */ 
import WebGL from '/node_modules/three/examples/jsm/capabilities/WebGL.js';

if ( WebGL.isWebGLAvailable() ) {

} else {

    const warning = WebGL.getWebGLErrorMessage();
    document.getElementById( 'container' ).appendChild( warning );

}
/* ________________________________________________________________________________________________________ */ 


/* MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN */
import * as THREE from '/build/three.module.js';


/*
import { DRACOLoader } from '/node_modules/three/examples/jsm/loaders/DRACOLoader.js';
*/


import { GLTFLoader } from '/node_modules/three/examples/jsm/loaders/GLTFLoader.js';

/* RENDER */
const container = document.querySelector( '#container' );
const renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true });
renderer.setClearColor( 0x000000);
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setSize( container.innerWidth, container.innerHeight );

container.appendChild( renderer.domElement );

        /* render resize on container */
        function resize() {     
            if (container == null) {
                console.warn('The container element is null.');
                return;
            }
            
            try {
                renderer.setSize(container.clientWidth, container.clientHeight);
                camera.aspect = container.clientWidth / container.clientHeight;
                camera.updateProjectionMatrix();
            } catch(e) {
                console.warn('An error occured while resizing the renderer:');
                console.error(e);
            }

        };
        window.addEventListener("resize", resize);
        


/* SCENA - CAMERA */

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 5, 11,);
camera.lookAt(0, 0, 0);



/* GEOMETRY */
 
const groundGeometry = new THREE.PlaneGeometry( 20, 20, 32, 32 );
groundGeometry.rotateX(-Math.PI / 2 );
const groundMaterial = new THREE.MeshStandardMaterial({ 
    color: 0xffffff,
    side: THREE.DoubleSide
});
const groundMesh = new THREE.Mesh ( groundGeometry, groundMaterial );
scene.add(groundMesh);



/* SPOT LIGHT */

const spotLight = new THREE.SpotLight ( 0xffffff, 3, 100, 0.5, 0.5 );
spotLight.position.set( 0, 25, 0 );
scene.add(spotLight);
spotLight.intensity = 1000;




/* ANIMATION PLANE */
function animatePlane() {
    requestAnimationFrame (animatePlane);
    renderer.render(scene,camera);
}

animatePlane();


/* GEOMETRY */


const loader = new GLTFLoader().setPath('/public/models/');
loader.load('/public/models/untitled.gltf', function (gltf) {
    const mesh = gltf.scene;
    mesh.position.set (0, 1.05, -1);
    scene.add(mesh);
});

/* ________________________________________________________________________________________________________ */ 

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200;400;900&display=swap');
@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");}


/* HEADER HEADER  HEADER HEADER  HEADER HEADER  HEADER HEADER  HEADER HEADER  HEADER HEADER  HEADER HEADER  HEADER HEADER  HEADER HEADER  */

.header {
    background-color: rgb(249, 255, 255);
    -moz-box-shadow:5px 5px 80px rgba(0,0,0,0.075);
    -webkit-box-shadow:5px 5px 80px rgba(0,0,0,0.075);
    box-shadow:5px 5px 80px rgba(0,0,0,0.075);
  }
  
.IDentity {
    font-family: 'Unbounded', cursive;
    font-weight: 300;
  }
  
.header h1{
    font-family: 'Unbounded', cursive;
    padding-left: 60px;
    padding-top: 10px;
  }
  
.header .bio{
    font-family: 'Unbounded', cursive;
    font-size: 0.84rem;
    display: flex;
    justify-content: space-between;
    /*align-items: baseline;*/
    padding-left: 60px;
  }
  
#name {
    margin: 0; font-size: 2rem ; font-weight: 400;
  }

/* LANDING SECT LANDING SECT LANDING SECT LANDING SECT LANDING SECT LANDING SECT LANDING SECT LANDING SECT LANDING SECT LANDING SECT */

.sectUNO {
  background-color: antiquewhite;
  background-position:center; 
  height:66vh;
  width: 100%;
  border-radius: 40px;}

.landZERO {
   /* background-image: url(public\img\download2023-11-03T213308403.png); */
    background-repeat: no-repeat;
    position: relative;
    /*margin-top: 10vh;*/
    background-size: cover;
    background-position:center; 
    height:66vh;
    width: 100%;
    border-radius: 40px;
}

#info {
    position: absolute;
    top: 10px;
    width: 100%;
    text-align: center;
    z-index: 100;
    display:block;
}

/* sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO */

.sectUNO {
    bottom: 0;
    background-repeat: no-repeat;
    /*background-size: cover;*/
    min-width: fit-content;
    height: 69vh;
}

<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tryTR</title>
    <style>
        body { padding: 10; }
        
    </style>
</head>
<body>

    <div class="header" id="myHeader">
        <div class="IDentity">
    
          <h1 id="name">xxx</h1>

          <div class="bio"> <p style="  font-size: 1rem ;">123456789
            <!-- Graphic Designer, Digital Artist, Creative Director -->
            </p>
            <p style="margin-right: 75px; font-weight: 500; font-size: 1rem;">Portfolio</p>
          </div> 
    
        </div>
    </div>


    
    <section class="landZERO" id="container">

        <div id="info">Description</div>
               
            <script type="module" src="main.js">
        
            </script>
    
    </section>



    <section class="sectUNO">

    </section>

    <footer style="color: rgb(153, 118, 76); height: 30px; ">

    </footer>

</body>
</html>

我猜这个错误可能是由于模块依赖项之间的冲突造成的，我是否应该提到我也安装了“vite”（？），也在node_modules文件夹内。 我是否已经到了需要了解/使用 WebPacks 的地步了？

Answer 1

在相对路径中，请记住“./”本质上是执行文件所在文件夹的路径。“../”是包含文件夹。

考虑下面的树：

drive:\
...
ancestorfile
folder1
  |---file
  |---executingfile
  |---file
  |
  |---folder1_a
       |---file
       |---file
  |
  |---folder1_b
      |---folder1b_1
           |---nestedfile
           |---file
      |
      |---file

所以如果在“执行文件”中你想指向 “祖先文件”将是：

'../祖先文件'

‘嵌套文件’怎么样？:

'./folder1_b/folder1b_1/nestedfile'

或高于“祖先文件”？：

'../../ancestorsancestorfile'

或与“执行文件”相同的文件夹？：

'./文件'

当然这仅限于本地路径