なにをしてもThree.jsが読み込まれてくれない

実現したいこと

いままで一つのHTML内で書いていたプログラムをいくつかのファイルに分割したい
→分割したファイル内で今まで通りThree.jsを読み込ませて動かしたい

発生している問題・分からないこと

js内に書いたnew THREE.Group()からエラーになる。

エラーメッセージ

error
1CubeManager.js:16 Uncaught ReferenceError: cubeGroup is not defined
2    at CubeManager.createCube (CubeManager.js:16:23)
3    at App.init (App.js:20:26)
4    at new App (App.js:8:14)
5    at main.js:4:17
6
7（F12のコンソールから引用）

該当のソースコード

Javascript
1import { SmallCube } from './SmallCube.js';
2import { getCubeType } from '../utils/Helpers.js';
3
4export class CubeManager {
5    constructor() {
6        this.cubeGroup = new THREE.Group();
7        this.categorizedCubes = {
8            corners: [],
9            edges: [],
10            centers: []
11        };
12    }
13    
14    createCube() {
15            // グループを作成（全体のルービックキューブ）
16            cubeGroup = new THREE.Group();
17            
18            // 3x3x3のループでキューブを生成・分類
19            for (let x = 0; x < 3; x++) {
20                for (let y = 0; y < 3; y++) {
21                    for (let z = 0; z < 3; z++) {
22                        // 中心にあって見えないコアキューブはスキップ
23                        if (x === 1 && y === 1 && z === 1) {
24                            continue;
25                        }
26                        
27                        const cube = new SmallCube(x, y, z);
28                        const type = getCubeType(x, y, z);
29                        
30                        // 判定された種類に応じて、適切な配列に格納
31                        switch (type) {
32                            case 'corner':
33                                categorizedCubes.corners.push(cube);
34                                break;
35                            case 'edge':
36                                categorizedCubes.edges.push(cube);
37                                break;
38                            case 'center':
39                                categorizedCubes.centers.push(cube);
40                                break;
41                        }
42                        
43                        // 見た目はcubeGroupにまとめて追加
44                        cubeGroup.add(cube.group);
45                    }
46                }
47            }
48            
49            // グループをシーンに追加
50            scene.add(cubeGroup);
51            
52            // デバッグ情報をコンソールに出力
53            console.log("コーナーキューブの数:", categorizedCubes.corners.length); // 8
54            console.log("エッジキューブの数:", categorizedCubes.edges.length);     // 12
55            console.log("センターキューブの数:", categorizedCubes.centers.length);   // 6
56        }
57}

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Three.js 基本立方体</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 20px;
11            font-family: Arial, sans-serif;
12            background-color: #f0f0f0;
13        }
14        
15        #container {
16            text-align: center;
17        }
18        
19        #canvas-container {
20            display: inline-block;
21            border: 2px solid #333;
22            margin: 20px 0;
23            background-color: white;
24        }
25        
26        button {
27            padding: 10px 20px;
28            font-size: 16px;
29            margin: 5px;
30            cursor: pointer;
31            background-color: #4CAF50;
32            color: white;
33            border: none;
34            border-radius: 5px;
35        }
36        
37        button:hover {
38            background-color: #45a049;
39        }
40    </style>
41</head>
42<body>
43    <div id="container">
44        <h1>Three.js 基本立方体</h1>
45        
46        <!-- テスト用ボタン -->
47        <div>
48            <button onclick="rotateCube()">立方体を回転</button>
49            <button onclick="resetCube()">回転リセット</button>
50        </div>
51        
52        <!-- Three.js用のcanvas -->
53        <div id="canvas-container"></div>
54        
55        <p>マウスでドラッグして立方体を回転させることができます</p>
56    </div>
57
58    <!-- Three.js CDN -->
59    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
60    
61    <!-- モジュールの読み込み -->
62    <script type="module" src="./src/js/main.js"></script>
63</body>
64</html>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

そもそも最初に"import * as THREE from 'three';"を付けていたがなんかダメらしいので削除
importmapを使おうとする→そもそもunknown wordになって読み込んでもらえない
importmap-shimとmodule-shimにする→ダメ

HTML内のthree.js読み込みを削除して使う所で
import * as THREE from 'https://unpkg.com/three@0.128.0/build/three.module.js';
'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';
を書く→ダメ

補足

VSCodeとLive Previewで開発中
github Page

恥ずかしながらJS書くのはこれが初めてで、各種LLMに頼りながらゆっくり学習しています。

行動規範の内容に同意します

回答2件

js
1    createCube() {
2            // グループを作成（全体のルービックキューブ）
3            cubeGroup = new THREE.Group();

この代入文は、どのような変数への代入を意図したものでしょうか。

インスタンス変数だとしたら、JavaScriptではthis.を書かないとそう認識されません。
グローバル変数に代入したい場合、クラスの中ではstrictモードとなりますので、暗黙のうちにグローバル変数を作成することはできません。別途宣言するか、window経由での設定が必要となります。

投稿2025/08/19 12:58

maisumakun

総合スコア146758

JavaScript のライブラリの種類としてES Module 形式のものと従来のScript形式の2種類があります。

ES Module 形式は script タグで type="module" を指定する形式
従来のScript形式は script タグで type="module" を指定しないレガシーな形式

Three.jsでは従来のScript形式はr150 以降は非推奨となり r160 で廃止されました。
その為、現在推奨される方法は ES Module 形式になります。

そもそも最初に"import * as THREE from 'three';"を付けていたがなんかダメらしいので削除

ダメなわけではありません。正しく使う必要があります。
ES Module で import * as THREE from 'three'; を使うには、事前に importmap を使ってライブラリの取得元を定義しておく必要があります。

html
1    <script type="importmap">
2      {
3        "imports": {
4          "three": "https://cdn.jsdelivr.net/npm/three@0.175.0/build/three.module.js"
5        }
6      }
7    </script>