我试图通过 html 导入
troika-three-text<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js OrbitControls Example (r168)</title>
</head>
<body>
<!-- Set canvas size with width and height attributes -->
<canvas id="__canvas_id__" width="600" height="400"></canvas>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"OrbitControls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js",
"troika-three-text": "https://unpkg.com/[email protected]/dist/troika-three-text.esm.js"
}
}
</script>
<script type="module" src="4viz3d.js"></script>
</body>
</html>
但是，当我尝试使用
4viz3d.jsimport { Text } from 'troika-three-text';对可能出现的问题有什么想法吗？
我认为你需要导入所有的三驾马车依赖项：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js OrbitControls Example (r168)</title>
</head>
<body>
<!-- Set canvas size with width and height attributes -->
<canvas id="__canvas_id__" width="600" height="400"></canvas>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"OrbitControls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js",
"troika-three-text": "https://unpkg.com/troika-three-text@latest/dist/troika-three-text.esm.js",
"troika-three-utils": "https://unpkg.com/troika-three-utils@latest/dist/troika-three-utils.esm.js",
"troika-worker-utils": "https://unpkg.com/troika-worker-utils@latest/dist/troika-worker-utils.esm.js",
"webgl-sdf-generator": "https://unpkg.com/webgl-sdf-generator@latest/dist/webgl-sdf-generator.mjs",
"bidi-js": "https://unpkg.com/bidi-js@latest/dist/bidi.mjs"
}
}
</script>
<script type="module" src="4viz3d.js"></script>
</body>
</html>
至少可以避免错误：
Uncaught TypeError: Failed to resolve module specifier "troika-three-text". Relative references must start with either "/", "./", or "../".