three.jsのimportについて

Question

three.jsでOrbitControlsをimportしたところからエラーが出てしまいます。
具体的には、2行目の
import {OrbitControls} from "./jsm/controls/OrbitControls.js";
と53行目の
controls = new OrbitControls(camera, renderer.domElement);を書くまでは球体が表示されているのですが、この2行を書くと下記のようなエラーが出ます。
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

解決方法を教えていただけないでしょうか。
お手数をおかけしますが、よろしくお願いいたします！！

index.html

    <script src="main.js" type="module"></script>

main.js

import * as THREE from './build/three.module.js'; //全ての要素に対してインポートするので*
import {OrbitControls} from "./jsm/controls/OrbitControls.js";

//webブラウザで表示するときには、シーン(scene),カメラ(camera),レンダラー(renderer)が必ず必要

let scene, camera, renderer, pointLight, controls;//ここで書くと、グローバル変数として宣言することになる
//シーンを追加
scene = new THREE.Scene();//Sceneの頭は大文字でかく

//カメラを追加
camera = new THREE.PerspectiveCamera(//PerspectiveCamera(視野角(映す角度),アスペクト比（画面の横と縦の比率。表示する画面サイズを決定),開始距離,終了距離)
    50,//視野角
    window.innerWidth / window.innerHeight,//アスペクト比
    0.1,//開始距離
    1000//終了距離
);
camera.position.set(0, 0, +500);//cameraをz軸のプラスの方向に動かしていく（そうしないとcameraが物体より前に出て映らない）

//レンダラー(カメラで写した要素を変換して、ブラウザに3dとして表示するもの)を追加
renderer = new THREE.WebGLRenderer({alpha: true});//alpha・・透明度を表す。デフォルトではfalse。trueにして透明度を上げると、背景画像が見える
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//レンダラーをhtmlのbodyタグに表示する
renderer.render(scene, camera);//画面にレンダラーが表示される


//ジオメトリを作成
//SphereGeometry・・・球体のジオメトリ
//three.jsの公式サイトで、documentから検索すると、引数に何を書くか分かる
let ballGeometry = new THREE.SphereGeometry(100, 64, 32);//(radius(半径),widthSegment(ポリゴンの数を増やす。値を大きくすればするほど、より球体に近づく。),heightSegment(ポリゴンの分割数を上げる。より綺麗な球体に近づく。))
//マテリアルを作成
let ballMaterial = new THREE.MeshPhysicalMaterial();//粗さ、金属性、反射率等を設定できる。引数には、{color: 色}や、{map: テクスチャ}など。テクスチャでは、地球の画像を持ってきて球体に貼り付けることができる。
//ジオメトリ（骨格）とマテリアル（色）をここまでで作成しました。それをメッシュ化していきます
//メッシュ化
let ballMesh = new THREE.Mesh(ballGeometry, ballMaterial);//引数としてジオメトリとマテリアルを宣言
scene.add(ballMesh);//sceneにポリゴンを乗せて、cameraで撮影する準備ができる

//平行光源を追加してみよう//上から光が降り注ぐ
let directionalLight = new THREE.DirectionalLight(0xffffff, 2)//引数は色(0xは、16進数を描きますという意味）と、強さをとる
directionalLight.position.set(1, 1, 1);//(1,1,1)の位置から光が降り注ぐようになる
scene.add(directionalLight);

//ポイント光源を追加してみよう//地球の周りを動かすためにグローバルで宣言したいので、5行目のとこで宣言している（なんでここはグローバルじゃない？）
pointLight = new THREE.PointLight(0xffffff, 1);//平行光源と同じく、引数は色と強さ
//今の状態だとポイント光源が地球の中に入ってしまっているので、位置を変える
pointLight.position.set(-200, -200, -200);
scene.add(pointLight);//作ったものはsceneにaddする

//ポイント光源がどこにあるのかを特定する//平行光源のヘルパーとかもあるらしい
let pointLightHelper = new THREE.PointLightHelper(pointLight, 30);//第二引数はヘルパー（菱形みたいなやつ）の大きさを表す
scene.add(pointLightHelper);

//マウス操作ができるようにしよう（グルーバル変数で変数を宣言する）
controls = new OrbitControls(camera, renderer.domElement);

//ポイント光源を球の周りを周りを巡回させる//座標を変数にして動的に変える
//リロードしないと場所が変わらないので、常にぐるぐる回らせるために、アニメート関数に入れて、アニメート関数をフレーム単位で変えていく
function animate(){
    pointLight.position.set(
    200 * Math.sin(Date.now() / 500),
    200 * Math.sin(Date.now() / 1000),
    200 * Math.cos(Date.now() / 500),
);
//レンダリングしてみよう
renderer.render(scene, camera);//これもフレームタイムでレンダリングしないと、画面がフレーム単位でレンダリングされないので、アニメート関数に組み込む

//アニメーション関数をフレーム単位で更新するためには、requestAnimationFrameという関数を使う
requestAnimationFrame(animate);//これだけではアニメート関数を呼んでいない
}
//アニメート関数を呼ぶ
//レンダリングもフレーム単位で更新しないと、画面がレンダリングされないので、アニメート関数に組み込む
animate();

Comments

[Lhankor_Mhy]

OrbitControls.js はこれのことですか？

https://github.com/mrdoob/three.js/blob/dev/examples/jsm/controls/OrbitControls.js

[gubi.m]

https://github.com/mrdoob/three.js/releases
ここから持ってきています！
私は最新のr143というものを使って書いたのですが、Udemyの教材はr134を使っていて、そちらをダウンロードすればうまくいったのですが、r143でなぜうまくいかないのか困っています（ ; ; ）

[cx20]

three.js は常に新しい取り組みを行っている為、ライブラリのバージョンが上がると古いサンプルは動作しなくなることが多いです。
公式サンプルを参考に新しい使い方を学ぶか、教材で使用しているライブラリバージョンと同じバージョンを使うといった対応が必要かと思います。

[gubi.m]

バージョンで変わってしまうのですね。バージョンを揃えてうまくいきました！ありがとうございました！

Answer 1

index.html 側に下記を追加してみてください。

<script type="importmap">
{
    "imports": {
        "three": "./build/three.module.js",
        "three/examples/jsm/": "./jsm/"
    }
}
</script>

＜参考＞
■ 公式サンプル
https://github.com/mrdoob/three.js/blob/master/examples/webgl_animation_keyframes.html

■ three.jsのGLTFLoader.jsのimportに失敗したときの解決備忘録
https://qiita.com/iwaken71/items/c3c8656d78c33ad92c39

Comments

[gubi.m]

ありがとうございます！！