gpt4 book ai didi

javascript - 相对引用必须以 "/"、 "./"或 "../"开头。 Chrome

转载 作者:行者123 更新时间:2023-12-05 03:17:59 24 4
gpt4 key购买 nike

我编写了一个演示,但在 Google Chrome 中出现了两个错误,但在 Microsoft Edge 中没有错误。

在触发模块脚本加载后添加导入映射。

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

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.144.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.144.0/examples/jsm/"
}
}
</script>
</head>

<body>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// init
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 1000);
camera.position.z = 1;
// controls
const scene = new THREE.Scene();
const geometry = new THREE.PlaneGeometry(1, 1);
const material = new THREE.MeshBasicMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// texture
const texture = new THREE.TextureLoader();

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animation);
const controls = new OrbitControls(camera, renderer.domElement);
document.body.appendChild(renderer.domElement);
// animation
function animation(time) {
renderer.render(scene, camera);
}

</script>
</body>

</html>

https://jsfiddle.net/foLkmt4z/

Chrome

enter image description here

边缘

enter image description here

Google Chrome 似乎有什么问题?

我的环境

  • Windows 10
  • Microsoft Edge 版本 105.0.1343.50
  • 谷歌浏览器版本 105.0.5195.127

我简化了我的代码。

https://jsfiddle.net/s0h6w432/3/

chrome 中的代码有两个错误。

1.触发模块脚本加载后添加导入映射。

2.Uncaught TypeError:无法解析模块说明符“三”。相对引用必须以“/”、“./”或“../”开头。

但边缘得到零错误。

我删除了一些 chrome 插件。错误消失了。

最佳答案

显然,import map 没有处理这个导入:

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

我怀疑问题在于导入映射中的 three/addons/ 条目未用于 three/addons/controls/OrbitControls.js(尽管这看起来很奇怪)。

如果是这样,您可以通过为 three/addons/controls/ 添加条目来修复它:

<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.144.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.144.0/examples/jsm/",
"three/addons/controls/": "https://unpkg.com/three@0.144.0/examples/jsm/controls/"
}
}
</script>

也就是说,隐藏在屏幕截图中的这个错误是关于:

An import map is added after module script load was triggered.

这可能是 es-module-shims 的问题。在 Chrome 105 或 Edge 105 上使用导入 map 不需要它。

关于javascript - 相对引用必须以 "/"、 "./"或 "../"开头。 Chrome ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73877328/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com