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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Blender

Blenderとは、オープンソースの3DCGソフトウェアです。フリーでありながら、3Dモデル作成、レンダリング、アニメーション、コンポジットなどのハイエンドに匹敵する高い機能を持ち、さらにゲームエンジンも搭載しています。

Q&A

解決済

1回答

1490閲覧

three.jsのサンプルソースが表示されない

justmeet0924

総合スコア44

Three.js

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Blender

Blenderとは、オープンソースの3DCGソフトウェアです。フリーでありながら、3Dモデル作成、レンダリング、アニメーション、コンポジットなどのハイエンドに匹敵する高い機能を持ち、さらにゲームエンジンも搭載しています。

0グッド

0クリップ

投稿2021/12/19 06:17

編集2021/12/19 06:58

表示したいサンプルソースの置いてあるサイト
このページのトップ画像すぐ下のサンプルソースを表示させてみたい。
なぜか動作しません。
何が問題ですか?

※追記
[Error] Cross origin requests are only supported for HTTP.
(anonymous関数) (three.min.js:262:379)
(anonymous関数) (three.min.js:260:285)
init (index.html:67)
(anonymous関数) (index.html:32)
グローバルコード (index.html:97)
[Error] XMLHttpRequest cannot load file:///Users/コンピューターの名前/Desktop/20150108_data/models/monkey.json due to access control checks.
(anonymous関数) (three.min.js:262:379)
(anonymous関数) (three.min.js:260:285)
init (index.html:67)
(anonymous関数) (index.html:32)
グローバルコード (index.html:97)
[Error] THREE.JSONLoader: "models/monkey.json" seems to be unreachable or the file is empty.
(anonymous関数) (three.min.js:261:445)

のようなエラーが出てました。

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

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

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

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

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

cx20

2021/12/19 06:40

ブラウザのコンソールにエラーが出ていませんか?
justmeet0924

2021/12/19 06:59

確かにそうですね。チェックしてみました。
justmeet0924

2021/12/19 07:00

JSONファイルが読めないのでしょうか。
cx20

2021/12/19 07:13

はい。JSON ファイルが読めていないのが原因です。回答欄に記載しましたがローカルの Web サーバを立てる必要があります。
guest

回答1

0

ベストアンサー

Cross origin requests are only supported for HTTP

エラーの意味はこちらを参照下さい。

■ 【Ajax】ローカルファイルを読み込もうとしたらCORSエラーが発生したので解決した
https://qiita.com/terufumi1122/items/39b2a3659bc585c07f64

つまるところ、ローカルの JSON ファイルをセキュリティ的な問題により読み込めなかった為、エラーとなっています。
対処方法としては、ローカルの Web サーバを立てる必要があります。
簡単な方法としては Python がインストール済みであれば、簡単に Web サーバ機能を使うことができます。

■ pythonでローカルwebサーバを立ち上げる
https://qiita.com/okhrn/items/4d3c74563154f191ba16

コマンドプロンプトより index.html がある場所に移動し

python -m http.server 8000

を実行してみて下さい。

http://localhost:8000

でアクセスできるようになるかと思います。

投稿2021/12/19 07:07

cx20

総合スコア4648

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

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

justmeet0924

2021/12/19 07:14

ありがとうございます。 pythonでサーバーを立ててみます。 ローカルサーバーといえば、僕はxamppを使ったことがあります。 pythonで立てるローカルサーバーとは、これとはまた別物ですか?
cx20

2021/12/19 07:19

python は一例ですので、xampp でも構いません。 python の Web サーバ機能は簡易的なものですので、むしろ xampp の Apache で動かした方が環境としては良いかと思います。
justmeet0924

2021/12/19 08:08

pythonで立てたローカルサーバーで無事に表示できました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問