Implementing Neon Light Following Mouse Cursor in React Three Fiber

Based on the example you've shared, I can help you implement a similar neon light effect that follows the mouse cursor using React Three Fiber (R3F).

The effect appears to use a combination of a light source and a lens flare effect to create the neon glow that follows the mouse cursor. Let's break down how to implement this in R3F:

Basic Implementation

Here's how you can create a similar effect in React Three Fiber:

JSXCopied
import React, { useRef, useEffect } from 'react';
import { Canvas, useFrame, useThree, extend } from '@react-three/fiber';
import { Lensflare, LensflareElement } from 'three/examples/jsm/objects/Lensflare';
import * as THREE from 'three';

// Extend R3F to recognize the Lensflare components
extend({ Lensflare, LensflareElement });

function NeonLight() {
  const lightRef = useRef();
  const lensflareRef = useRef();
  const { camera, mouse, viewport } = useThree();
  
  // Create texture for the lensflare
  const textureLoader = new THREE.TextureLoader();
  const textureFlare0 = textureLoader.load('/textures/lensflare/lensflare0.png');
  const textureFlare3 = textureLoader.load('/textures/lensflare/lensflare3.png');
  
  useEffect(() => {
    // Create lensflare and add it to the light
    if (lightRef.current) {
      const lensflare = new Lensflare();
      
      lensflare.addElement(new LensflareElement(textureFlare0, 700, 0, new THREE.Color(0x00ffff)));
      lensflare.addElement(new LensflareElement(textureFlare3, 60, 0.6, new THREE.Color(0x00ffff)));
      lensflare.addElement(new LensflareElement(textureFlare3, 70, 0.7, new THREE.Color(0x00ffff)));
      lensflare.addElement(new LensflareElement(textureFlare3, 120, 0.9, new THREE.Color(0x00ffff)));
      lensflare.addElement(new LensflareElement(textureFlare3, 70, 1.0, new THREE.Color(0x00ffff)));
      
      lightRef.current.add(lensflare);
      lensflareRef.current = lensflare;
    }
  }, []);
  
  useFrame(() => {
    if (lightRef.current) {
      // Convert normalized mouse position to world space
      const x = (mouse.x * viewport.width) / 2;
      const y = (mouse.y * viewport.height) / 2;
      
      // Update light position to follow mouse
      lightRef.current.position.set(x, y, 5);
    }
  });
  
  return (
    <pointLight
      ref={lightRef}
      color={0x00ffff}
      intensity={1.5}
      distance={50}
      position={[0, 0, 5]}
    />
  );
}

function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 10], fov: 45 }}>
      <color attach="background" args={['#000']} />
      <NeonLight />
      {/* Add your scene objects here */}
      <mesh position={[0, 0, 0]}>
        <boxGeometry args={[2, 2, 2]} />
        <meshStandardMaterial color="#444" />
      </mesh>
    </Canvas>
  );
}

export default Scene;

Key Components Explained

1. Lensflare Effect: The neon glow is created using the Lensflare object from Three.js, which we need to import from the examples.

2. Mouse Tracking: We use the mouse and viewport from useThree() to track the mouse position and convert it to world coordinates.

3. Light Source: A pointLight is used as the base for the neon effect, with the lensflare attached to it.

Important Notes

1. You'll need to have the lensflare textures in your public folder. You can get these from the Three.js repository.

2. Make sure to install the necessary dependencies:

   BASHCopied
   npm install three @react-three/fiber

3. You might need to adjust the light intensity, color, and lensflare parameters to match the exact effect you want.

4. For better performance, you might want to add debouncing to the mouse movement tracking.

This implementation should give you a good starting point for creating a neon light effect that follows the mouse cursor in React Three Fiber. You can further customize the colors, intensity, and number of flare elements to achieve the specific look you want.

Implementing Neon Light Following Mouse Cursor in React Three Fiber

Based on the example you've shared, I can help you implement a similar neon light effect that follows the mouse cursor using React Three Fiber (R3F).

The effect appears to use a combination of a light source and a lens flare effect to create the neon glow that follows the mouse cursor. Let's break down how to implement this in R3F:

Basic Implementation

Here's how you can create a similar effect in React Three Fiber:

JSXCopied
import React, { useRef, useEffect } from 'react';
import { Canvas, useFrame, useThree, extend } from '@react-three/fiber';
import { Lensflare, LensflareElement } from 'three/examples/jsm/objects/Lensflare';
import * as THREE from 'three';

// Extend R3F to recognize the Lensflare components
extend({ Lensflare, LensflareElement });

