Javascript 未使用node.js:Uncaught TypeError:解析模块说明符“失败”；三个”；。相对引用必须以“或”开头/&引用&引用/&引用；，或者说/&引用；

我有一个简单的js示例，我通过visual studio代码使用live preview服务器内置进行测试： 我在本示例中不使用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 "../".

我的前三个.js应用程序

在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);

导入{
在几何方面，
颜色
网格
网状基本材料，
透视照相机，
场景
网络渲染器，
}从"三"开始,；
//获取对保存场景的容器元素的引用
const container=document.querySelector（“#场景容器”）；
//创造一个场景
const scene=新场景（）；
//设置背景色
scene.background=新颜色（“天蓝色”）；
//创建一个相机
常数fov=35；//视野
const aspect=container.clientWidth/container.clientHeight；
常数近=0.1；//近剪裁平面
常数far=100；//远剪裁平面
常量摄影机=新透视摄影机（视场、方位、近距离、远距离）；
//每个对象最初都是在（0,0,0）处创建的
//向后移动摄影机，以便我们可以查看场景
摄像机位置设置（0,0,10）；
//创建几何图形
常量几何体=新的BoxBuffer几何体（2,2,2）；
//创建默认（白色）基本材质
常量材质=新的网格基本材质（）；
//创建包含几何体和材质的网格
常量立方体=新网格（几何体、材质）；
//将网格添加到场景中
场景.添加（立方体）；
//创建渲染器
const renderer=new WebGLRenderer（）；
//接下来，将渲染器设置为与容器元素相同的大小
renderer.setSize（container.clientWidth，container.clientHeight）；
//最后，设置像素比率，以便我们的场景在HiDPI显示器上看起来很好
renderer.setPixelRatio（window.devicePixelRatio）；
//将自动创建的元素添加到页面
container.append（renderer.domeElement）；
//渲染场景，或“创建静态图像”
渲染器。渲染（场景、摄影机）；

如果您使用的是npm的“three”软件包，那么您需要在终端中安装该软件包，然后像这样导入

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

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

---

如果您使用的是来自npm的“three”软件包，那么您需要在终端中安装该软件包并按如下方式导入

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

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

---

编写名称空间3并像这样导入

  import * as THREE from 'fileUrl';

有关更多信息，请访问此链接

---

编写名称空间3并像这样导入

  import * as THREE from 'fileUrl';

有关更多信息，请访问此链接

---

我对您的问题的理解如下：您希望在HTML文件中包含分布式

three.js

文件，而不捆绑代码（例如使用webpack）。如果是这种情况，您不应该在自己的代码中使用

import

，而是应该全局地将依赖项（三个）导入到HTML文件中。这将把三个对象公开到全局名称空间中。然后，在JavaScript文件中，您可以自动访问全局变量。您可以直接访问该模块（无需引用）

以下是一个示例（摘自并改编自）：

---

要重用现有代码，可以使用spread运算符并将全局变量分解为现在导入的变量：

const {
  BoxBufferGeometry,
  Color,
  Mesh,
  MeshBasicMaterial,
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
} = window.THREE;

---

我对您的问题的理解如下：您希望在HTML文件中包含分布式

three.js

文件，而不捆绑您的代码（例如使用webpack）。如果是这种情况，您不应该在自己的代码中使用

import

，而是应该全局地将依赖项（三个）导入到HTML文件中。这将把三个对象公开到全局名称空间中。然后，在JavaScript文件中，您可以自动访问全局变量。您可以直接访问该模块（无需引用）

以下是一个示例（摘自并改编自）：

---

要重用现有代码，可以使用spread运算符并将全局变量分解为现在导入的变量：

const {
  BoxBufferGeometry,
  Color,
  Mesh,
  MeshBasicMaterial,
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
} = window.THREE;

---

---

您希望

three

模块解决什么问题<当前文件夹中的code>three.js<在项目根文件夹中的code>three.js？您需要安装

three

软件包

npm i-s three

，或者通过

cdn

将其包含在html文件中。但我再次说过我不使用node js所有tree.js文件都在js文件夹中查看更新的问题您希望

three

模块解决什么问题<当前文件夹中的code>three.js<在项目根文件夹中的code>three.js？您需要安装

three

软件包<代码>npm i-s三，或者通过一个

cdn

将其包含在你的html文件中。但我再次说我不使用node js所有tree.js文件都在js文件夹中查看更新的问题查看更新的问题查看更新的问题我不使用node.js无法使用导入？查看更新的问题我不使用node.js无法使用导入？如果我不使用node.js，我无法使用导入use node.js？导入语句在es6中使用，而不是必需语句，因此，如果您不使用node.js，您可以使用此语句。如果我不使用node.js，我不能使用导入？导入语句在es6中使用，而不是必需语句，因此，如果您不使用node.js，您可以使用此语句。谢谢！那么webpack就是node.js吗？@user63898 webpack是一个工具，它可以让您在常规JavaScript模块中为前端编程，类似于node.js模块。然后它将您的代码捆绑在一起，并在最后创建一个

.js

文件，您可以将其添加到HTML中。该文件包含所有代码，但不包含导入/导出语句。Webpack使用Node.js作为其运行时。捆绑文件不再需要Node.js。谢谢！那么webpack就是node.js吗？@user63898 webpack是一个工具，它可以让您在常规JavaScript模块中为前端编程，类似于node.js模块。然后，它将您的代码捆绑在一起