From b57c3d19ade9b25086d80e2b94ceab416ba5f99d Mon Sep 17 00:00:00 2001 From: Charles Doucet Date: Mon, 17 Feb 2025 18:23:59 -0500 Subject: [PATCH 1/2] wip: corridor bacground --- .../particule-background/particules.ts | 43 ++++++++++++++++--- src/components/particule-background/scene.ts | 4 +- 2 files changed, 40 insertions(+), 7 deletions(-) diff --git a/src/components/particule-background/particules.ts b/src/components/particule-background/particules.ts index 93d9bf1..85b7e2b 100644 --- a/src/components/particule-background/particules.ts +++ b/src/components/particule-background/particules.ts @@ -4,20 +4,51 @@ 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 = safeSpace(); + const y = Math.random() * windowHeight * 15 - windowHeight * 7.5; const z = Math.random() * -2000 - 200; sphere.position.set(x, y, z); -} \ No newline at end of file +} + + +const safeSpace = () => { + 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 +}; \ No newline at end of file diff --git a/src/components/particule-background/scene.ts b/src/components/particule-background/scene.ts index 0438b5e..6262964 100644 --- a/src/components/particule-background/scene.ts +++ b/src/components/particule-background/scene.ts @@ -27,6 +27,8 @@ export const initStage = () => { export const initScene = () => { scene = new THREE.Scene(); + scene.fog = new THREE.Fog(0x000000, 1, 3000); + renderer = new THREE.WebGLRenderer({ alpha: true, @@ -41,7 +43,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, From c32e36722a2ebc562b6481d08b4ef905c278e9fd Mon Sep 17 00:00:00 2001 From: Charles Doucet Date: Mon, 17 Feb 2025 23:01:35 -0500 Subject: [PATCH 2/2] feat: corridor background --- .../particule-background/particules.ts | 16 +++++++++++++--- src/components/particule-background/scene.ts | 17 ++++++++++++++--- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/src/components/particule-background/particules.ts b/src/components/particule-background/particules.ts index 85b7e2b..500f675 100644 --- a/src/components/particule-background/particules.ts +++ b/src/components/particule-background/particules.ts @@ -1,6 +1,7 @@ import * as THREE from "three"; import {scene, windowHeight, windowWidth} from "./scene.ts"; + //----------------------------------------------------------------------- export const initBgObjects = () => { @@ -11,6 +12,7 @@ export const initBgObjects = () => { createCurvedPlane(); } + //----------------------------------------------------------------------- const createBgObject = () => { @@ -22,14 +24,20 @@ const createBgObject = () => { } ); const sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); - const x = safeSpace(); + 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 safeSpace = () => { +const pointInMargins = () => { const wrapper = 720; let point: number; @@ -51,4 +59,6 @@ const createCurvedPlane = () => { const plane = new THREE.Mesh(geometry, material); scene.add(plane); plane.position.set(windowWidth, 0, -2000); // Position the plane in the far distance -}; \ No newline at end of file +}; + + diff --git a/src/components/particule-background/scene.ts b/src/components/particule-background/scene.ts index 6262964..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,7 +31,7 @@ export const initStage = () => { export const initScene = () => { scene = new THREE.Scene(); - scene.fog = new THREE.Fog(0x000000, 1, 3000); + scene.fog = new THREE.Fog(0x010102, 1, 3000); renderer = new THREE.WebGLRenderer({ @@ -69,6 +73,7 @@ export const animate = () => { requestAnimationFrame(animate); camera.position.lerp(cameraTarget, 0.2); camera.lookAt(cameraLookAt); + render(); } @@ -77,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 = () => { @@ -89,6 +99,7 @@ const onWindowResize = () => { renderer.setSize(windowWidth, windowHeight); } + const render = () => { renderer.render(scene, camera); } \ No newline at end of file