GET http://127.0.0.1:3000/build/three.module.js net::ERR_ABORTED 404 (Not Found) 嘗試將軌道控制與 three.js 一起使用時出錯

Question

我正在嘗試使用 three.js 創建一個天空盒，並創建了立方體並應用了紋理，但是，我現在需要導入相機控件。 我首先創建了 OrbitControls.js 文件（里面有正確的代碼）但是當我嘗試使用let controls = new OrbitControls( camera, renderer.domElement ); 添加控件時，當嘗試將軌道控件與 three.js 一起使用時，我收到錯誤GET http://127.0.0.1:3000/build/three.module.js net::ERR_ABORTED 404 (Not Found) 。 我添加了一個 three.module.js 文件並找到了它的代碼。 使用<script type="module" src="three.module.js"></script>將它添加到我的 HTML 但我仍然收到上述錯誤。

這是我的 JS 和獲得 three.js 的腳本標簽：

<body>
        <script src="three.js"></script>
    <script type="module" src="three.module.js"></script>
        <script type="module">
    import { OrbitControls } from "./OrbitControls.js"
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    const renderer = new THREE.WebGLRenderer();

    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    const geometry = new THREE.BoxGeometry();
    const material = []
      let texture_ft = new THREE.TextureLoader().load("cocoa_ft.jpg");
      let texture_bk = new THREE.TextureLoader().load("cocoa_bk.jpg");
      let texture_up = new THREE.TextureLoader().load("cocoa_up.jpg");
      let texture_dn = new THREE.TextureLoader().load("cocoa_dn.jpg");
      let texture_rt = new THREE.TextureLoader().load("cocoa_rt.jpg");
      let texture_lf = new THREE.TextureLoader().load("cocoa_lf.jpg");

      material.push(new THREE.MeshBasicMaterial( { map: texture_ft }));
      material.push(new THREE.MeshBasicMaterial( { map: texture_bk }));
      material.push(new THREE.MeshBasicMaterial( { map: texture_up }));
      material.push(new THREE.MeshBasicMaterial( { map: texture_dn }));
      material.push(new THREE.MeshBasicMaterial( { map: texture_rt }));
      material.push(new THREE.MeshBasicMaterial( { map: texture_lf }));
    const cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    camera.position.z = 5;
    function animate() {
      requestAnimationFrame( animate );
      renderer.render( scene, camera );
}
  animate();

    let controls = new OrbitControls( camera, renderer.domElement );
        </script>
    </body>

Answer 1

這很可能是文件目錄問題。 當您在 HTML 文件中使用src="three.module.js"時，您是在告訴瀏覽器您的.html和three.module.js文件都在同一個文件夾中。 您可能必須修改 src 以便它實際上指向 JavaSript 文件所在的位置：

src="../three.module.js"這上升了一個文件夾
src="./subfolder/three.module.js"這進入一個子文件夾

只需查看您的文件夾結構，並嘗試指向正確的位置。 OrbitControls 也是如此。

GET http://127.0.0.1:3000/build/three.module.js net::ERR_ABORTED 404 (Not Found) 嘗試將軌道控制與 three.js 一起使用時出錯

問題描述

1 個解決方案

解決方案1
0 已采納 2021-03-22 22:33:49

GET http://127.0.0.1:3000/build/three.module.js net::ERR_ABORTED 404 (Not Found) 嘗試將軌道控制與 three.js 一起使用時出錯

問題描述

1 個解決方案

解決方案1 0 已采納 2021-03-22 22:33:49

解決方案1
0 已采納 2021-03-22 22:33:49