未捕获的类型错误：解析模块说明符“三”时出错。相对模块说明符必须以“./”、“../”或“/”开头

Answer 1

我有同样的问题，它与 HTML 无关。对我来说，当我在网络服务器上上传脚本时出现了问题。我只需要更改导入路径（在需要的地方添加 ../../）。我希望这可以帮助你。

Answer 2

当我使用 Firefox 运行 html 文件时出现此错误。当我使用 Chrome 时，它​​运行良好。问题似乎是 Firefox 尚不支持导入映射，这是他们方面已知的bug。

Answer 3

这是我用来抛出错误的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
                <script type="importmap">
        {
            "imports": {
                "three": "./build/three.module.js",
                "three.js-master/examples/jsm/controls/OrbitControls":"./jsm/controls/OrbitControls.js",
                "three.js-master/examples/jsm/libs/stats.module":"./jsm/libs/stats.module.js",
            }
        }
    </script>
    </head>
    <body>
        
        <script type="module" src="https://cdn.jsdelivr.net/npm/three@0.143/build/three.min.js"></script>
        <script type="module" src="https://cdn.jsdelivr.net/npm/three@0.143/examples/js/controls/OrbitControls.js"></script> 
        
        
        </script>
        <script  type="module">

            import { Water } from 'http://localhost/Lines/jsm/objects/Water.js';
            import * as THREE from 'http://localhost/Lines/build/three.module.js';

            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
            camera.position.set( 0, 0, 50 );
            camera.lookAt( 0, 0, 0 );
            

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

        

            const WaterGeometry = new THREE.PlaneGeometry( 45, 45 );
            const texture = new THREE.TextureLoader().load( 'https://i.imgur.com/mK9cHLq.jpeg' );
            const material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide } );       
            const controls = new THREE.OrbitControls( camera, renderer.domElement );

            let water = new Water
                (
                    WaterGeometry,
                    {
                        textureWidth: 512,
                        textureHeight: 512,
                        waterNormals: new THREE.TextureLoader().load
                        ( 'textures/waternormals.jpg', function ( texture ) 
                        
                            {

                             texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

                            } 
                        ),
                        sunDirection: new THREE.Vector3(),
                        sunColor: 0xffffff,
                        waterColor: 0x001e0f,
                        distortionScale: 3.7,
                        fog: scene.fog !== undefined
                    }
                );



            controls.update();

            scene.add( water );



            function animate() 
            {
                requestAnimationFrame( animate );

                water.rotation.x += 0.00;
                water.rotation.y += 0.00;
                water.rotation.z += 0.01;

                renderer.render( scene, camera );
            };

            animate();
        </script>
    </body>
</html>

我不知道如何以不会引发上述错误的方式编写 HTML 代码。