时间戳

首页 > 解决方案 > 不使用 node.js：未捕获的 TypeError：无法解析模块说明符“三”。相对引用必须以“/”、“./”或“../”开头

javascript - 不使用 node.js：未捕获的 TypeError：无法解析模块说明符“三”。相对引用必须以“/”、“./”或“../”开头

问题描述

我有这个简单的 js 示例，我通过内置实时预览服务器的 Visual Studio 代码进行测试：我在此示例中不使用 node.js js 目录下的所有 js 文件：

C:\Dev\my\javascript\ThreeJS\tests\js>ls -1
GLTFLoader.js
OrbitControls.js
main.js
three.js
three.min.js
three.module.js

HTML：

但我不断收到这个一般错误：

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

<html>
    <head>
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8" />
        <title>My first three.js app</title>
        <link href="main.css" rel="stylesheet" type="text/css">
        <script type="module" src="js/main.js"></script>
    </head>
    <body>
        <div id="scene-container">
            <canvas></canvas>
        </div>
    </body>
</html>

在 js/main.js 中

import {
  BoxBufferGeometry,
  Color,
  Mesh,
  MeshBasicMaterial,
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
} from 'three';

// Get a reference to the container element that will hold our scene
const container = document.querySelector('#scene-container');

// create a Scene
const scene = new Scene();

// Set the background color
scene.background = new Color('skyblue');

// Create a camera
const fov = 35; // AKA Field of View
const aspect = container.clientWidth / container.clientHeight;
const near = 0.1; // the near clipping plane
const far = 100; // the far clipping plane

const camera = new PerspectiveCamera(fov, aspect, near, far);

// every object is initially created at ( 0, 0, 0 )
// move the camera back so we can view the scene
camera.position.set(0, 0, 10);

// create a geometry
const geometry = new BoxBufferGeometry(2, 2, 2);

// create a default (white) Basic material
const material = new MeshBasicMaterial();

// create a Mesh containing the geometry and material
const cube = new Mesh(geometry, material);

// add the mesh to the scene
scene.add(cube);

// create the renderer
const renderer = new WebGLRenderer();

// next, set the renderer to the same size as our container element
renderer.setSize(container.clientWidth, container.clientHeight);

// finally, set the pixel ratio so that our scene will look good on HiDPI displays
renderer.setPixelRatio(window.devicePixelRatio);

// add the automatically created <canvas> element to the page
container.append(renderer.domElement);

// render, or 'create a still image', of the scene
renderer.render(scene, camera);

标签： javascript

解决方案

写命名空间三并像这样导入.....

  import * as THREE from 'fileUrl';

有关更多信息，请访问此链接 https://discoverthreejs.com/book/introduction/get-threejs/

推荐阅读