Threejs r76で球体＆パーティクル

Threejsのr76を用いて球体とパーティクルに挑戦した際のメモです。

こちらのサイトを参考にしました。

手順としてあっているかどうかわかりませんが、前面部分だけパーティクルを描画して欲しかったのでSphereGeometryをMeshBasicMaterialにて単色で塗りつぶした上でパーティクルの描画を行っています。

• 単色(#666699)で塗りつぶした球体をsceneに追加

    var sphere = new THREE.Mesh(
        new THREE.SphereGeometry(200, 100, 100),
        new THREE.MeshBasicMaterial({
            color: 0x666699
        })
    );
    this.scene.add(sphere);

• その後Pointsを用意してsceneに追加

    this.particles = new THREE.Points(
        sphere.geometry,
        new THREE.PointsMaterial({
            size: 3,
            color: 0xFFFFFF
        })
    );
    this.scene.add(this.particles);

これらのサイトを参考にしました。

• MeshBasicMaterial ドキュメント

画面奥に向かって背面にあたる部分のパーティクルは見えなくなり透けている感はなくなりました。

デモはこちらです。