質問編集履歴

4

あさ

2022/11/14 18:50

投稿

abu1234
abu1234

スコア1

test CHANGED
File without changes
test CHANGED
@@ -266,8 +266,7 @@
266
266
 
267
267
 
268
268
 
269
-
269
+ //////////r96で作成されたうまくいっているもの
270
-
271
270
  //////////jqueryInterface.js
272
271
  function CallOBJ(){
273
272
 

3

test

2022/11/14 18:45

投稿

abu1234
abu1234

スコア1

test CHANGED
File without changes
test CHANGED
@@ -18,61 +18,250 @@
18
18
  ### 該当のソースコード
19
19
 
20
20
  ```ここに言語名を入力
21
- /////////////////////r96で書かれた、うまくいっているプログラムです
22
- ////////////main.py
23
- from flask import render_template,Flask,send_from_directory,jsonify
24
- import json
25
-
26
- from IfcOperation import IfcOperation
27
-
28
- app = Flask(__name__)
29
-
30
- ifc=IfcOperation();
31
-
32
- #Initioal (root) Operation
33
- @app.route('/')
34
- def ViewerMain():
35
- return render_template('check_VR.html')
36
-
37
- @app.route('/bridge', methods=['GET','POST'])
38
- def bridgeInformation():
39
- global ifc;
40
- ifc.IfcOpen("WakamiyaDegSample.ifc");
41
- Path = ifc.IfcGetObjectName();
42
- print(Path);
43
- return jsonify(ResultSet1=json.dumps(Path));
44
-
45
- #maker Information sending
46
- @app.route('/marker', methods=['GET','POST'])
47
- def markerInformation():
48
- global ifc;
49
- ifc.IfcOpen("WakamiyaDegSample.ifc");
50
- info = ifc.getMeasurementInfo();
51
- print(info);
52
- return jsonify(ResultSet2=json.dumps(info));
53
-
54
- #degradation Information sending
55
- @app.route('/degradation/<name>', methods=['GET','POST'])
56
- def degradationInformation(name=None):
57
- global ifc;
58
- ifc.IfcOpen("WakamiyaDegSample.ifc");
59
- tclass = ifc.getDegradationInfo(name);
60
- print(tclass);
61
- return jsonify(ResultSet3=json.dumps(tclass));
62
-
63
- #obj directory
64
- @app.route('/obj/<filename>')
65
- def load_obj_file(filename):
66
- return send_from_directory('obj',filename)
67
-
68
- #image directory
69
- @app.route('/image/<filename>')
70
- def load_img_file(filename):
71
- return send_from_directory('image',filename)
72
-
73
- if __name__ == '__main__':
74
- app.run(debug=True)
75
- # app.run(host="0.0.0.0", port=80)
21
+ /////////////////階層構造
22
+ test
23
+ |+test.html
24
+ |+models
25
+ |+obj
26
+ |+male02
27
+              |+male02.mtl
28
+              |+male02.obj
29
+              |+male02に関する画像ファイル
30
+              |+wakamiya.mtl
31
+ |+wakamiyaに関するobjファイルすべて
32
+              |+wakamiyaに関する画像ファイル
33
+
34
+ /////////////////うまくいったもの
35
+ <!DOCTYPE html>
36
+ <html>
37
+
38
+ <head>
39
+ <meta charset="UTF-8">
40
+ <title>test</title>
41
+
42
+ <style>
43
+ *{margin:0px}
44
+ </style>
45
+ </head>
46
+
47
+ <body>
48
+ <!-- importmap を使用した書き方に変更 -->
49
+ <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
50
+ <script type="importmap">
51
+ {
52
+ "imports": {
53
+ "three": "https://unpkg.com/three@0.146.0/build/three.module.js",
54
+ "three/addons/": "https://unpkg.com/three@0.146.0/examples/jsm/"
55
+ }
56
+ }
57
+ </script>
58
+ <script type="module">
59
+
60
+ import * as THREE from 'three';
61
+ import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
62
+ import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
63
+
64
+ let camera, scene, renderer;
65
+
66
+ let mouseX = 0, mouseY = 0;
67
+
68
+ let windowHalfX = window.innerWidth / 2;
69
+ let windowHalfY = window.innerHeight / 2;
70
+
71
+
72
+ init();
73
+ animate();
74
+
75
+
76
+ function init() {
77
+
78
+ const container = document.createElement( 'div' );
79
+ document.body.appendChild( container );
80
+
81
+ camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
82
+ camera.position.z = 250;
83
+
84
+ // scene
85
+
86
+ scene = new THREE.Scene();
87
+
88
+ const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
89
+ scene.add( ambientLight );
90
+
91
+ const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
92
+ camera.add( pointLight );
93
+ scene.add( camera );
94
+
95
+ // model
96
+
97
+ const onProgress = function ( xhr ) {
98
+
99
+ if ( xhr.lengthComputable ) {
100
+
101
+ const percentComplete = xhr.loaded / xhr.total * 100;
102
+ console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
103
+
104
+ }
105
+
106
+ };
107
+
108
+ new MTLLoader()
109
+ .setPath( 'models/obj/male02/')
110
+ .load( 'male02.mtl', function ( materials ) {
111
+
112
+ materials.preload();
113
+
114
+ new OBJLoader()
115
+ .setMaterials( materials )
116
+ .setPath( 'models/obj/male02/' )
117
+ .load( 'male02.obj', function ( object ) {
118
+
119
+ object.position.y = - 95;
120
+ scene.add( object );
121
+
122
+ }, onProgress );
123
+
124
+ } );
125
+
126
+ //
127
+
128
+ renderer = new THREE.WebGLRenderer();
129
+ renderer.outputEncoding = THREE.sRGBEncoding;
130
+ renderer.setPixelRatio( window.devicePixelRatio );
131
+ renderer.setSize( window.innerWidth, window.innerHeight );
132
+ container.appendChild( renderer.domElement );
133
+
134
+ document.addEventListener( 'mousemove', onDocumentMouseMove );
135
+
136
+ //
137
+
138
+ window.addEventListener( 'resize', onWindowResize );
139
+
140
+ }
141
+
142
+ function onWindowResize() {
143
+
144
+ windowHalfX = window.innerWidth / 2;
145
+ windowHalfY = window.innerHeight / 2;
146
+
147
+ camera.aspect = window.innerWidth / window.innerHeight;
148
+ camera.updateProjectionMatrix();
149
+
150
+ renderer.setSize( window.innerWidth, window.innerHeight );
151
+
152
+ }
153
+
154
+ function onDocumentMouseMove( event ) {
155
+
156
+ mouseX = ( event.clientX - windowHalfX ) / 2;
157
+ mouseY = ( event.clientY - windowHalfY ) / 2;
158
+
159
+ }
160
+
161
+ //
162
+
163
+ function animate() {
164
+
165
+ requestAnimationFrame( animate );
166
+ render();
167
+
168
+ }
169
+
170
+ function render() {
171
+
172
+ camera.position.x += ( mouseX - camera.position.x ) * .05;
173
+ camera.position.y += ( - mouseY - camera.position.y ) * .05;
174
+
175
+ camera.lookAt( scene.position );
176
+
177
+ renderer.render( scene, camera );
178
+
179
+ }
180
+
181
+ </script>
182
+
183
+ </body>
184
+ </html>
185
+
186
+
187
+ ////////////うまくいかなかったものpart1(new MTLLoaderの中身だけ変更しました)
188
+ new MTLLoader()
189
+ .setPath( 'models/obj/male02/')
190
+ .load( 'wakamiya.mtl', function ( materials ) {
191
+
192
+ materials.preload();
193
+
194
+ new OBJLoader()
195
+ .setMaterials( materials )
196
+ .setPath( 'models/obj/male02/' )
197
+ .load( 'wakamiya_Span1.obj', function ( object ) {
198
+
199
+ object.position.y = - 95;
200
+ scene.add( object );
201
+
202
+ }, onProgress );
203
+
204
+ } );
205
+
206
+
207
+
208
+ ////////////うまくいかなかったものpart2(new MTLLoaderの中身において全てのobjファイルを含むように変更 )
209
+ new MTLLoader()
210
+ .setPath( 'models/obj/male02/')
211
+ .load( 'wakamiya.mtl', function ( materials ) {
212
+
213
+ materials.preload();
214
+
215
+ new OBJLoader()
216
+ .setMaterials( materials )
217
+ .setPath( 'models/obj/male02/' )
218
+ .load( 'wakamiya_Pier1.obj', function ( object ) {
219
+
220
+ object.position.y = - 95;
221
+ scene.add( object );
222
+
223
+ }, onProgress );
224
+ new OBJLoader()
225
+ .setMaterials( materials )
226
+ .setPath( 'models/obj/male02/' )
227
+ .load( 'wakamiya_Pier2.obj', function ( object ) {
228
+
229
+ object.position.y = - 95;
230
+ scene.add( object );
231
+
232
+ }, onProgress );
233
+ new OBJLoader()
234
+ .setMaterials( materials )
235
+ .setPath( 'models/obj/male02/' )
236
+ .load( 'wakamiya_Span1.obj', function ( object ) {
237
+
238
+ object.position.y = - 95;
239
+ scene.add( object );
240
+
241
+ }, onProgress );
242
+ new OBJLoader()
243
+ .setMaterials( materials )
244
+ .setPath( 'models/obj/male02/' )
245
+ .load( 'wakamiya_Span2.obj', function ( object ) {
246
+
247
+ object.position.y = - 95;
248
+ scene.add( object );
249
+
250
+ }, onProgress );
251
+ new OBJLoader()
252
+ .setMaterials( materials )
253
+ .setPath( 'models/obj/male02/' )
254
+ .load( 'wakamiya_Span3.obj', function ( object ) {
255
+
256
+ object.position.y = - 95;
257
+ scene.add( object );
258
+
259
+ }, onProgress );
260
+
261
+ } );
262
+
263
+ //////////ここまでが試したパターンになります
264
+
76
265
 
77
266
 
78
267
 
@@ -222,143 +411,6 @@
222
411
 
223
412
 
224
413
 
225
- /////////////ここからが変更部分です
226
- //////////////check_VR.html
227
- <!DOCTYPE html>
228
- <html>
229
-
230
- <head>
231
- <meta charset="UTF-8">
232
- <title>橋のモデル</title>
233
- <script src="/static/jquery-3.1.1.min.js"></script>
234
- <
235
- <style>
236
- *{margin:0px}
237
- </style>
238
- </head>
239
-
240
- <body>
241
-
242
- <script type="module">
243
-
244
- import * as THREE from '/static/three.module.js';
245
- import { MTLLoader } from '/static/MTLLoaders.js';
246
- import { OBJLoader } from '/static/OBJLoaders.js';
247
-
248
-
249
-
250
-
251
- var container, statsVR;
252
- var room, camera, scene, renderer, group;
253
- var controller1, controller2;
254
- var raycaster, intersects = [];
255
- var objects = [], TextBoard;
256
- var tempMatrix = new THREE.Matrix4();
257
- var VRDisplay, VRPose;
258
- var i
259
- init();
260
- animate();
261
-
262
-
263
-
264
-
265
- function init(){
266
- function CallOBJ(){
267
-
268
- var json = JSON.stringify($(this).attr("id"));
269
-
270
- $.ajax({
271
- type:'POST',
272
- url:'/bridge',
273
- data:json,
274
- contentType:'application/json',
275
- //サーバからの返送データ(json)を受け取る
276
- success: function(data){
277
- var result = JSON.parse(data.ResultSet1);
278
- SetOBJ(result);
279
- }
280
- });
281
- //a要素のクリックイベントの場合はfalseを返して、リンク遷移を回避する必要がある。
282
- return false;
283
- }
284
-
285
- function SetOBJ(Path){
286
- var onProgress = function (xhr){};
287
- var onError = function(xhr){};
288
-
289
- new MTLLoader()
290
- .load('/obj/'+Path.FilenameSet[0].mtl,function(materials){
291
- materials.preload();
292
-
293
- for(i=0; i < Path.FilenameSet.length; i++){
294
- new OBJLoader()
295
- .setMaterials(materials)
296
- .load('/obj/'+Path.FilenameSet[i].obj,function(object){
297
- objmodel = object.clone();
298
- objmodel.scale.set(1,1,1);
299
-
300
- obj = new THREE.Object3D();
301
- obj.add(objmodel);
302
- group.add(obj);
303
- },onProgress, onError);
304
- }
305
- });
306
- }
307
-
308
- container = document.createElement( 'div' );
309
- document.body.appendChild( container );
310
- scene = new THREE.Scene();
311
- scene.background = new THREE.Color( 0xffffff );
312
- camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000000 );
313
- scene.add(camera);
314
-
315
- var light1 = new THREE.DirectionalLight();
316
- var light2 = new THREE.DirectionalLight();
317
- light1.position.set( 20, 20, 20 );
318
- light2.position.set( -20, -20, -10 );
319
- scene.add( light1 );
320
- scene.add( light2 );
321
-
322
-
323
- //500mbの若宮
324
- group = new THREE.Group();
325
- group.position.set(-20000,0,-20000);
326
- group.rotation.set(-Math.PI/2,0,Math.PI/2);
327
- scene.add( group );
328
-
329
- CallOBJ();
330
-
331
-
332
-
333
- renderer = new THREE.WebGLRenderer( { antialias: true } );
334
- renderer.setPixelRatio( window.devicePixelRatio );
335
- renderer.setSize( window.innerWidth, window.innerHeight );
336
- container.appendChild( renderer.domElement );
337
- }
338
-
339
-
340
-
341
- function animate() {
342
- requestAnimationFrame( animate );
343
- render();
344
- }
345
-
346
-
347
-
348
- function render() {
349
-
350
- renderer.render( scene, camera );
351
-
352
- //UpdateBordRotate();
353
- }
354
-
355
- </script>
356
- </body>
357
- </html>
358
-
359
-
360
-
361
-
362
414
 
363
415
 
364
416
 

2

ほそく

2022/11/13 16:31

投稿

abu1234
abu1234

スコア1

test CHANGED
File without changes
test CHANGED
@@ -16,8 +16,9 @@
16
16
  ```
17
17
 
18
18
  ### 該当のソースコード
19
+
20
+ ```ここに言語名を入力
19
21
  /////////////////////r96で書かれた、うまくいっているプログラムです
20
- ```ここに言語名を入力
21
22
  ////////////main.py
22
23
  from flask import render_template,Flask,send_from_directory,jsonify
23
24
  import json

1

補足説明

2022/11/13 16:30

投稿

abu1234
abu1234

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提
2
2
 
3
- 大学の研究で、PythonFlaskでサーバーを構成し、three.jsを使用することでobj mtlファイルを読み込むプロフラムを使用しています。
3
+ 大学の研究で、PythonFlaskでサーバーを構成し、three.jsを使用することでobj mtlファイルを読み込むプロフラムを用しています。
4
4
  データのやり取りはJSON形式で利用しています
5
5
  前のものがtheree.jsのr96で書かれていたものだったので、r146に変更しようと画策しているところです
6
6
  かれこれ3週間ほど躓いています
@@ -16,7 +16,7 @@
16
16
  ```
17
17
 
18
18
  ### 該当のソースコード
19
-
19
+ /////////////////////r96で書かれた、うまくいっているプログラムです
20
20
  ```ここに言語名を入力
21
21
  ////////////main.py
22
22
  from flask import render_template,Flask,send_from_directory,jsonify