three.jsにて・・・

Question

three.jsにて、オブジェクトを動かしたい。

for(let i=0; i<10; i++){

    ball_array[i] = new THREE.Mesh(
    new THREE.SphereGeometry(10*(3/8),32,32),
    new THREE.MeshNormalMaterial( { color: 0xffffff,  wireframe: false } )
    );
    ball_array[i].position.set(-150,5,-150);
    scene.add(ball_array[i]);
    octree.importThreeMesh(ball_array[i]);

    console.log(balls[0]);
}

上記コードにて、１０個分の球を生成した。問題は下記コードであるが、

    for(let i=0; i<10; i++){
        ball_array[i].position.set(-150+(3/8)*balls[i].x,5,-150+(3/8)*balls[i].y);
    }

配列ballsには、200個ほどの球の位置情報が格納されている。
これを全てposition.set()によりセットすることにより、three.js上でアニメーションする球を作りたいが、２００個にすると、動作が遅くなるようである。
解決方法はあるのか？？

Answer 1

下記は three.js で 200 個の球をアニメーションさせるサンプルになります。
そんなに重くはないかと思いますがいかがでしょうか？
https://cx20.github.io/webgl-physics-examples/examples/threejs/oimo/balls/

Answer 2

効果があるか分かりませんが、
ループ展開という方法があります。
https://hacknote.jp/archives/15453/