cloud_cluster.js

import { Fog, Group, LinearMipMapLinearFilter, Mesh, MeshStandardMaterial, PlaneGeometry, ShaderMaterial, TextureLoader } from "three";

const loader = new TextureLoader();
const texture = loader.load('/static/3d/cloudp.png');
texture.magFilter = LinearMipMapLinearFilter;
texture.minFilter = LinearMipMapLinearFilter;


export function getCloudCluster() {
    const cluster = new Group();
    const geometry = new PlaneGeometry(64, 64);

    const fog = new Fog(0x222222, - 100, 3000);
    const material = new MeshStandardMaterial({ map: texture, transparent: true, depthTest: true, depthWrite: true });


    for (var i = 0; i < 5000; i++) {
        const plane = new Mesh(geometry, material);

        plane.position.z = Math.random() * 1000 - 500;
        plane.position.y = - Math.random() * Math.random() * 200 - 15;
        plane.position.x = i / 10;
        plane.rotation.x = Math.random() * Math.PI;
        plane.rotation.y = -Math.PI / 2;
        plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
        cluster.add(plane);
    }

    return cluster;
}