three.jsで3Dモデルの座標データにパーティクルを配置する方法

Question

（WebGL初学者です..）

やりたいこと

blenderでエクスポートした3Dモデルの座標データにパーティクルを撒き散らす

やろうとしている流れ

1. blenderで3Dモデルの座標データをglb形式でエクスポート
2. three.jsのGLTFLoaderでglbファイルを読み込む
3. 読み込んだglbデータから、モデルの3D座標を取得
4. 取得した座標にパーティクルをセット

現状

1. 読み込んだglbデータから、モデルの3D座標を取得
2. 取得した座標にパーティクルをセット

こちらで躓いてます（想定してる形状になりません）
エラーは出てないので、そもそもの考え方のアドバイスをいただけると助かります。

■質問1

1. 読み込んだglbデータから、モデルの3D座標を取得

こちらは以下の方法で認識相違ないでしょうか？（それっぽい配列は取得できているようです）

const gltfLoader = new GLTFLoader();

gltfLoader.load(hoge.glb, (gltf) => {
	const model = gltf.scene;
	const mesh = model.children[2];
	const geometry = mesh.geometry;
	const position = geometry.getAttribute('position');
	const data = position.array; // gltf (BufferGeometry) の座標データ（？）
});

■質問2

1. 取得した座標にパーティクルをセット

こちらは以下の方法で実現可能でしょうか？

const scene = new THREE.Scene();
const geometry = new THREE.Geometry();

for (let i = 0; i < 3000; i++) {
    const vertex = new THREE.Vector3();

    vertex.x = ？？？？？？？？？？？; // glbの座標データをランダムに代入したい
    vertex.y = ？？？？？？？？？？？; // glbの座標データをランダムに代入したい
    vertex.z = ？？？？？？？？？？？; // glbの座標データをランダムに代入したい

    geometry.vertices.push(vertex);
}

const material = new THREE.PointsMaterial();
const particle = new THREE.Points(geometry, material);
scene.add(particle);

以上、よろしくお願いいたします！

Answer 1

昔作ったサンプルがありましたので、ご参考まで。

■ three.js でパーティクルを3Dモデルの頂点座標に表示させてみるテスト
https://cx20.github.io/jsdo.it-archives/cx20/oxZL/

Comments

[asdhfak]

ご回答ありがとうございます。

> ■質問1
> ■質問2
こちらに関しては頂いたサンプルを参考に解決しました。
ありがとうございます！

**

お手数ですが、一点追加で質問させてください。

■質問
blenderでSVGからモデリング => three.jsでパーティクル
をする際に、やるべきことや注意事項などあればご教授いただきたいです。

■やったこと
1. SVGをblenderにインポート
2. ジオメトリを立体にする（押し出し、深度等の調整）
3. カーブ => メッシュに変換
4. GLTFにエクスポートし、three.jsで読み込む
5. 頂いたサンプルのように、three.jsでパーティクルにする

■できないこと
> 5. 頂いたサンプルのように、three.jsでパーティクルにする
サンプルのアヒルのようにきれいに配置されません。。表示はされますが極小です（ほぼ点）
モデリング時に拡大して書き出しても結果変わらずでした。

以上となります。他に必要な情報やデータなどありましたらお申し付けください！
どうぞよろしくお願いいたします。

[cx20]

> 表示はされますが極小です（ほぼ点）
多分、小さく表示されているだけではないかと思います。
console.log() で座標を確認してみて下さい。値が小さい場合は100倍などしてみてください。
もしくは、カメラの位置を調整してみてください。500→50など。

https://runstant.com/cx20/projects/1524140c

[cx20]

ちなみに、アヒルのモデルですが、結構大きいです。体長100メートルくらいあります。
体長100メートルのモデルを500メートル先から表示している感じでしょうか。
ですので、500メートル先から1メートルの大きさのモデルを表示しようとした場合、点になります。

[asdhfak]

ご回答ありがとうございます！

> 小さく表示されているだけ
おっしゃるとおりでした......！（40000倍で正常に表示されました.......）

ドンピシャのご回答ありがとうございました。大変助かりました！！！
また機会があればお願いいたします。