AutoFocusDOF

ATENÇÃO POR FAVOR ️ :

Este repositório agora faz parte da biblioteca de pós -processamento de três fibras. Você pode encontrar como usá-lo aqui: https://docs.pmnd.rs/react-postprocessing/effects/autofocus. Este repo ainda funciona (dezembro de 2023), mas não o atualizo mais com novos recursos. Você ainda pode usá -lo, se quiser, mas eu recomendo que você use a versão oficial agora, porque é mais fácil de usar e sempre será atualizado. Agradeço seu interesse neste projeto.

Componente AutoFocusDof para reagir três fibras

Link ao vivo com a demonstração do componente https://autofocusdof.vercel.app

Baixe o link para o componente: Clique aqui

Introdução

Esse componente foi criado para facilitar sua vida ao criar uma cena usando o React Three Fiber e o efeito pós -processamento para obter um foco automático. Depende de @react-three/pós-processamento para trabalhar, além de poder digitalizar objetos na tela usando um Raycaster para calcular a distância.

Existem algumas opções que você pode usar:

• bokehscale = {10} // escala de desfoque
• Resolução = {1024} // Resolução (pode afetar o desempenho)
• mousefocus // se false, o centro da tela será o foco
• focusspeed = {0,05} // milissegundos para focar uma malha recém -detectada
• Focalngth = {0,01} // até que ponto o foco deve ir

Como usar?

 import AutoFocusDOF from './AutoFocusDOF'

Você também pode criar um arquivo para manter o componente. Basta copiar e colar essas linhas.

 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}
        />
    );

};

E adicione este componente dentro do 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: trêsjs, webgl, reagem três fibras, reagem três pós -processamento

Mostre, não diga

Aqui você pode ver um vídeo com ele em ação e algumas opções https://www.youtube.com/watch?v=vflxceggtgs

Começando usando este projeto de demonstração

Faça o download e instale o Node.js no seu computador (https://nodejs.org/en/download/).

Em seguida, abra o vscode, arraste a pasta do projeto para ele. Abra o terminal VSCode e instale dependências (você precisa fazer isso apenas na primeira vez)

 npm install

Execute este comando em seu terminal para abrir um servidor local no localHost: 8080

 npm run dev

---

Muito importante!

Esse componente está sempre procurando pontos nas malhas e pode ter um impacto no desempenho, se você não estiver usando. Usar é necessário para usar este componente. Certifique -se de importar e abraçar toda a sua cena com ela

Exemplo

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

Questões conhecidas

Se você adicionar componentes que cobrem a tela inteira, como os brilhos, o foco automático os verá e não poderá se concentrar nos objetos por trás deles. Além disso, há um problema para impedir que o foco automático funcione após um redimensionamento na tela. Ainda estou trabalhando nisso e planejo consertá -lo em breve.

Você pode deixar uma estrela, por favor?

Seria realmente apreciado se você estivesse disposto a me dar uma estrela aqui no Github? Ou compre -me um café ☕ https://www.buymeacoffee.com/andersonmancini. O dinheiro será usado para produzir mais conteúdo sobre trêsjs ou comprar novos cursos.