

プログラミング初心者で今勉強中です。某YouTuberの方の動画を見てthree.jsを勉強しているのですが、その勉強している内容の動画の中でthree.jsのFlyControlsを使うところで詰まっています。
FlyControlsをインポートする前までは正常に動くのですが、インポートのコードを打つと下記のようなエラーが出て困っています。

**エラーメッセージ:**

[code]

    Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
    
[/code]

その動画では正常に動いているのですが、約１、2年前の動画なので、やはり今とやり方が違うのでしょうか。解決方法を教えてください。

下記は今勉強中のコードです。

[code]

    <!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>LensFlare Website</title>
    <body>
     <script src="script.js" type="module"></script>
    </body>
    </html>
    
[/code]

そして、下記がjs(script.js)ファイルのコードです。

[code]

    import * as THREE from "./build/three.module.js";
    import {FlyControls} from "./jsm/controls/FlyControls.js";//このコードを打ったらエラーが吐かれました
    
[/code]

[code]

    let camera,scene,renderer;
    
    init();
    
    function init() {
        //カメラ
        camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 15000);
    
        //シーン
        scene = new THREE.Scene();
    
        //geometry
        const size = 250;
        const geometry = new THREE.BoxGeometry(size, size, size);
        const material = new THREE.MeshPhongMaterial({
            color: 0xffffff,
            specular: 0xffffff,
            shininess: 50
        });
    
        for(let i = 0; i < 2500; i++) {
            const mesh = new THREE.Mesh(geometry, material);
    
            mesh.position.x = 8000 * (2.0 * Math.random() - 1.0);
            mesh.position.y = 8000 * (2.0 * Math.random() - 1.0);
            mesh.position.z = 8000 * (2.0 * Math.random() - 1.0);
    
            //回転度合いをランダムに決める
            mesh.rotation.x = Math.random() * Math.PI;
            mesh.rotation.y = Math.random() * Math.PI;
            mesh.rotation.z = Math.random() * Math.PI;
            
            scene.add(mesh);
        }
    
        //平行光源
        const dirLight = new THREE.DirectionalLight(0xffffff, 0.03);
        scene.add(dirLight);
    
        addLight(0.08, 0.3, 0.9, 0, 0, -1000);
    
        //ポイント光源を追加
        function addLight(h,s,l,x,y,z) {
            const light = new THREE.PointLight(0xffffff, 1.5, 2000);
            light.color.setHSL(h, s, l);
            light.position.set(x, y, z);
            scene.add(light);
        }
    
        //renderer
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
    
        renderer.render(scene, camera);
    }
    
[/code]

VSCodeを使っています。htmlはVSCodeのOpen With Live
Serverを使って開いています。three.jsの方はcdnではなくダウンロード版を使っています。

three.jsのバージョンはおそらくr153(0.153)だと思います。three.jsのサイトからダウンロードして展開してVSCodeに貼り付けています。ちなみにmacOSです。

**参考にした動画:**  
[Three.jsでモダンな3Dウェブサイトの作り方 -Three.jsチュートリアル
(YouTube)](https://youtube.com/watch?v=bdQf9vlfxdI&t=1133s)


CC BY-SA 4.0
2023-05-31T12:05:21.550
95046
2023-06-01T16:34:29.957
2023-06-01T16:34:29.957
3060
58537
question
javascript three.js
three.jsのモジュールであるFlyControlsの使い方がわかりません