mirror of
https://github.com/morten-olsen/morten-olsen.github.io.git
synced 2026-02-08 01:46:28 +01:00
100 lines
2.8 KiB
TypeScript
100 lines
2.8 KiB
TypeScript
// https://redstapler.co/cool-nebula-background-effect-three-js/
|
|
|
|
// https://redstapler.co/cool-nebula-background-effect-three-js/
|
|
|
|
import * as THREE from 'three';
|
|
import React, { useEffect } from 'react';
|
|
|
|
const setup = () => {
|
|
let scene, camera, renderer;
|
|
let cloudParticles = [];
|
|
|
|
function init() {
|
|
scene = new THREE.Scene();
|
|
camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,1,1000);
|
|
camera.position.z = 1;
|
|
camera.rotation.x = 1.16;
|
|
camera.rotation.y = -0.12;
|
|
camera.rotation.z = 0.27;
|
|
let ambient = new THREE.AmbientLight(0x555555);
|
|
scene.add(ambient);
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setSize(window.innerWidth,window.innerHeight);
|
|
scene.fog = new THREE.FogExp2(0x03544e, 0.001);
|
|
renderer.setClearColor(scene.fog.color);
|
|
renderer.domElement.style.position = 'fixed';
|
|
renderer.domElement.style.top = '0';
|
|
renderer.domElement.style.left = '0';
|
|
renderer.domElement.style.width = '100%';
|
|
renderer.domElement.style.height = '100%';
|
|
renderer.domElement.style.zIndex = -1;
|
|
renderer.domElement.style.opacity = 1;
|
|
|
|
document.body.appendChild(renderer.domElement);
|
|
addParticles();
|
|
addLights();
|
|
render();
|
|
}
|
|
|
|
const addParticles = () => {
|
|
let loader = new THREE.TextureLoader();
|
|
loader.load("/images/smoke.png", (texture) => {
|
|
const cloudGeo = new THREE.PlaneBufferGeometry(500,500);
|
|
const cloudMaterial = new THREE.MeshLambertMaterial({
|
|
map:texture,
|
|
transparent: true
|
|
});
|
|
for(let p=0; p<50; p++) {
|
|
let cloud = new THREE.Mesh(cloudGeo, cloudMaterial);
|
|
cloud.position.set(
|
|
Math.random()*800 -400,
|
|
500,
|
|
Math.random()*500-500
|
|
);
|
|
cloud.rotation.x = 1.16;
|
|
cloud.rotation.y = -0.12;
|
|
cloud.rotation.z = Math.random()*2*Math.PI;
|
|
cloud.material.opacity = 0.55;
|
|
cloudParticles.push(cloud);
|
|
scene.add(cloud);
|
|
}
|
|
});
|
|
}
|
|
|
|
const addLights = () => {
|
|
let directionalLight = new THREE.DirectionalLight(0xff8c19);
|
|
directionalLight.position.set(0,0,1);
|
|
scene.add(directionalLight);
|
|
|
|
let orangeLight = new THREE.PointLight(0xcc6600,50,450,1.7);
|
|
orangeLight.position.set(200,300,100);
|
|
scene.add(orangeLight);
|
|
let redLight = new THREE.PointLight(0xd8547e,50,450,1.7);
|
|
redLight.position.set(100,300,100);
|
|
scene.add(redLight);
|
|
let blueLight = new THREE.PointLight(0x3677ac,50,450,1.7);
|
|
blueLight.position.set(300,300,200);
|
|
scene.add(blueLight);
|
|
};
|
|
|
|
function render() {
|
|
cloudParticles.forEach(p => {
|
|
p.rotation.z -=0.001;
|
|
});
|
|
renderer.render(scene,camera);
|
|
requestAnimationFrame(render);
|
|
}
|
|
|
|
init();
|
|
};
|
|
|
|
const Background: React.FC<{}> = () => {
|
|
useEffect(() => {
|
|
setup();
|
|
}, []);
|
|
return <></>
|
|
};
|
|
|
|
export default Background;
|
|
|