
//パーティクルの作成
function createParticles() {
    //ジオメトリ
    const geom = new THREE.Geometry();
    
    //マテリアル（サイズ・頂点色彩を使うか・色）
    const material = new THREE.PointsMaterial({
        size: 4, //サイズ
        transparent: true,// 透過true
        opacity: 0.6, //透過性の数値
        vertexColors: true, //頂点色彩を使うか
        sizeAttenuation: true,//カメラの奥行きの減退
        color: 0x3EDBF0 //色
    });

    //5000個のランダムな頂点作成
    const range = 500;
    for (var i = 0; i < 5000; i++) {
        //THREE.Vector3(x,y,z)
        const particle = new THREE.Vector3(
            Math.random() * range - range / 2, 
            Math.random() * range - range / 2,
            Math.random() * range - range / 2);
        
        //頂点をジオメトリに追加
        geom.vertices.push(particle);
        
        //頂点の色を追加
        const color = new THREE.Color(0xeffffc);
        geom.colors.push(color);
    }

    cloud = new THREE.Points(geom, material);
    cloud.name = "particles";
    scene.add(cloud);
}

//パーティクルの作成

function createParticles() {

//ジオメトリ

const geom = new THREE.Geometry();

//マテリアル（サイズ・頂点色彩を使うか・色）

const material = new THREE.PointsMaterial({

size: 4, //サイズ

transparent: true,// 透過true

opacity: 0.6, //透過性の数値

vertexColors: true, //頂点色彩を使うか

sizeAttenuation: true,//カメラの奥行きの減退

color: 0x3EDBF0 //色

});

//5000個のランダムな頂点作成

const range = 500;

for (var i = 0; i < 5000; i++) {

//THREE.Vector3(x,y,z)

const particle = new THREE.Vector3(

Math.random() * range - range / 2,

Math.random() * range - range / 2);

//頂点をジオメトリに追加

geom.vertices.push(particle);

//頂点の色を追加

const color = new THREE.Color(0xeffffc);

geom.colors.push(color);

}

cloud = new THREE.Points(geom, material);

cloud.name = "particles";

scene.add(cloud);

}

THREE.Vector3

3Dベクトルを表すクラス。
3D空間内のポイント。
3D空間での方向と長さ。

引用元：

https://threejs.org/docs/#api/en/math/Vector3

PointsMaterial

Pointsが使用するデフォルトのマテリアル。

引用元：

https://threejs.org/docs/#api/en/materials/PointsMaterial

全体のコード

デモにもありますが、さらっと書き残しておきます。

※練習なので、CSSとJSは分けていません。


<!DOCTYPE html>
<html>
<head>
    <title>パーティクル練習</title>
    <script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/three@0.101.1/examples/js/controls/OrbitControls.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000000;
        }
    </style>
</head>
<body>

<div id="WebGL-output">
</div>
<script type="text/javascript">

    function init() {

        //シーンの作成
        const scene = new THREE.Scene();

        //カメラの作成
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        //レンダラーの作成
        const webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0x000000));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);

        //カメラの位置
        camera.position.x = 0;
        camera.position.y = 0;
        camera.position.z = 150;
      
      // 滑らかにカメラコントローラーを制御する
      const controls = new THREE.OrbitControls(camera, document.body);
      controls.enableDamping = true;
      controls.dampingFactor = 0.2;

        //HTMLに書きだし
        document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

        createParticles();
        tick();

        //パーティクルの作成
        function createParticles() {
            //ジオメトリ
            const geom = new THREE.Geometry();
          
            //マテリアル（サイズ・頂点色彩を使うか・色）
            const material = new THREE.PointsMaterial({
                size: 4, //サイズ
                transparent: true,// 透過true
                opacity: 0.6, //透過性の数値
                vertexColors: true, //頂点色彩を使うか
                sizeAttenuation: true,//カメラの奥行きの減退
                color: 0x3EDBF0 //色
            });

          //5000個のランダムな頂点作成
            const range = 500;
            for (var i = 0; i < 5000; i++) {
                //THREE.Vector3(x,y,z)
                const particle = new THREE.Vector3(
                  Math.random() * range - range / 2, 
                  Math.random() * range - range / 2,
                  Math.random() * range - range / 2);
              
               //頂点をジオメトリに追加
                geom.vertices.push(particle);
              
               //頂点の色を追加
                const color = new THREE.Color(0xeffffc);
                geom.colors.push(color);
            }

            cloud = new THREE.Points(geom, material);
            cloud.name = "particles";
            scene.add(cloud);
        }

        // 毎フレーム時に実行されるループイベント
        function tick() {

            //cloud.rotation.x += 0.001;
            cloud.rotation.y += 0.0001;
            
            webGLRenderer.render(scene, camera);// レンダリング
            requestAnimationFrame(tick);
        }
    }
    window.onload = init;
