尝试加载 .glb 的 3dmodel-解网

问：

控制台中的错误：未捕获的 TypeError：无法解析模块说明符“three”。相对引用必须以“/”、“./”或“.”开头。/".

我正在尝试加载一个 3d 模型，这是我的 index.html 和 3dmodel.js ，我做错了什么吗？我还尝试使用来自互联网的依赖项（而不是在本地下载它们）。我通过Visual Studio Code在本地主机上使用它，使用名为Live Server的扩展

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lifeboat</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" type="image/png" href="logo_nasa.ico">
</head>
<body>

  <header>
    <div class="header-content">
      <img src="logo_nasa.png" alt="Logo" id="logo">
      <nav>
        <ul>
          <li><a href="about.html">About</a></li>
          <li><a href="virtual-library.html">Virtual Library</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <div class="main-title">
    <h2 id="text">LIFEBOAT</h2>
    <p>Welcome to our space exploration project.</p>
    <div class="mouse"></div>
  </div>

    <!-- Container for the 3D model -->
  <div id="model-container"></div>


  <div class="content">
    <!-- Add your longer content here -->
  </div>
  
  <script src="/js/matrix_text.js"></script>
  <script type="module" src="3dmodel.js"></script>
</body>
</html>

3dmodel.js

import * as THREE from './js/three.module.js';
import { GLTFLoader } from './js/GLTFLoader.js';
import { DRACOLoader } from './js/DRACOLoader.js';

let scene, camera, renderer, model;

init();
animate();

function init() {
    // Creating the scene
    scene = new THREE.Scene();

    // Setting up the camera
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 5);

    // Setting up the renderer
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('model-container').appendChild(renderer.domElement);

    // Adding lighting
    const light = new THREE.HemisphereLight(0xffffff, 0x444444);
    light.position.set(1, 1, 1);
    scene.add(light);

    // Adding the Draco loader
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath('./js/'); // Adjust path as necessary

    // Adding the GLTF loader
    const loader = new GLTFLoader();
    loader.setDRACOLoader(dracoLoader);

    // Loading the GLB model
    loader.load('spaceship.glb', function (gltf) {
        model = gltf.scene;
        scene.add(model);
    }, undefined, function (error) {
        console.error(error);
    });

    // Handle window resize
    window.addEventListener('resize', onWindowResize, false);
}

function animate() {
    requestAnimationFrame(animate);

    // Optional: Rotate the model
    if (model) {
        model.rotation.y += 0.005;
    }

    renderer.render(scene, camera);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

在主标题下加载 spaceship.glb

JavaScript HTML 三.js

尝试加载 .glb 的 3dmodel

Trying to load a 3dmodel that is a .glb

评论