diff --git a/apps/www/components/LaunchWeek/14/canvas.tsx b/apps/www/components/LaunchWeek/14/canvas.tsx index 428c88f0840..5ba6e4ed93b 100644 --- a/apps/www/components/LaunchWeek/14/canvas.tsx +++ b/apps/www/components/LaunchWeek/14/canvas.tsx @@ -2,9 +2,12 @@ import * as THREE from 'three' import { cn } from 'ui' import { createThreeSetup, useThreeJS, createTicketMesh } from './helpers' import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' +import { useCallback, useRef, useState } from 'react' const LwCanvas = ({ className }: { className?: string }) => { - const { containerRef } = useThreeJS((container) => { + const secretRef = useRef(false) + + const setup = useCallback((container: HTMLElement) => { // Create scene with postprocessing effects const { scene, @@ -14,12 +17,13 @@ const LwCanvas = ({ className }: { className?: string }) => { resize, crtPass, glitchPass, + bloomPass, stats, debug, orbitControls, } = createThreeSetup(container, { cameraPosition: new THREE.Vector3(0, 0, 5), - debug: true, + debug: false, postprocessing: { bloom: { enabled: true, @@ -39,10 +43,7 @@ const LwCanvas = ({ className }: { className?: string }) => { }) // Set renderer clear color to make background visible - renderer.setClearColor(0x000000, 0.1) - - // Set renderer clear color to make background visible - renderer.setClearColor(0x000000, 0.1) + renderer.setClearColor(0x000000, 0) // Add ambient light with increased intensity const ambientLight = new THREE.AmbientLight(0xffffff, 1.0) @@ -85,7 +86,7 @@ const LwCanvas = ({ className }: { className?: string }) => { width: planeGeometrySize[0], height: planeGeometrySize[1], ticketTextureSource: ticketStaticTexture, - debug + debug, }) .then((ticketModel) => { // Remove placeholder and add the actual ticket model @@ -165,6 +166,15 @@ const LwCanvas = ({ className }: { className?: string }) => { // Update CRT shader time uniform for animation effects if (crtPass) { crtPass.uniforms.time.value = currentTime + crtPass.enabled = secretRef.current + } + + if(glitchPass) { + glitchPass.enabled = secretRef.current + } + + if(bloomPass) { + bloomPass.enabled = secretRef.current } // Gradually decay mouse intensity when not moving @@ -222,17 +232,29 @@ const LwCanvas = ({ className }: { className?: string }) => { } return { cleanup, animate } - }) + }, []) + + const { containerRef } = useThreeJS(setup) + return ( -
-
-
+ <> +
+
+
+ + + ) } diff --git a/apps/www/components/LaunchWeek/14/glitch.ts b/apps/www/components/LaunchWeek/14/glitch.ts index cd7134be98a..5a6d87259fd 100644 --- a/apps/www/components/LaunchWeek/14/glitch.ts +++ b/apps/www/components/LaunchWeek/14/glitch.ts @@ -95,6 +95,10 @@ class GlitchPass extends Pass { this.intensity = amount } + enable(value: boolean) { + this.uniforms['byp'].value = value ? 0 : 1 + } + dispose() { this.material.dispose()