前提
大学の研究で、PythonFlaskでサーバーを構成し、three.jsを使用することでobj mtlファイルを読み込むプロフラムを利用しています。
データのやり取りはJSON形式で利用しています
前のものがtheree.jsのr96で書かれていたものだったので、r146に変更しようと画策しているところです
かれこれ3週間ほど躓いています
実現したいこと
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件
あなたの回答
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 編集