threejs thunder cloud

use orbit control to find camera rotation for cloud, then disable orbit control

//main.js

import './style.css'

import * as THREE from 'three';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

import { SpotLight } from 'three';

// Setup

const scene = new THREE.Scene();

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

const renderer = new THREE.WebGLRenderer({

  canvas: document.querySelector('#bg'),

});

renderer.setPixelRatio(window.devicePixelRatio);

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

camera.position.z = 1;

camera.rotation.x = 1.02;

camera.rotation.y = 0.1584;

camera.rotation.z = -0.2511;

renderer.render(scene, camera);

const pointLight = new THREE.PointLight(0x062d89, 5, 500, 1.7);

pointLight.position.set(200, 300, 100);

const ambientLight = new THREE.AmbientLight(0x555555);

scene.add(pointLight, ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffeedd);

directionalLight.position.set(0, 0, 1);

scene.add(directionalLight)

const lightHelper = new THREE.PointLightHelper(pointLight);

scene.add(lightHelper);

//const controls = new OrbitControls(camera, renderer.domElement);

const dustCloud = []

const smokeTexture = new THREE.TextureLoader().load('smoke particle.png');

for (let i = 0; i < 25; i++) {

  const smoke = new THREE.Mesh(

    new THREE.PlaneBufferGeometry(500, 500),

    new THREE.MeshStandardMaterial({

      map: smokeTexture,

      transparent: true

    })

  )

  smoke.position.set(

    Math.random() * 800 - 400,

    500,

    Math.random() * 500 - 400

  )

  smoke.rotation.x = 1.16;

  smoke.rotation.y = 0.12;

  smoke.rotation.z = Math.random() * 360;

  smoke.material.opacity = 0.6;

  scene.add(smoke)

  dustCloud.push(smoke)

}

function animate() {

  requestAnimationFrame(animate);

  //console.log(camera.rotation.x, camera.rotation.y, camera.rotation.z)

  //controls.update();

  

  dustCloud.forEach(p => {

    p.rotation.z -= 0.002;

  })

  if (Math.random() > 0.93 || pointLight.power > 100) {

    if (pointLight.power < 100) {

      pointLight.position.set(

        Math.random() * 400,

        300 + Math.random() * 200,

        100

      );

    }

    pointLight.power = 50 + Math.random() * 500;

  }

  renderer.render(scene, camera);

}

animate()

reference:

https://www.youtube.com/watch?v=1bkibGIG8i0&list=PLbu98QxRH81KkLTN00OXhD8Y-pRVgTCnM&index=6