function NeonLight() {
  const lightRef = useRef();
  const lensflareRef = useRef();
  const { camera, mouse, viewport } = useThree();
  
  // Create texture for the lensflare
  const textureLoader = new THREE.TextureLoader();
  const textureFlare0 = textureLoader.load('/textures/lensflare/lensflare0.png');
  const textureFlare3 = textureLoader.load('/textures/lensflare/lensflare3.png');
  
  useEffect(() => {
    // Create lensflare and add it to the light
    if (lightRef.current) {
      const lensflare = new Lensflare();
      
      lensflare.addElement(new LensflareElement(textureFlare0, 700, 0, new THREE.Color(0x00ffff)));
      lensflare.addElement(new LensflareElement(textureFlare3, 60, 0.6, new THREE.Color(0x00ffff)));
      lensflare.addElement(new LensflareElement(textureFlare3, 70, 0.7, new THREE.Color(0x00ffff)));
      lensflare.addElement(new LensflareElement(textureFlare3, 120, 0.9, new THREE.Color(0x00ffff)));
      lensflare.addElement(new LensflareElement(textureFlare3, 70, 1.0, new THREE.Color(0x00ffff)));
      
      lightRef.current.add(lensflare);
      lensflareRef.current = lensflare;
    }
  }, []);
  
  useFrame(() => {
    if (lightRef.current) {
      // Convert normalized mouse position to world space
      const x = (mouse.x * viewport.width) / 2;
      const y = (mouse.y * viewport.height) / 2;
      
      // Update light position to follow mouse
      lightRef.current.position.set(x, y, 5);
    }
  });
  
  return (
    <pointLight
      ref={lightRef}
      color={0x00ffff}
      intensity={1.5}
      distance={50}
      position={[0, 0, 5]}
    />
  );
}

function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 10], fov: 45 }}>
      <color attach="background" args={['#000']} />
      <NeonLight />
      {/* Add your scene objects here */}
      <mesh position={[0, 0, 0]}>
        <boxGeometry args={[2, 2, 2]} />
        <meshStandardMaterial color="#444" />
      </mesh>
    </Canvas>
  );
}

export default Scene;

Important Notes:

1. Textures: You'll need to provide the lensflare textures. You can find these in the Three.js examples repository or create your own.

2. Mouse Position Conversion: The code converts normalized mouse coordinates to world space based on the viewport size.

3. Performance: Lensflares can be performance-intensive, so you might want to optimize for mobile devices.

Enhanced Version with Custom Hooks

For a more reusable implementation, you can create a custom hook:

JSXCopied
import React, { useRef } from 'react';
import { Canvas, useFrame, useThree } from '@react-three/fiber';
import { Lensflare, LensflareElement } from 'three/examples/jsm/objects/Lensflare';
import * as THREE from 'three';

function useNeonCursor(color = 0x00ffff, intensity = 1.5, distance = 50) {
  const lightRef = useRef();
  const { mouse, viewport } = useThree();
  
  useFrame(() => {
    if (lightRef.current) {
      // Convert normalized mouse position to world space
      const x = (mouse.x * viewport.width) / 2;
      const y = (mouse.y * viewport.height) / 2;
      
      // Update light position to follow mouse
      lightRef.current.position.set(x, y, 5);
    }
  });
  
  // Create and setup lensflare
  const setupLensflare = (light) => {
    if (!light) return;
    
    const textureLoader = new THREE.TextureLoader();
    const textureFlare0 = textureLoader.load('/textures/lensflare/lensflare0.png');
    const textureFlare3 = textureLoader.load('/textures/lensflare/lensflare3.png');
    
    const lensflare = new Lensflare();
    lensflare.addElement(new LensflareElement(textureFlare0, 700, 0, new THREE.Color(color)));
    lensflare.addElement(new LensflareElement(textureFlare3, 60, 0.6, new THREE.Color(color)));
    lensflare.addElement(new LensflareElement(textureFlare3, 70, 0.7, new THREE.Color(color)));
    lensflare.addElement(new LensflareElement(textureFlare3, 120, 0.9, new THREE.Color(color)));
    lensflare.addElement(new LensflareElement(textureFlare3, 70, 1.0, new THREE.Color(color)));
    
    light.add(lensflare);
  };
  
  return (
    <pointLight
      ref={(light) => {
        lightRef.current = light;
        setupLensflare(light);
      }}
      color={color}
      intensity={intensity}
      distance={distance}
      position={[0, 0, 5]}
    />
  );
}

function Scene() {
  return (
    <Canvas camera={{ position: [0, 0, 10], fov: 45 }}>
      <color attach="background" args={['#000']} />
      {useNeonCursor(0x00ffff, 1.5, 50)}
      {/* Add your scene objects here */}
      <mesh position={[0, 0, 0]}>
        <boxGeometry args={[2, 2, 2]} />
        <meshStandardMaterial color="#444" />
      </mesh>
    </Canvas>
  );
}

export default Scene;

This implementation should give you a good starting point for creating a neon light effect that follows the mouse cursor in React Three Fiber. You can adjust the colors, intensity, and other parameters to match your desired aesthetic.