diff --git a/app/_home/index.tsx b/app/_home/index.tsx index adc88a1a..b6db8894 100644 --- a/app/_home/index.tsx +++ b/app/_home/index.tsx @@ -1,6 +1,6 @@ import * as THREE from "three"; -import { useMemo, useRef, useState, useEffect } from "react"; -import { useFrame, useThree } from "@react-three/fiber"; +import { useMemo, useRef, useState } from "react"; +import { useFrame, useThree, createPortal } from "@react-three/fiber"; import { useNoise, useFluid, @@ -82,7 +82,7 @@ export const Home = () => { // This scene is rendered offscreen const offscreenScene = useMemo(() => new THREE.Scene(), []); - const offscreenMesh = useRef(null); + // create FBO for offscreen rendering const [_, updateRenderTarget] = useSingleFBO({ scene: offscreenScene, @@ -90,9 +90,6 @@ export const Home = () => { size, dpr: viewport.dpr, }); - useEffect(() => { - offscreenScene.add(offscreenMesh.current!); - }, [offscreenScene]); useFrame((props) => { const noise = updateNoise(props); @@ -114,23 +111,26 @@ export const Home = () => { return ( <> - - - - - - - + {createPortal( + + + + + + + , + offscreenScene + )} { ); }; - -// import * as THREE from "three"; -// import { useEffect, useMemo, useRef, useState } from "react"; -// import { useFrame, useThree } from "@react-three/fiber"; -// import { useNoise, useSingleFBO } from "@/packages/use-shader-fx/src"; - -// function Box(props: any) { -// // This reference will give us direct access to the mesh -// const meshRef = useRef(); -// // Set up state for the hovered and active state -// const [hovered, setHover] = useState(false); -// const [active, setActive] = useState(false); -// // Subscribe this component to the render-loop, rotate the mesh every frame -// useFrame((state, delta) => (meshRef.current!.rotation.x += delta)); -// // Return view, these are regular three.js elements expressed in JSX -// return ( -// setActive(!active)} -// onPointerOver={(event) => setHover(true)} -// onPointerOut={(event) => setHover(false)}> -// -// -// -// ); -// } - -// export const Home = () => { -// const { size, viewport, camera, gl } = useThree(); - -// // This scene is rendered offscreen -// const offscreenScene = useMemo(() => new THREE.Scene(), []); -// const offscreenMesh = useRef(null); -// // create FBO for offscreen rendering -// const [_, updateRenderTarget] = useSingleFBO({ -// scene: offscreenScene, -// camera, -// size, -// dpr: viewport.dpr, -// }); -// useEffect(() => { -// offscreenScene.add(offscreenMesh.current!); -// }, [offscreenScene]); - -// // generate noise -// const shaderMaterial = useRef(null); -// const [updateNoise] = useNoise({ size, dpr: viewport.dpr }); - -// useFrame((props) => { -// shaderMaterial.current!.uniforms.u_fx.value = updateNoise(props); -// shaderMaterial.current!.uniforms.u_texture.value = updateRenderTarget(gl); -// }); - -// return ( -// <> -// -// -// -// -// -// -// -// -// -// -// -// -// ); -// };