</script>
</body>
</html>

100

101

102

<!DOCTYPE html>

<html>

<head>

<title>パーティクル練習</title>

<style>

body {

margin: 0;

overflow: hidden;

background-color: #000000;

}

</style>

</head>

<body>

</div>

function init() {

//シーンの作成

const scene = new THREE.Scene();

//カメラの作成

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

//レンダラーの作成

const webGLRenderer = new THREE.WebGLRenderer();

webGLRenderer.setClearColor(new THREE.Color(0x000000));

webGLRenderer.setSize(window.innerWidth, window.innerHeight);

//カメラの位置

camera.position.x = 0;

camera.position.y = 0;

camera.position.z = 150;

// 滑らかにカメラコントローラーを制御する

const controls = new THREE.OrbitControls(camera, document.body);

controls.enableDamping = true;

controls.dampingFactor = 0.2;

//HTMLに書きだし

document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

createParticles();

tick();

//パーティクルの作成

function createParticles() {

//ジオメトリ

const geom = new THREE.Geometry();

//マテリアル（サイズ・頂点色彩を使うか・色）

const material = new THREE.PointsMaterial({

size: 4, //サイズ

transparent: true,// 透過true

opacity: 0.6, //透過性の数値

vertexColors: true, //頂点色彩を使うか

sizeAttenuation: true,//カメラの奥行きの減退

color: 0x3EDBF0 //色

});

//5000個のランダムな頂点作成

const range = 500;

for (var i = 0; i < 5000; i++) {

//THREE.Vector3(x,y,z)

const particle = new THREE.Vector3(

Math.random() * range - range / 2,

Math.random() * range - range / 2);

//頂点をジオメトリに追加

geom.vertices.push(particle);

//頂点の色を追加

const color = new THREE.Color(0xeffffc);

geom.colors.push(color);

}

cloud = new THREE.Points(geom, material);

cloud.name = "particles";

scene.add(cloud);

}

// 毎フレーム時に実行されるループイベント

function tick() {

//cloud.rotation.x += 0.001;

cloud.rotation.y += 0.0001;

webGLRenderer.render(scene, camera);// レンダリング

requestAnimationFrame(tick);

}

window.onload = init;

</script>

</body>

</html>

次はテクスチャはって星空にしたいと思います（＾＾）＊

<追記>

テクスチャの読み込みがセキリュティ的にできなそうだったので、描画してみたのがこちら。

See the Pen 星 by dyna (@sakudyna) on CodePen.

終わってしまったら、右下のReturn押してください（＾＾）

惑星とか入れたら宇宙旅行みたいになるかな？？

ここまで読んで下さりありがとうございます。

<あわせて読みたい>

Three.jsの使い方を勉強してみた導入から表示まで

「初めてのThree.js」を使い、学習した記録です。シーン、カメラ、レンダラーメッシュ、ジオメトリとマテリアルなど入門編です。

マテリアルの種類　Three.jsの使い方を勉強してみた

]Three.jsのマテリアルの種類（一部）について記録した記事です！

<three.jsのおすすめ学習本>