teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Three.js: 肺臓に血管を通したい

編集履歴

質問編集履歴

11

追記3. 血管を通す動画を掲載。

2020/07/26 07:32

投稿

katahiromz
katahiromz

スコア186

test CHANGED
File without changes
test CHANGED
@@ -333,3 +333,11 @@
333
333
 
334
334
 
335
335
  [https://twitter.com/katahiromz/status/1287192744268451841?s=19](https://twitter.com/katahiromz/status/1287192744268451841?s=19)
336
+
337
+
338
+
339
+ 追記3. もう少しです。
340
+
341
+ [https://twitter.com/katahiromz/status/1287289038190256130](https://twitter.com/katahiromz/status/1287289038190256130)
342
+
343
+ [https://github.com/katahiromz/3D/blob/master/8.html](https://github.com/katahiromz/3D/blob/master/8.html)

10

2020/07/26 07:32

投稿

katahiromz
katahiromz

スコア186

test CHANGED
File without changes
test CHANGED
@@ -325,3 +325,11 @@
325
325
 
326
326
 
327
327
  単一のDHTMLで実行可能で、許容範囲内のコストであれば、どのようなアルゴリズムでも構いません。
328
+
329
+
330
+
331
+ 追記2. 接続方法の例を次のリンクに示します。
332
+
333
+
334
+
335
+ [https://twitter.com/katahiromz/status/1287192744268451841?s=19](https://twitter.com/katahiromz/status/1287192744268451841?s=19)

9

「どのようなアルゴリズムでも構いません」追記。

2020/07/26 01:37

投稿

katahiromz
katahiromz

スコア186

test CHANGED
File without changes
test CHANGED
@@ -321,3 +321,7 @@
321
321
  }
322
322
 
323
323
  ```
324
+
325
+
326
+
327
+ 単一のDHTMLで実行可能で、許容範囲内のコストであれば、どのようなアルゴリズムでも構いません。

8

タイトルを変更２

2020/07/24 09:46

投稿

katahiromz
katahiromz

スコア186

test CHANGED
@@ -1 +1 @@
1
- lThree.js: 肺臓に血管を通したい
1
+ Three.js: 肺臓に血管を通したい
test CHANGED
File without changes

7

追記４．

2020/07/24 09:05

投稿

katahiromz
katahiromz

スコア186

test CHANGED
File without changes
test CHANGED
@@ -242,4 +242,82 @@
242
242
 
243
243
 
244
244
 
245
- 問題は、三次元であって、気管支が2方向に分かれたり、3方向に分かれたりして血管の位置を定めるのが難しいことです。三次元でどうやって血管を通す再帰的なアルゴリズムを実現すればいいのかわかりません。
245
+ 問題は、三次元であって、気管支が2方向に分かれたり、3方向に分かれたりして血管の位置を定めるのが難しいことです。三次元でどうやって血管を通す再帰的なアルゴリズムを実現すればいいのかわかりません。問題の関数は次の`tree3`関数と`lung`関数です。これにどうやって血管を追加すればいいでしょうか。
246
+
247
+
248
+
249
+ ```js
250
+
251
+ // 三脚のように三方向に分かれる木構造を描画する。
252
+
253
+ function tree3(size, depth, angle) {
254
+
255
+ if (depth == 0) {
256
+
257
+ turtle.add_sphere(0.5, turtle.get_pos(), 0xFFFFFF);
258
+
259
+ return;
260
+
261
+ }
262
+
263
+ var pg = turtle.get_pg();
264
+
265
+ turtle.line_width = size / 5;
266
+
267
+ turtle.walk(size);
268
+
269
+ turtle.pitch(angle);
270
+
271
+ tree3(size * 0.75, depth - 1, angle);
272
+
273
+ turtle.pitch(-angle);
274
+
275
+ turtle.spin(120);
276
+
277
+ turtle.pitch(angle);
278
+
279
+ tree3(size * 0.75, depth - 1, angle);
280
+
281
+ turtle.pitch(-angle);
282
+
283
+ turtle.spin(-240);
284
+
285
+ turtle.pitch(angle);
286
+
287
+ tree3(size * 0.75, depth - 1, angle);
288
+
289
+ turtle.set_pg(pg);
290
+
291
+ }
292
+
293
+
294
+
295
+ // 肺臓を描画する関数。
296
+
297
+ function lung(size, depth, angle) {
298
+
299
+ var pg = turtle.get_pg();
300
+
301
+ turtle.line_width = size / 5;
302
+
303
+ turtle.spin(90);
304
+
305
+ turtle.walk(size);
306
+
307
+ turtle.pitch(angle * 1.2);
308
+
309
+ tree3(size * 0.75, depth - 1, angle);
310
+
311
+ turtle.pitch(-angle * 1.2);
312
+
313
+ turtle.spin(180);
314
+
315
+ turtle.pitch(angle * 1.2);
316
+
317
+ tree3(size * 0.75, depth - 1, angle);
318
+
319
+ turtle.set_pg(pg);
320
+
321
+ }
322
+
323
+ ```

6

二次元で血管を通す。追記。

2020/07/24 08:54

投稿

katahiromz
katahiromz

スコア186

test CHANGED
File without changes
test CHANGED
@@ -159,3 +159,87 @@
159
159
  次のように太い線も描けます：
160
160
 
161
161
  ![太い線](d3ce733a3a60981e5b5261abebed570d.png)
162
+
163
+
164
+
165
+ 平面的ならば、血管を通すのは比較的簡単です。Zを少しずらして描けば実現できます：
166
+
167
+ ```js
168
+
169
+ // 二次元の木構造を描画する。
170
+
171
+ function tree(size, depth, angle) {
172
+
173
+ if (depth == 0) {
174
+
175
+ turtle.add_sphere(0.5, turtle.get_pos(), 0xFFFF00);
176
+
177
+ return;
178
+
179
+ }
180
+
181
+ var pg = turtle.get_pg();
182
+
183
+ turtle.walk(size);
184
+
185
+ turtle.turn(angle);
186
+
187
+ tree(size * 0.75, depth - 1, angle);
188
+
189
+ turtle.turn(-2.0 * angle);
190
+
191
+ tree(size * 0.75, depth - 1, angle);
192
+
193
+ turtle.turn(angle);
194
+
195
+ turtle.walk(-size);
196
+
197
+ }
198
+
199
+
200
+
201
+ // 全体の描画処理。
202
+
203
+ function draw() {
204
+
205
+ turtle.reset();
206
+
207
+ turtle.look_y();
208
+
209
+ turtle.line_width = 0.4;
210
+
211
+ turtle.line_color = 0xFFFFFF;
212
+
213
+ tree(7, 8, 30);
214
+
215
+ turtle.look_y();
216
+
217
+ turtle.line_width = 0.1;
218
+
219
+ turtle.line_color = 0xFF0000;
220
+
221
+ turtle.position.z += 0.3;
222
+
223
+ tree(7, 8, 30);
224
+
225
+ turtle.look_y();
226
+
227
+ turtle.line_width = 0.1;
228
+
229
+ turtle.line_color = 0x0000FF;
230
+
231
+ turtle.position.z -= 0.3 * 2;
232
+
233
+ tree(7, 8, 30);
234
+
235
+ }
236
+
237
+ ```
238
+
239
+ こうなります：
240
+
241
+ ![平面で血管を通す](d96421207e8fafea75b86c0c40b6b405.png)
242
+
243
+
244
+
245
+ 問題は、三次元であって、気管支が2方向に分かれたり、3方向に分かれたりして血管の位置を定めるのが難しいことです。三次元でどうやって血管を通す再帰的なアルゴリズムを実現すればいいのかわかりません。

5

太い線。

2020/07/24 08:43

投稿

katahiromz
katahiromz

スコア186

test CHANGED
@@ -1 +1 @@
1
- Three.js: 肺臓に血管を通したい
1
+ lThree.js: 肺臓に血管を通したい
test CHANGED
@@ -136,4 +136,26 @@
136
136
 
137
137
 
138
138
 
139
- このようにタートルグラフィックスと描画アルゴリズムを使用すれば、再帰的に複雑な図形が描画できます。
139
+ このようにタートルグラフィックスと描画アルゴリズムを使用すれば、再帰的に複雑な図形が描画できます。線の太さ`turtle.line_width`を指定すれば
140
+
141
+ ```js
142
+
143
+ function draw() {
144
+
145
+ turtle.reset();
146
+
147
+ turtle.look_y();
148
+
149
+ turtle.line_width = 0.25;
150
+
151
+ turtle.line_color = 0xFF0000;
152
+
153
+ tree(7, 8, 30);
154
+
155
+ }
156
+
157
+ ```
158
+
159
+ 次のように太い線も描けます：
160
+
161
+ ![太い線](d3ce733a3a60981e5b5261abebed570d.png)

4

追記３．

2020/07/24 08:32

投稿

katahiromz
katahiromz

スコア186

test CHANGED
File without changes
test CHANGED
@@ -81,3 +81,59 @@
81
81
  このように書くとこうなります：
82
82
 
83
83
  ![look_y](6247dfa4fae2c40bd352b7ce05ea75af.png)
84
+
85
+
86
+
87
+ 次のように書くと：
88
+
89
+ ```js
90
+
91
+ // 二次元の木構造を描画する。
92
+
93
+ function tree(size, depth, angle) {
94
+
95
+ if (depth == 0)
96
+
97
+ return;
98
+
99
+ var pg = turtle.get_pg();
100
+
101
+ turtle.walk(size);
102
+
103
+ turtle.turn(angle);
104
+
105
+ tree(size * 0.75, depth - 1, angle);
106
+
107
+ turtle.turn(-2.0 * angle);
108
+
109
+ tree(size * 0.75, depth - 1, angle);
110
+
111
+ turtle.set_pg(pg);
112
+
113
+ }
114
+
115
+
116
+
117
+ // 全体の描画処理。
118
+
119
+ function draw() {
120
+
121
+ turtle.reset();
122
+
123
+ turtle.look_y();
124
+
125
+ turtle.line_color = 0xFF0000;
126
+
127
+ tree(7, 8, 30);
128
+
129
+ }
130
+
131
+ ```
132
+
133
+ こうなります：
134
+
135
+ ![tree](adf0f346dd9fc7a7bda9d721b74c080d.png)
136
+
137
+
138
+
139
+ このようにタートルグラフィックスと描画アルゴリズムを使用すれば、再帰的に複雑な図形が描画できます。

3

`turn`修正。

2020/07/24 08:27

投稿

katahiromz
katahiromz

スコア186

test CHANGED
File without changes
test CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
  turtle.walk(20);
48
48
 
49
- turtle.turn(90);
49
+ turtle.turn(30);
50
50
 
51
51
  turtle.walk(20);
52
52
 
@@ -70,7 +70,7 @@
70
70
 
71
71
  turtle.walk(20);
72
72
 
73
- turtle.turn(90);
73
+ turtle.turn(30);
74
74
 
75
75
  turtle.walk(20);
76
76
 

2

追記２。

2020/07/24 08:24

投稿

katahiromz
katahiromz

スコア186

test CHANGED
File without changes
test CHANGED
@@ -79,3 +79,5 @@
79
79
  ```
80
80
 
81
81
  このように書くとこうなります：
82
+
83
+ ![look_y](6247dfa4fae2c40bd352b7ce05ea75af.png)

1

追記１。

2020/07/24 08:23

投稿

katahiromz
katahiromz

スコア186

test CHANGED
File without changes
test CHANGED
@@ -23,3 +23,59 @@
23
23
 
24
24
 
25
25
  よろしくお願い致します。
26
+
27
+
28
+
29
+ 追記。三次元タートルグラフィックスの実装に`Turtle3D.js`ファイルを使用しております。タートルグラフィックスというのは、位置と向きの情報を持ったカメ（turtle）を操作して描画するというものです。
30
+
31
+
32
+
33
+ まずは、[https://github.com/katahiromz/3D](https://github.com/katahiromz/3D)を丸ごとダウンロードして、`Turtle3D.js`をご覧下さい。`turtle.look_x`はX軸方向を向く関数です。`turtle.look_y`はY軸方向を向く関数です。`turtle.look_z`はZ軸方向を向く関数です。`turtle.walk`関数で進行方向に長さdistanceだけ前進し、引数`enable_pen`が`true`なら進んだ分だけ線を描画します。`turtle.turn`, `turtle.spin`, `turtle.pitch`はカメの向きを調整する関数です。
34
+
35
+
36
+
37
+ 簡単な例を提示します。
38
+
39
+ ```js
40
+
41
+ function draw() {
42
+
43
+ turtle.reset();
44
+
45
+ turtle.look_x();
46
+
47
+ turtle.walk(20);
48
+
49
+ turtle.turn(90);
50
+
51
+ turtle.walk(20);
52
+
53
+ }
54
+
55
+ ```
56
+
57
+ このように書くとこうなります：
58
+
59
+ ![look_x](10281378cd247fa6dc0c16efbaad819d.png)
60
+
61
+
62
+
63
+ ```js
64
+
65
+ function draw() {
66
+
67
+ turtle.reset();
68
+
69
+ turtle.look_y();
70
+
71
+ turtle.walk(20);
72
+
73
+ turtle.turn(90);
74
+
75
+ turtle.walk(20);
76
+
77
+ }
78
+
79
+ ```
80
+
81
+ このように書くとこうなります：