我有这个简单的 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);
Jer*_*rry 17
以下是我在没有 webpack/node.js 的情况下使用 cdn 时的代码。
#index.html
<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>
#test.js
import * as THREE from 'three';
import { OrbitControls } from 'OrbitControls';
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
controls = new OrbitControls(camera, renderer.domElement);
参考： https: //jspm.org/import-map-cdn
这是因为与其他 Web 资源不同，HTML 的 JS 模块规范保留了这些非相对引用（称为“裸说明符”）的空间，以允许通过导入映射导入自定义包。
小智 6
编写命名空间三并像这样导入......
import * as THREE from 'fileUrl';
欲了解更多信息，请访问此链接 https://discoverthirdjs.com/book/introduction/get-thirdjs/
小智 6
另外，自今年 1 月 26 日以来， Three.js 发布了 r137 更新，并且由于 r137 在浏览器中使用 ES6 模块（如 GLTFLoader）需要导入映射。
<script type="importmap">
{
"imports": {
"three": "../master/three.js-master/build/three.module.js"
}
}
script.js 中的 Three.js import 语句如下所示：
import * as THREE from 'three'
https://github.com/Kramzin/thirdjs-task - 在这里您可以看到更新的代码和以前的代码，在这些更改之后，一切正常。
| 归档时间： |
|
| 查看次数： |
50670 次 |
| 最近记录： |