threejs Thanos Portal Effect

smoke particle

//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, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({

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

});

renderer.setPixelRatio(window.devicePixelRatio);

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

camera.position.setZ(1000);

renderer.render(scene, camera);

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

pointLight.position.set(0, 0, 250);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

scene.add(pointLight, ambientLight);

const lightHelper = new THREE.PointLightHelper(pointLight);

scene.add(lightHelper);

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

const spaceTexture = new THREE.TextureLoader().load('space.jpg');

scene.background = spaceTexture;

const dustCloud = []

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

for (let i = 880; i > 250; i--) {

  const smoke = new THREE.Mesh(

    new THREE.PlaneBufferGeometry(350, 350),

    new THREE.MeshStandardMaterial({

      map: smokeTexture,

      transparent: true

    })

  )

  smoke.position.set(

    0.5 * i * Math.cos((4 * i * Math.PI) / 180),

    0.5 * i * Math.sin((4 * i * Math.PI) / 180),

    0.1 * i

  )

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

  scene.add(smoke)

  dustCloud.push(smoke)

}

function moveCamera() {

  const t = document.body.getBoundingClientRect().top;

  camera.position.x = t * -0.002;

  camera.rotation.y = t * -0.002;

  camera.position.z = 30 - t * 0.01;

}

document.body.onscroll = moveCamera

let clock = new THREE.Clock();

function animate() {

  requestAnimationFrame(animate);

  let delta = clock.getDelta();

  dustCloud.forEach(p => {

    p.rotation.z -= delta * 1.5;

  })

  if (Math.random() > 0.5) {

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

  }

  controls.update();

  renderer.render(scene, camera);

}

animate()

reference:

https://www.youtube.com/watch?v=KeVW_ezeGz8&list=PLbu98QxRH81KkLTN00OXhD8Y-pRVgTCnM&index=5