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

我有这个简单的 js 示例，我通过带有实时预览服务器的 visual studio code 进行测试：我不在这个示例中使用 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);

原文由 user63898 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.5k

<head> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.138.0/build/three.module.js", "OrbitControls": "https://unpkg.com/three@0.138.0/examples/jsm/controls/OrbitControls.js" } } </script> </head> <body> <script type="module" src="js/test.js"></script> </body>

import * as THREE from 'three'; import { OrbitControls } from 'OrbitControls'; scene = new THREE.Scene(); renderer = new THREE.WebGLRenderer(); controls = new OrbitControls(camera, renderer.domElement);

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？

Stack Overflow 翻译