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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

10118閲覧

【three.js(r86)】3Dモデルが表示されない

afroscript

総合スコア148

Three.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2017/06/24 21:15

Three.js初心者です。

3Dモデルのファイル(.obj)を読み込んで表示しようとしています。

ここにあるOBJLoaderを使ってできるかなと思ってやってみたのですが、まったく何も表示されず。。。
(エラーメッセージも特に出てないです。。。)

ソースコードを貼りますので、
どなたか原因分かる方いれば、教えていただけるとうれしいです...!!

よろしくお願いします。

※使用しているthree.jsのrevisionはr86です。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>DNA</title> 6<style rel="stylesheet" href="css/index.css"></style> 7<script src="js/three.js-master/build/three.js"></script> 8<script src="js/lib/OrbitControls.js"></script> 9<script src="js/three.js-master/src/loaders/OBJLoader.js"></script> 10<!-- OBJLoader.js -> https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/OBJLoader.js --> 11</head> 12 13<body> 14<script src="js/main.js"></script> 15</body> 16</html>

javascript

1/* 2 * WebGLRendererの生成 3 */ 4var renderer = new THREE.WebGLRenderer({antialias: true}); 5renderer.setSize(window.innerWidth, window.innerHeight); 6renderer.setPixelRatio(window.devicePixelRatio); 7renderer.setClearColor(0x000000, 1.0); 8document.body.appendChild(renderer.domElement); 9 10 11/* 12 * シーンの追加 13 */ 14var scene = new THREE.Scene(); 15 16 17/* 18 * カメラの生成 19 */ 20var fov = 75; 21var aspect = window.innerWidth / window.innerHeight; 22var near = 0.1; 23var far = 10000; 24var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); 25var camera_position_x0 = 0; 26var camera_position_y0 = 0; 27var camera_position_z0 = 800; 28camera.position.set(camera_position_x0,camera_position_y0,camera_position_z0); 29 30 31/* 32 * Orbitコントローラを生成 33 */ 34var controls = new THREE.OrbitControls(camera, renderer.domElement); 35 36 37/* 38 * Lightをシーンに追加 39 */ 40var light = new THREE.DirectionalLight(0xffffff); 41light.position.set(0,30,-50); 42scene.add(light); 43 44 45/* 46 *環境光を追加 47 */ 48var ambient = new THREE.AmbientLight(0x333333); 49scene.add(ambient); 50 51 52/* 53 * 3Dモデルの読み込み 54 */ 55var loader = new THREE.OBJLoader(); 56 57loader.load('obj/DNA.obj', function ( object ) { 58 scene.add( object ); 59}); 60 61 62/* 63 *レンダリング 64 */ 65function renderRender() { 66 renderer.render(scene, camera); 67 68 requestAnimationFrame(animate); 69} 70 71/* 72 *アニメーション 73 */ 74function animate(){ 75 renderRender() 76} 77 78animate(); 79

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

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

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

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

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

guest

回答3

0

ベストアンサー

考えられる原因

  1. 仮に、WEBページで見ているとしたら、サーバー立ち上げていますか?ERRORが出てないと書いてますが、下記のようなERRORが出てたら多分これです(念のため)。

XMLHttpRequest cannot load file:///sample.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
2. 実は読み込まれているけれどオブジェクトが透明 or カメラの外

読み込まれた'obj/DNA.obj'が実は初期値で透明だったり、カメラの範囲外だった場合、scene.addの前で調整してると良いかもしれません。

以前、BlenderのImport用に作ったものを参考に挙げておきますね。何かのお役に立てると良いです。json用ですが。。。

ロードの該当項目は119〜136行目になります。

投稿2017/06/24 23:35

編集2017/06/24 23:35
Gazelle

総合スコア136

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

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

afroscript

2017/06/25 07:37

ありがとうございます! 2が原因でした! カメラの位置が遠すぎたようで、カメラ位置を変更(amera_position_z0=0)にしたら表示されました...!! 初歩的なところで、恐縮です。。。
guest

0

ソースコードに問題は無いですね。
OBJLoader.jsのURLが気になりますが、試しに以下とかでマスターから取得してみてはどうでしょう

<script src="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/loaders/OBJLoader.js" />

追記:直リンクだとMimeTypeの問題で上手くいかないようです。(質問と同じ状況になりました)
下記のようにダウンロードして実行すれば上手くいきました。

cd js/lib/ wget https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/loaders/OBJLoader.js
<script src="js/lib/OBJLoader.js" />

投稿2017/06/25 01:06

編集2017/06/25 01:38
m2wasabi

総合スコア18

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

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

afroscript

2017/06/25 07:40

wasabiさん、ご回答ありがとうございます!! カメラが遠すぎたのが要因でした。。。
guest

0

原因を考えて、二つほど思いついたのですが、

一つ目は、マテリアルやテクスチャを設定していないために表示されない。
objファイルは、頂点の位置、UV、法線情報などを持ったデータ形式だと思ったので、
マテリアルやテクスチャの情報がないと表示されないのではないかと思いました。

二つ目は、objファイルがきちんと表示される形で出力されていない。
何を使われて、objファイルを出力されたかわかりませんが、エクスポート時の設定等も重要になってきます。
objファイルの情報も、補足していただければ、皆様が答えやすくなると思います。

投稿2017/06/24 21:45

snow

総合スコア54

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

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

afroscript

2017/06/25 07:45

snowさん、ご回答ありがとうございます! カメラの位置が遠い3Dオブジェクトから遠すぎるが原因でした。。。 (カメラの位置を調整したら、表示されておりました。初歩的なところでお恥ずかしい。。。)
snow

2017/06/25 08:01

いえいえ、解決されたなら良かったです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問