AutoFocusDOF

ATENCIÓN, POR FAVOR ️ :

Este repositorio ahora forma parte de la biblioteca de procesamiento Post de fibra reaccionada predeterminada. Puede encontrar cómo usarlo aquí: https://docs.pmnd.rs/react-postprocessing/effects/autofocus. Este repositorio todavía funciona (diciembre de 2023), pero ya no lo actualizaré con nuevas funciones. Todavía puede usarlo si lo desea, pero le recomiendo que use la versión oficial ahora porque es más fácil de usar y siempre se actualizará. Agradezco su interés en este proyecto.

Componente automático de autofocusdof para reaccionar tres fibra

Enlace en vivo con la demostración del componente https://autofocusdof.vercel.app

Descargar enlace para el componente: haga clic aquí

Introducción

Este componente fue creado para facilitar su vida al crear una escena usando React Three Fiber y el efecto posterior al procesamiento para obtener un enfoque automático. Depende de @React-Three/Postprocessing to Work, además de poder escanear objetos en lienzo usando un Raycaster para calcular la distancia.

Hay algunas opciones que puede usar:

• bokehscale = {10} // escala de desenfoque
• resolución = {1024} // Resolución (podría afectar el rendimiento)
• MouseFocus // Si False, el centro de la pantalla será el foco
• focusspeed = {0.05} // milisegundos para enfocar una malla recientemente detectada
• focall longitud = {0.01} // ¿Qué tan lejos debería llegar el enfoque?

¿Cómo usar?

 import AutoFocusDOF from './AutoFocusDOF'

También puede crear un archivo para mantener el componente usted mismo. Simplemente copie y pegue estas líneas.

 import { useRef } from 'react'
import { useFrame, useThree } from '@react-three/fiber'
import { DepthOfField } from '@react-three/postprocessing'
import { Raycaster, Vector2, Vector3 } from 'three'

export default function AutoFocusDOF(
    { bokehScale = 10, 
    focalLength = 0.001, 
    focusSpeed = 0.05, 
    mouseFocus = false, 
    resolution = 512 
    }) 
{
    const { camera, mouse, scene } = useThree()

    const ref = useRef()
    const raycaster = new Raycaster()
    const finalVector = new Vector3()

    raycaster.firstHitOnly = true


    useFrame((state) => {
        if (mouseFocus) {
            raycaster.setFromCamera(mouse, camera)
        } else {
            raycaster.setFromCamera(new Vector2(0, 0), camera)
        }

        const intersects = raycaster.intersectObjects(scene.children)

        if (intersects.length > 0) {
            finalVector.lerp(intersects[0].point, focusSpeed)
            ref.current.target = finalVector
        }
    });

    return (
        <DepthOfField
            focalLength={focalLength}
            bokehScale={bokehScale}
            height={resolution}
            ref={ref}
        />
    );

};

Y agregue este componente dentro del EffectsComposer ...

 <EffectComposer>
 <AutoFocusDOF
   bokehScale={10} //blur scale
   resolution={1024} //resolution (decrease for performance)
   mouseFocus //if false, the center of the screen will be the focus
   focusSpeed={0.05} // milliseconds to focus a new detected mesh
   focalLength={0.01} //how far the focus should go
 />
</EffectComposer>

Recursos: ThreeJS, WebGL, React Three Fiber, React Three Post Processing

Muestra, no digas

Aquí puede ver un video con él en acción y algunas opciones https://www.youtube.com/watch?v=vflxceggtgs

Comenzando a usar este proyecto de demostración

Descargue e instale Node.js en su computadora (https://nodejs.org/en/download/).

Luego, abra VScode, arrastre la carpeta del proyecto. Abra las dependencias de terminal e instalación de VSCode (debe hacer esto solo en la primera vez)

 npm install

Ejecute este comando en su terminal para abrir un servidor local en Localhost: 8080

 npm run dev

---

¡Muy importante!

Este componente siempre está buscando puntos en mallas y puede tener un impacto en el rendimiento si no está utilizando. Usar es imprescindible para usar este componente. Asegúrese de importar y abrazar toda su escena con ella

Ejemplo

 <Canvas>
  <Bvh firstHitOnly>
    <----Your Model />
  </Bvh>
</Canvas>

Problemas conocidos

Si agrega componentes que cubren toda la pantalla, como los destellos, el enfoque automático los verá y no podrá concentrarse en los objetos detrás de ellos. Además, existe un problema para evitar que el enfoque automático funcione después de un cambio de tamaño en el lienzo. Todavía estoy trabajando en esto y planeo arreglarlo pronto.

¿Puedes dejar una estrella por favor?

¿Sería realmente apreciado si estás dispuesto a darme una estrella aquí en Github? O cómprame un café ☕ https://www.buymeacoffee.com/andersonmancini. El dinero se utilizará para producir más contenido sobre tresjs o para comprar nuevos cursos.