import * as THREE from "three"; export class cloud{ constructor(x, y, z, scene, look, id){ for (let i = 0; i < 1; i++) { let cloudGeo = new THREE.PlaneGeometry(Math.random() * 400 + 500, Math.random() * 200 + 300); let cloudTexture = new THREE.TextureLoader().load("/hugeCloud.png"); let cloudMaterial = new THREE.MeshBasicMaterial({ color: 0x0084ff, map: cloudTexture, transparent: true, opacity: Math.random() * 0.2 }); this.cloudMesh = new THREE.Mesh(cloudGeo, cloudMaterial); this.cloudMesh.position.set( // x,y,z (Math.random()-0.5) * 200 + x, (Math.random()-0.5) * 100 + y, (Math.random()-0.5) * 200 + z ); this.cloudMesh.up.set(0, 1, 0); this.frameCount = 0; scene.add(this.cloudMesh); } //display information this.id = id; } update() { this.frameCount++; this.cloudMesh.lookAt(look); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter