読者です 読者をやめる 読者になる 読者になる

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

JavaScript Threejs

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

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

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

  • 単色(#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);

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

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

デモはこちらです。