diff --git a/src/components/particule-background/particules.ts b/src/components/particule-background/particules.ts index 93d9bf1..500f675 100644 --- a/src/components/particule-background/particules.ts +++ b/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); -} \ No newline at end of file +} + + +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 +}; + + diff --git a/src/components/particule-background/scene.ts b/src/components/particule-background/scene.ts index 0438b5e..432e966 100644 --- a/src/components/particule-background/scene.ts +++ b/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); } \ No newline at end of file