古かったみたい

どこかのサイトを参考にThree.jsを学んでたんですが、DevToolsをみてたら「おまえの書き方古いぜ。そのうちdeprecatedしちゃうよ。」って言われてました。ES modulesの仕組みを使えってことのようです。そうっすよね、もうIEのこと忘れていいんですもんね。

import * as THREE from 'three';

というわけで↑この行を追加しました。Three.jsのドキュメントのInstallationの項では、Node.jsのthreeモジュールとviteモジュールを使って開発環境を作ってました。開発中はこれでいいとして、'three'モジュールの読み込み元を外のCDNにする場合はインポート先をマッピングするといいのでしょう。

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.skypack.dev/three"
  }
}
</script>