Q&A
wasabiさん、ご回答ありがとうございます！！
カメラが遠すぎたのが要因でした。。。
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
回答3件
2
ベストアンサー
考えられる原因
- 仮に、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
総合スコア136
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
総合スコア18
回答へのコメント
0
原因を考えて、二つほど思いついたのですが、
一つ目は、マテリアルやテクスチャを設定していないために表示されない。
objファイルは、頂点の位置、UV、法線情報などを持ったデータ形式だと思ったので、
マテリアルやテクスチャの情報がないと表示されないのではないかと思いました。
二つ目は、objファイルがきちんと表示される形で出力されていない。
何を使われて、objファイルを出力されたかわかりませんが、エクスポート時の設定等も重要になってきます。
objファイルの情報も、補足していただければ、皆様が答えやすくなると思います。
投稿2017/06/24 21:45
総合スコア54
回答へのコメント
https://threejs.org/examples/#webgl_loader_obj
この例のソースを参考にすると、わかりやすいと思います。
snowさん、ご回答ありがとうございます！
カメラの位置が遠い3Dオブジェクトから遠すぎるが原因でした。。。
(カメラの位置を調整したら、表示されておりました。初歩的なところでお恥ずかしい。。。)
いえいえ、解決されたなら良かったです！
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2017/06/25 07:37