【three.js】THREEオブジェクトが定義されていないというエラー

前提・実現したいこと

プログラミング初心者でございます。
現在three.jsをcloud9上でお勉強しております。

フォルダの階層状況は以下のようになっています。
threejs_practiceフォルダ
|└imgフォルダ
|└index.html
|└jsフォルダ
||└helvetiker_regular.typeface.json
||└OrbitControls.js
||└three.min.js

発生している問題・エラーメッセージ

"THREE is not defined"というエラーが
シーン、メッシュ、ライト、レンダラーの全ての要素に対して発生しています。

コード自体に問題があるのか...
それともcloud9の使えていないのか...
フォルダに入れているファイルが適切なものではないのか...
何が原因なのか全く分からないでいます...

皆様からすれば大変初歩的な問題かと思いますが...
ご教示頂けますと幸いです。

該当のソースコード

<!DOCTYPE html>
<html lang = "ja">
<head>
    <meta charset = "utf-8">
    <title>Three.js Practice</title>
</head>
<body>
    <div id = "stage"></div>
    <script src = "/js/three.min.js"></script>
    <script>
    (function(){
        'use strict';
        
        var scene;
        var box; //mesh
        var light;
        var camera;
        var renderer;
        var width = 500;
        var height = 250;
        
        // ↓この文章でエラー↓
        scene = new THREE.Scene();
        
        // ↓この文章でエラー↓
        box = new THREE.Mesh(
            new THREE.BoxGeometry(50,50,50),
            new THREE.MeshLambertMaterial({color:0xff0000})
        );
        box.position.set(0,0,0);
        scene.add(box);
        
        //↓この文章でエラー↓
        light = new THREE.DirectionalLight(0xffffff,1);
        light.position.set(0,100,30);
        scene.add(light);
        
        //↓この文章でエラー↓
        camera = new THREE.PerspectiveCamera(45,width/height,1,1000);
        camera.position.set(200,100,300);
        camera.lookAt(scene.position);
        
        //renderer
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(width,height);
        renderer.setClearColor(0xefefef);
        renderer.setPixelRatio(window.devicePixelRatio);
        document.getElementById('stage').appendChild(renderer.domElement);
        renderer.render(scene, camera);
        
    })();
    </script>
</body>
</html>

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

回答1件

ベストアンサー

<script src = "/js/three.min.js"></script>を

html
1<script src = "js/three.min.js"></script>

あるいは

html
1<script src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js">

にすればできると思います

投稿2021/03/19 16:48

編集2021/03/19 17:07

modieu

総合スコア282

bro.

2021/03/20 11:28

modieu様ご回答ありがとうございます！両コードともプレビューに表示させることができました~ありがとうございます！しかし以前コードの方には、黄色の三角ビックリマーク"THREE is not defined"が表示さます。これはなぜ表示されているのでしょうか。問題は無いのでしょうか... 厚かましいですが、お答え頂けると助かります...

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