threejs resize window

--threejs

    --main.js

    --threex.js

//threex.js

// This THREEx helper makes it easy to handle window resize.

// It will update renderer and camera when window is resized.

//

// # Usage

//

// **Step 1**: Start updating renderer and camera

//

// ```var windowResize = new THREEx.WindowResize(aRenderer, aCamera)```

//    

// **Step 2**: stop updating renderer and camera

//

// ```windowResize.destroy()```

// # Code

//

/** @namespace */

var THREEx = THREEx || {}

/**

 * Update renderer and camera when the window is resized

 * 

 * @param {Object} renderer the renderer to update

 * @param {Object} Camera the camera to update

 * @param {Function} dimension callback for renderer size

*/

THREEx.WindowResize = function (renderer, camera, dimension) {

    dimension = dimension || function () { return { width: window.innerWidth, height: window.innerHeight } }

    var callback = function () {

        // fetch target renderer size

        var rendererSize = dimension();

        // notify the renderer of the size change

        renderer.setSize(rendererSize.width, rendererSize.height)

        // update the camera

        camera.aspect = rendererSize.width / rendererSize.height

        camera.updateProjectionMatrix()

    }

    // bind the resize event

    window.addEventListener('resize', callback, false)

    // return .stop() the function to stop watching window resize

    return {

        trigger: function () {

            callback()

        },

        /**

         * Stop watching window resize

        */

        destroy: function () {

            window.removeEventListener('resize', callback)

        }

    }

}

export { THREEx }

---------------------------

//main.js

import './style.css'

import { THREEx } from './threex.js'

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';

import {

  GodRaysEffect, BloomEffect, BlendFunction, KernelSize,

  SMAAEffect, EffectComposer, EffectPass, RenderPass

} from 'postprocessing';

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.set(0, 0, 1);

camera.rotation.x = 1.3;

camera.rotation.y = -0.075;

camera.rotation.z = 0.65;

THREEx.WindowResize(renderer, camera)

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

scene.add(ambientLight);

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

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

scene.add(directionalLight)

const orangeLight = new THREE.PointLight(0xcc6600, 1, 400, 1.7)

orangeLight.position.set(-200, 300, -200)

scene.add(orangeLight)

const redLight = new THREE.PointLight(0xd8547e, 1, 400, 1.7)

redLight.position.set(0, 300, 0)

scene.add(redLight)

const blueLight = new THREE.PointLight(0x3677ac, 1, 400, 1.7)

blueLight.position.set(200, 300, 200)

scene.add(blueLight)

scene.fog = new THREE.FogExp2(0x03544e, 0.001)

renderer.setClearColor(scene.fog.color)

const bloom = new BloomEffect({

  blendFunction: BlendFunction.COLOR_DODGE,

  kernelSize: KernelSize.SMALL,

  useLuminanceFilter: true,

  luminanceThreshold: 0.3,

  luminanceSmoothing: 0.75

})

bloom.blendMode.opacity.value = 1.5

const composer = new EffectComposer(renderer);

composer.addPass(new RenderPass(scene, camera));

composer.addPass(new EffectPass(camera, bloom));

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 = 0; i < 50; 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() * 2 * Math.PI;

  smoke.material.opacity = 0.6;

  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;

}

function animate() {

  requestAnimationFrame(animate);

  dustCloud.forEach(p => {

    p.rotation.z -= 0.001;

  })

  composer.render();

}

animate()

reference:

https://github.com/jeromeetienne/threex.windowresize