前提・実現したいこと
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。