Q&A
前提
大学の研究で、PythonFlaskでサーバーを構成し、three.jsを使用することでobj mtlファイルを読み込むプロフラムを利用しています。
データのやり取りはJSON形式で利用しています
前のものがtheree.jsのr96で書かれていたものだったので、r146に変更しようと画策しているところです
かれこれ３週間ほど躓いています
実現したいこと
obj,mtlファイルをwebブラウザ上に表示させたいです
発生している問題・エラーメッセージ
エラーは出ていませんが、画面が真っ白で希望している3Dモデルが表示されません
エラーメッセージ
該当のソースコード
/////////////////階層構造 test |+test.html |+models |+obj |+male02 |+male02.mtl |+male02.obj |+male02に関する画像ファイル |+wakamiya.mtl |+wakamiyaに関するobjファイルすべて |+wakamiyaに関する画像ファイル /////////////////うまくいったもの <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <style> *{margin:0px} </style> </head> <body> <!-- ① importmap を使用した書き方に変更 --> <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.146.0/build/three.module.js", "three/addons/": "https://unpkg.com/three@0.146.0/examples/jsm/" } } </script> <script type="module"> import * as THREE from 'three'; import { MTLLoader } from 'three/addons/loaders/MTLLoader.js'; import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'; let camera, scene, renderer; let mouseX = 0, mouseY = 0; let windowHalfX = window.innerWidth / 2; let windowHalfY = window.innerHeight / 2; init(); animate(); function init() { const container = document.createElement( 'div' ); document.body.appendChild( container ); camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 ); camera.position.z = 250; // scene scene = new THREE.Scene(); const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 ); scene.add( ambientLight ); const pointLight = new THREE.PointLight( 0xffffff, 0.8 ); camera.add( pointLight ); scene.add( camera ); // model const onProgress = function ( xhr ) { if ( xhr.lengthComputable ) { const percentComplete = xhr.loaded / xhr.total * 100; console.log( Math.round( percentComplete, 2 ) + '% downloaded' ); } }; new MTLLoader() .setPath( 'models/obj/male02/') .load( 'male02.mtl', function ( materials ) { materials.preload(); new OBJLoader() .setMaterials( materials ) .setPath( 'models/obj/male02/' ) .load( 'male02.obj', function ( object ) { object.position.y = - 95; scene.add( object ); }, onProgress ); } ); // renderer = new THREE.WebGLRenderer(); renderer.outputEncoding = THREE.sRGBEncoding; renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); document.addEventListener( 'mousemove', onDocumentMouseMove ); // window.addEventListener( 'resize', onWindowResize ); } function onWindowResize() { windowHalfX = window.innerWidth / 2; windowHalfY = window.innerHeight / 2; camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } function onDocumentMouseMove( event ) { mouseX = ( event.clientX - windowHalfX ) / 2; mouseY = ( event.clientY - windowHalfY ) / 2; } // function animate() { requestAnimationFrame( animate ); render(); } function render() { camera.position.x += ( mouseX - camera.position.x ) * .05; camera.position.y += ( - mouseY - camera.position.y ) * .05; camera.lookAt( scene.position ); renderer.render( scene, camera ); } </script> </body> </html> ////////////うまくいかなかったものpart1(new MTLLoaderの中身だけ変更しました) new MTLLoader() .setPath( 'models/obj/male02/') .load( 'wakamiya.mtl', function ( materials ) { materials.preload(); new OBJLoader() .setMaterials( materials ) .setPath( 'models/obj/male02/' ) .load( 'wakamiya_Span1.obj', function ( object ) { object.position.y = - 95; scene.add( object ); }, onProgress ); } ); ////////////うまくいかなかったものpart2(new MTLLoaderの中身において全てのobjファイルを含むように変更 ) new MTLLoader() .setPath( 'models/obj/male02/') .load( 'wakamiya.mtl', function ( materials ) { materials.preload(); new OBJLoader() .setMaterials( materials ) .setPath( 'models/obj/male02/' ) .load( 'wakamiya_Pier1.obj', function ( object ) { object.position.y = - 95; scene.add( object ); }, onProgress ); new OBJLoader() .setMaterials( materials ) .setPath( 'models/obj/male02/' ) .load( 'wakamiya_Pier2.obj', function ( object ) { object.position.y = - 95; scene.add( object ); }, onProgress ); new OBJLoader() .setMaterials( materials ) .setPath( 'models/obj/male02/' ) .load( 'wakamiya_Span1.obj', function ( object ) { object.position.y = - 95; scene.add( object ); }, onProgress ); new OBJLoader() .setMaterials( materials ) .setPath( 'models/obj/male02/' ) .load( 'wakamiya_Span2.obj', function ( object ) { object.position.y = - 95; scene.add( object ); }, onProgress ); new OBJLoader() .setMaterials( materials ) .setPath( 'models/obj/male02/' ) .load( 'wakamiya_Span3.obj', function ( object ) { object.position.y = - 95; scene.add( object ); }, onProgress ); } ); //////////ここまでが試したパターンになります //////////r96で作成されたうまくいっているもの //////////jqueryInterface.js function CallOBJ(){ var json = JSON.stringify($(this).attr("id")); $.ajax({ type:'POST', url:'/bridge', data:json, contentType:'application/json', //サーバからの返送データ(json)を受け取る success: function(data){ var result = JSON.parse(data.ResultSet1); SetOBJ(result); } }); //a要素のクリックイベントの場合はfalseを返して、リンク遷移を回避する必要がある。 return false; } function SetOBJ(Path){ var onProgress = function (xhr){}; var onError = function(xhr){}; new THREE.MTLLoader() .load('/obj/'+Path.FilenameSet[0].mtl,function(materials){ materials.preload(); for(i=0; i < Path.FilenameSet.length; i++){ new THREE.OBJLoader() .setMaterials(materials) .load('/obj/'+Path.FilenameSet[i].obj,function(object){ objmodel = object.clone(); objmodel.scale.set(1,1,1); obj = new THREE.Object3D(); obj.add(objmodel); group.add(obj); },onProgress, onError); } }); } //////////////check_VR.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>橋のモデル</title> <script src="/static/three.js"></script> <script src="/static/OBJLoader.js"></script> <script src="/static/MTLLoader.js"></script> <script src="/static/jquery-3.1.1.min.js"></script> <script src="/static/jqueryInterface.js"></script> <style> *{margin:0px} </style> </head> <body> <script> var container, statsVR; var room, camera, scene, renderer, group; var controller1, controller2; var raycaster, intersects = []; var objects = [], TextBoard; var tempMatrix = new THREE.Matrix4(); var VRDisplay, VRPose; init(); animate(); function init(){ container = document.createElement( 'div' ); document.body.appendChild( container ); scene = new THREE.Scene(); scene.background = new THREE.Color( 0xffffff ); camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000000 ); scene.add(camera); var light1 = new THREE.DirectionalLight(); var light2 = new THREE.DirectionalLight(); light1.position.set( 20, 20, 20 ); light2.position.set( -20, -20, -10 ); scene.add( light1 ); scene.add( light2 ); //500mbの若宮 group = new THREE.Group(); group.position.set(-20000,0,-20000); group.rotation.set(-Math.PI/2,0,Math.PI/2); scene.add( group ); CallOBJ(); renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); } function animate() { requestAnimationFrame( animate ); render() } function render() { renderer.render( scene, camera ); //UpdateBordRotate(); } </script> </body> </html>
試したこと
esmojule形式にした
HTMLファイルの中のinit関数の中に<script src="/static/jquery-3.1.1.min.js"></script>の中身を入れました
前は、new THREE MTLLoader、new THREE OBJLoaderと書いていたがTHREEがいらなくなったみたいなのでTHREEを打ち消し線消した
補足情報（FW/ツールのバージョンなど）
webブラウザの、開発者ツール等を見ても相対パスの指定等は問題ないと思います
回答1件
1
ベストアンサー
three.js の公式サンプルに MTLLoader / OBJLoader のサンプルがありますので、r96 と r146 との違いについて確認してみると良いかもしれません。
https://github.com/mrdoob/three.js/blob/r96/examples/webgl_loader_obj_mtl.html
https://github.com/mrdoob/three.js/blob/r146/examples/webgl_loader_obj_mtl.html
以下は変更例です。
① importmap を使用した書き方に変更してみる
② 単純に scene に object を追加してみる
③ カメラの position を指定してみる
html
1<!-- ① importmap を使用した書き方に変更 --> 2<script type="importmap"> 3{ 4 "imports": { 5 "three": "https://unpkg.com/three@0.146.0/build/three.module.js", 6 "three/addons/": "https://unpkg.com/three@0.146.0/examples/jsm/" 7 } 8} 9</script> 10<script type="module"> 11//import * as THREE from '/static/three.module.js'; 12//import { MTLLoader } from '/static/MTLLoaders.js'; 13//import { OBJLoader } from '/static/OBJLoaders.js'; 14import * as THREE from 'three'; 15import { MTLLoader } from 'three/addons/loaders/MTLLoader.js'; 16import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'; 17 18var container, statsVR; 19var room, camera, scene, renderer, group; 20var controller1, controller2; 21var raycaster, intersects = []; 22var objects = [], TextBoard; 23var tempMatrix = new THREE.Matrix4(); 24var VRDisplay, VRPose; 25var i 26 27 28init(); 29animate(); 30 31 32function CallOBJ() { 33 34 var json = JSON.stringify($(this).attr("id")); 35 36 $.ajax({ 37 type: 'POST', 38 url: '/bridge', 39 data: json, 40 contentType: 'application/json', 41 //サーバからの返送データ(json)を受け取る 42 success: function(data) { 43 var result = JSON.parse(data.ResultSet1); 44 SetOBJ(result); 45 } 46 }); 47 //a要素のクリックイベントの場合はfalseを返して、リンク遷移を回避する必要がある。 48 return false; 49} 50 51function SetOBJ(Path) { 52 var onProgress = function(xhr) {}; 53 var onError = function(xhr) {}; 54 55 new MTLLoader() 56 .load('/obj/' + Path.FilenameSet[0].mtl, function(materials) { 57 materials.preload(); 58 59 for (i = 0; i < Path.FilenameSet.length; i++) { 60 new OBJLoader() 61 .setMaterials(materials) 62 .load('/obj/' + Path.FilenameSet[i].obj, function(object) { 63 //objmodel = object.clone(); 64 //objmodel.scale.set(1, 1, 1); 65 //obj = new THREE.Object3D(); 66 //obj.add(objmodel); 67 //group.add(obj); 68 69 scene.add(object); // ② 単純に scene に object を追加してみる 70 }, onProgress, onError); 71 } 72 }); 73} 74 75function init() { 76 77 container = document.createElement('div'); 78 document.body.appendChild(container); 79 scene = new THREE.Scene(); 80 scene.background = new THREE.Color(0xffffff); 81 camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000000); 82 camera.position.set(0, 0, 100); // ③ カメラの position を指定してみる（値は適当です。適宜設定下さい） 83 scene.add(camera); 84 85 var light1 = new THREE.DirectionalLight(); 86 var light2 = new THREE.DirectionalLight(); 87 light1.position.set(20, 20, 20); 88 light2.position.set(-20, -20, -10); 89 scene.add(light1); 90 scene.add(light2); 91 92 //500mbの若宮 93 group = new THREE.Group(); 94 group.position.set(-20000, 0, -20000); 95 group.rotation.set(-Math.PI / 2, 0, Math.PI / 2); 96 scene.add(group); 97 98 CallOBJ(); 99 100 renderer = new THREE.WebGLRenderer({ 101 antialias: true 102 }); 103 renderer.setPixelRatio(window.devicePixelRatio); 104 renderer.setSize(window.innerWidth, window.innerHeight); 105 container.appendChild(renderer.domElement); 106} 107 108function animate() { 109 requestAnimationFrame(animate); 110 render(); 111} 112 113 114 115function render() { 116 117 renderer.render(scene, camera); 118 119 //UpdateBordRotate(); 120} 121</script> 122
投稿2022/11/13 23:06
総合スコア4605
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/11/14 00:51
2022/11/14 01:17 編集
2022/11/14 11:02
2022/11/14 11:13
2022/11/14 18:21
2022/11/14 18:52 編集
2022/11/14 19:31
2022/11/14 19:57 編集
2022/11/14 20:03
2022/11/15 19:31 編集