質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1962閲覧

Three.js 風のデータを視覚化したい

退会済みユーザー

退会済みユーザー

総合スコア0

D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/03/10 15:00

前提・実現したいこと

Three.jsで作った球体の表面に、風のデータをパーティクルで表現したいと思っています。
http://www.techscore.com/blog/2015/12/13/wind_visualization/
こちらを参考に、世界規模の風速データwind.ieeeを取得しました。

発生している問題

肝心のデータを描画するところで、手が止まってしまいました。
球体の表面に、指定した座標通りの数個の点を描画したいとき、どのように記述するのが最適な方法なのかわかりません。

試したこと

今は、まず1フレーム分の風データを、球に描画してみようと思っています。
下のコードは、取り合えずPointsを試そうと思い、球の中にxyzが150の四角を点で作ってみたものです。

geometry = new THREE.SphereGeometry(150, 30, 30); for (var i = 0; i < 3000; i++){ geometry.vertices.push(new THREE.Vector3( 150 * Math.random() - 75, 150 * Math.random() - 75, 150 * Math.random() - 75 )); } console.log(geometry.vertices); material = new THREE.PointsMaterial({ size: 1, sizeAttenuation: true, transparent: true, color: 0xffffff }); particles = new THREE.Points(geometry, material); scene.add(particles);

なんとなく、Vector3で風データのxyzを与えて(極座標計算して)、作れるのかなと思ったのですが、どうにもgeometry.verticesの中身を見てみると座標ではないのか?という気がします。
Vector3はベクトルのこととのことですが、プログラミングの経験が浅く、ベクトルとはなんぞや?となってしまいました。

D3.jsでは標高データや気象データを使用して何かを作るというものが多いのですが、Three.jsでは全くと言っていいほどなくて。。。

どうアプローチすればいいかなどアドバイスをいただけると幸いです。
geometry.verticesの中身は、以下のようになっています。

(3872) [p, p, p, p, p, p, p, p, p, p, …] [0 … 99] 0:p {x: 0, y: 150, z: 0} 1:p {x: -15.679269790649414, y: 149.17828369140625, z: 0} 2:p {x: -15.336639404296875, y: 149.17828369140625, z: 3.2599034309387207} 3:p {x: -14.323725700378418, y: 149.17828369140625, z: 6.377333641052246} ... [100 … 199] [200 … 299] ... [3400 … 3499] [3500 … 3599] [3600 … 3699] [3700 … 3799] [3800 … 3871] length:3872

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

本当に、低レベルな質問をしてしまいました。。。
極座標を計算する関数が公開されており、

geometry = new THREE.SphereGeometry(150, 30, 30); geometry.vertices = []; for (var i = 0; i < 5000; i++){ // THREE.Vector3:3Dベクトルを表す。x, y, z var zahyo = translateGeoCoords(360*Math.random(), 180*Math.random(), 150); geometry.vertices.push(new THREE.Vector3( zahyo.x, zahyo.y, zahyo.z )); } console.log(geometry.vertices); material = new THREE.PointsMaterial({size: 1,sizeAttenuation: true,transparent: true,color: 0xffffff}); particles = new THREE.Points(geometry, material); scene.add(particles);

このようにすることで、表面に点を描画することができ、
且つ繰り返した回数分の配列数となりました。

Vector3は、(0,0,0)~(x,y,z)までの距離とのことでした。

投稿2018/03/10 15:30

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問