mirror of
https://github.com/morten-olsen/morten-olsen.github.io.git
synced 2026-02-08 01:46:28 +01:00
updates
This commit is contained in:
Morten Olsen
@@ -1,131 +1,99 @@
|
||||
// https://redstapler.co/cool-nebula-background-effect-three-js/
|
||||
|
||||
// https://redstapler.co/cool-nebula-background-effect-three-js/
|
||||
|
||||
import * as THREE from 'three';
|
||||
import { Canvas, useFrame, useThree } from '@react-three/fiber';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
interface CloudProps {
|
||||
texture: THREE.Texture;
|
||||
position: [number, number, number];
|
||||
rotation: {
|
||||
x: number;
|
||||
y: number;
|
||||
z: number;
|
||||
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);
|
||||
};
|
||||
}
|
||||
|
||||
const initialClouds = new Array(30).fill(undefined).map((_, i) => ({
|
||||
name: `id_${i}`,
|
||||
position: [
|
||||
Math.random() * 800 - 400,
|
||||
500,
|
||||
Math.random() * 500 - 500,
|
||||
] as [number, number, number],
|
||||
rotation: {
|
||||
x: 1.16,
|
||||
y: -0.12,
|
||||
z: Math.random() * 2 * Math.PI,
|
||||
},
|
||||
}));
|
||||
function render() {
|
||||
cloudParticles.forEach(p => {
|
||||
p.rotation.z -=0.001;
|
||||
});
|
||||
renderer.render(scene,camera);
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
|
||||
const Cloud: React.FC<CloudProps> = ({ texture, position, rotation }) => {
|
||||
return (
|
||||
<mesh position={position} rotation={[ rotation.x, rotation.y, rotation.z ]}>
|
||||
<planeBufferGeometry args={[500, 500]} />
|
||||
<meshLambertMaterial opacity={.5} map={texture} transparent={true} />
|
||||
</mesh>
|
||||
);
|
||||
init();
|
||||
};
|
||||
|
||||
const Clouds: React.FC<{}> = () => {
|
||||
const { camera } = useThree();
|
||||
const loader = useMemo(() => new THREE.TextureLoader(), []);
|
||||
const [texture, setTexture] = useState<THREE.Texture | undefined>();
|
||||
const [clouds, setClouds] = useState(initialClouds);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(camera);
|
||||
camera.rotateX(1.16);
|
||||
camera.rotateY(-0.12);
|
||||
camera.rotateZ(0.27);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loader.load('images/smoke.png', (loadedTexture) => {
|
||||
setTexture(loadedTexture);
|
||||
});
|
||||
}, []);
|
||||
|
||||
useFrame(() => {
|
||||
setClouds(current => current.map(c => ({
|
||||
...c,
|
||||
rotation: {
|
||||
...c.rotation,
|
||||
z: c.rotation.z -= 0.001,
|
||||
}
|
||||
})));
|
||||
});
|
||||
|
||||
if (!texture) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{clouds.map((cloud) => (
|
||||
<Cloud
|
||||
key={cloud.name}
|
||||
texture={texture}
|
||||
position={cloud.position}
|
||||
rotation={cloud.rotation}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const style = {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
top: 0,
|
||||
left: 0,
|
||||
position: 'fixed' as any,
|
||||
zIndex: -1,
|
||||
}
|
||||
|
||||
const Background: React.FC<{}> = () => {
|
||||
const fog = useMemo(() => new THREE.FogExp2(0x03544e, 0.001), []);
|
||||
const [aspect, setAspect] = useState(global.window ? window.innerWidth / window.innerHeight : 1);
|
||||
if (!global.window) {
|
||||
return <Canvas style={style}><></></Canvas>
|
||||
}
|
||||
useEffect(() => {
|
||||
const update = () => {
|
||||
setAspect(window.innerWidth / window.innerHeight);
|
||||
};
|
||||
window.addEventListener('resize', update);
|
||||
return () => {
|
||||
window.removeEventListener('resize', update);
|
||||
}
|
||||
setup();
|
||||
}, []);
|
||||
return (
|
||||
<Canvas style={style}>
|
||||
<color attach="background" args={[0x03544e]} />
|
||||
<scene fog={fog}>
|
||||
<perspectiveCamera
|
||||
args={[60, aspect, 1, 1000]}
|
||||
aspect={aspect}
|
||||
position={[0, 0, 0]}
|
||||
/>
|
||||
<ambientLight args={[0x555555]} />
|
||||
<directionalLight args={[0xff8c19]} position={[0,0,1]} />
|
||||
<pointLight args={[0xcc6600, 50, 450, 1.7]} position={[200,300,100]} />
|
||||
<pointLight args={[0xd8547e, 50, 450, 1.7]} position={[100,300,100]} />
|
||||
<pointLight args={[0x3677ac, 50, 450, 1.7]} position={[300,300,200]} />
|
||||
<Clouds />
|
||||
</scene>
|
||||
</Canvas>
|
||||
);
|
||||
return <></>
|
||||
};
|
||||
|
||||
export default Background;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user