feat: [#40] three backgrounds

src/components/particule-background/particules.ts

@@ -1,23 +1,64 @@
 import * as THREE from "three";
 import {scene, windowHeight, windowWidth} from "./scene.ts";
 
+
 //-----------------------------------------------------------------------
 
 export const initBgObjects = () => {
-    for (let i = 0; i < 40; i++) {
+    for (let i = 0; i < 1000; i++) {
         createBgObject();
     }
+
+    createCurvedPlane();
 }
 
+
 //-----------------------------------------------------------------------
 
 const createBgObject = () => {
-    const geometry = new THREE.SphereGeometry( 10, 6, 6 );
-    const material = new THREE.MeshBasicMaterial( {color: 0xdddddd} );
+    const size = Math.random() * 30 + 5;
+    const geometry = new THREE.IcosahedronGeometry(size, 1);
+    const material = new THREE.MeshBasicMaterial( {
+        color: 0xdddddd,
+        wireframe: true
+    } );
     const sphere = new THREE.Mesh( geometry, material );
     scene.add( sphere );
-    const x = Math.random() * windowWidth * 2 - windowWidth;
-    const y = Math.random() * windowHeight * 2 - windowHeight;
+    const x = pointInMargins();
+    const y = Math.random() * windowHeight * 15 - windowHeight * 7.5;
     const z = Math.random() * -2000 - 200;
+
+    sphere.userData.rotationSpeed = {
+        x: Math.random() * 0.02 - 0.01,
+        y: Math.random() * 0.02 - 0.01
+    };
+
     sphere.position.set(x, y, z);
-}
+}
+
+
+const pointInMargins = () => {
+    const wrapper = 720;
+    let point: number;
+
+    if (Math.random() < 0.5) {
+        point = Math.random() * (windowWidth / 2 - wrapper * 2) - windowWidth / 2;
+    } else {
+        point = Math.random() * (windowWidth / 2 - wrapper * 2) + windowWidth / 2 + wrapper;
+    }
+
+    return point;
+}
+
+
+const createCurvedPlane = () => {
+    const geometry = new THREE.PlaneGeometry(windowWidth * 20, windowHeight * 20, 32, 32);
+
+    const material = new THREE.MeshBasicMaterial({ color: 0x000000 });
+
+    const plane = new THREE.Mesh(geometry, material);
+    scene.add(plane);
+    plane.position.set(windowWidth, 0, -2000); // Position the plane in the far distance
+};
+
+

src/components/particule-background/scene.ts

@@ -1,5 +1,6 @@
 import * as THREE from 'three';
 
+
 export let renderer: THREE.WebGLRenderer,
     scene: THREE.Scene,
     camera: THREE.PerspectiveCamera,
@@ -16,6 +17,9 @@ let graphicCanvas,
     windowHalfHeight: number,
     cameraLookAt = new THREE.Vector3(0, 0, 0);
 
+const mouseSensitivity = 0.1;
+const cameraTilt = 35;
+
 //-----------------------------------------------------------------------
 
 export const initStage = () => {
@@ -27,6 +31,8 @@ export const initStage = () => {
 
 export const initScene = () => {
     scene = new THREE.Scene();
+    scene.fog = new THREE.Fog(0x010102, 1, 3000);
+
 
     renderer = new THREE.WebGLRenderer({
         alpha: true,
@@ -41,7 +47,7 @@ export const initCamera = () => {
     const fieldOfView = 75;
     const aspectRatio = windowWidth / windowHeight;
     const nearPlane = 1;
-    const farPlane = 3000;
+    const farPlane = 30000;
     camera = new THREE.PerspectiveCamera(
         fieldOfView,
         aspectRatio,
@@ -67,6 +73,7 @@ export const animate = () => {
     requestAnimationFrame(animate);
     camera.position.lerp(cameraTarget, 0.2);
     camera.lookAt(cameraLookAt);
+
     render();
 }
 
@@ -75,8 +82,13 @@ export const animate = () => {
 const onMouseMove = (event: MouseEvent) => {
     mouseX = (event.clientX - windowHalfWidth);
     mouseY = (event.clientY - windowHalfHeight);
-    cameraTarget.x = (mouseX * -1) / 2;
-    cameraTarget.y = mouseY / 2;
+    cameraTarget.x = (mouseX * -1) * mouseSensitivity;
+    cameraTarget.y = mouseY * mouseSensitivity;
+
+    cameraTarget.clamp(
+        new THREE.Vector3(-cameraTilt, -cameraTilt, 800),
+        new THREE.Vector3(cameraTilt, cameraTilt, 800)
+    );
 }
 
 const onWindowResize = () => {
@@ -87,6 +99,7 @@ const onWindowResize = () => {
     renderer.setSize(windowWidth, windowHeight);
 }
 
+
 const render = () => {
     renderer.render(scene, camera);
 }