Move useTweaks and rename shader

Author: sekeidesign

app/page.tsx

@@ -1,18 +1,24 @@
 'use client';
 
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { Canvas, useFrame, useThree } from '@react-three/fiber';
 import fragmentShader from './shaders/fragment.glsl';
 import vertexShader from './shaders/vertex.glsl';
 import * as THREE from 'three';
+import { useTweaks } from 'use-tweaks';
 
-function Box(props: any) {
+function Shader(props: any) {
   const shaderRef = useRef<THREE.ShaderMaterial | null>(null);
   const { viewport } = useThree();
+  const { opacity } = useTweaks({
+    opacity: { value: 1, min: 0, max: 1, step: 0.05 },
+  });
   useFrame((state) => {
     if (shaderRef.current) {
       shaderRef.current.uniforms.uTime.value += 0.01;
+      shaderRef.current.uniforms.uOpacity.value = opacity;
       shaderRef.current.uniforms.uPointer.value = state.pointer;
+      // console.log(opacity);
     }
   });
 
@@ -26,6 +32,7 @@ function Box(props: any) {
         uniforms={{
           uTime: { value: 0.0 },
           uPointer: { value: new THREE.Vector2(0.5, 0.5) },
+          uOpacity: { value: 0.0 },
         }}
       />
     </mesh>
@@ -38,7 +45,7 @@ export default function Home() {
       <Canvas orthographic>
         <ambientLight intensity={Math.PI / 2} />
         <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
-        <Box props={{ position: [0, 0, 0] }} />
+        <Shader props={{ position: [0, 0, 0] }} />
       </Canvas>
     </main>
   );

app/shaders/fragment.glsl

@@ -1,6 +1,8 @@
-uniform float uTime;
 varying vec2 vUv;
+
+uniform float uTime;
 uniform vec2 uPointer;
+uniform float uOpacity;
 
 void main(void)
 {
@@ -15,6 +17,6 @@ void main(void)
     color.g+=mix(.25,1.,vUv.y*pointer.y);
     color.b+=1.;
 
-    vec4 outputColor=vec4(color,1.);
+    vec4 outputColor=vec4(color,uOpacity);
     gl_FragColor=outputColor;
 }