質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

Q&A

解決済

1回答

5508閲覧

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

bro.

総合スコア1

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

0グッド

0クリップ

投稿2021/03/19 13:55

前提・実現したいこと

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

フォルダの階層状況は以下のようになっています。
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

<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"が表示さます。 これはなぜ表示されているのでしょうか。問題は無いのでしょうか... 厚かましいですが、お答え頂けると助かります...
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問