AutoFocusDOF

Attention s'il vous plaît ️ :

Ce référentiel fait désormais partie de la bibliothèque de post-traitement React Three React par défaut. Vous pouvez trouver comment l'utiliser ici: https://docs.pmnd.rs/react-postprocessing/effects/autofocus. Ce repo fonctionne toujours (décembre 2023) mais je ne le mettrai plus à le mettre à jour avec de nouvelles fonctionnalités. Vous pouvez toujours l'utiliser si vous le souhaitez, mais je vous recommande d'utiliser la version officielle maintenant car il est plus facile à utiliser et sera toujours mis à jour. J'apprécie votre intérêt pour ce projet.

Composant automatique de la Fibre React Three

Lien en direct avec la démo du composant https://autofocusdof.vercel.app

Télécharger le lien pour le composant: cliquez ici

Introduction

Ce composant a été créé pour vous faciliter la vie lors de la création d'une scène en utilisant React Three Fibre et l'effet post-traitement pour obtenir une mise au point automatique. Cela dépend de @ React-Three / Post-traitement pour travailler, en plus de pouvoir scanner des objets sur Canvas à l'aide d'un Raycaster pour calculer la distance.

Il existe certaines options que vous pouvez utiliser:

• bokehscale = {10} // échelle de flou
• Résolution = {1024} // Résolution (pourrait affecter les performances)
• MouseFocus // Si faux, le centre de l'écran sera le focus
• focusspeed = {0,05} // millisecondes pour concentrer un maillage nouvellement détecté
• FocalLonth = {0,01} // jusqu'où la focalisation doit aller

Comment utiliser?

 import AutoFocusDOF from './AutoFocusDOF'

Vous pouvez également créer un fichier pour maintenir le composant vous-même. Copiez et collez ces lignes.

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

};

Et ajouter ce composant à l'intérieur du composer d'effets ...

 <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>

Ressources: ThreeJS, Webgl, réagir trois fibres, réagir trois après le traitement

Montre, ne dis pas

Ici, vous pouvez voir une vidéo avec elle en action et certaines options https://www.youtube.com/watch?v=vflxceggtgs

Commencer à utiliser ce projet de démonstration

Téléchargez et installez Node.js sur votre ordinateur (https://nodejs.org/en/download/).

Ensuite, ouvrez VScode, faites glisser le dossier du projet. Ouvrez les dépendances du terminal VScode et de l'installation (vous devez le faire uniquement dans la première fois)

 npm install

Exécutez cette commande dans votre terminal pour ouvrir un serveur local à LocalHost: 8080

 npm run dev

---

Très important!

Ce composant recherche toujours des points sur les maillages et peut avoir un impact sur les performances si vous n'utilisez pas. L'utilisation est un must d'utiliser ce composant. Assurez-vous d'importer et d'embrasser toute votre scène avec

Exemple

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

Problèmes connus

Si vous ajoutez des composants qui couvrent l'écran entier, comme les étincelles, l'autofocus les verra et ne pourra pas se concentrer dans les objets derrière eux. En outre, il y a un problème à empêcher l'autofocus de fonctionner après un redimensionnement sur la toile. Je travaille toujours là-dessus et je prévois de le réparer bientôt.

Pouvez-vous laisser une étoile s'il vous plaît?

Serait vraiment apprécié si vous êtes prêt à me donner une star ici sur Github? Ou achetez-moi un café ☕ https://www.buymeacoffee.com/andersonmanci. L'argent sera utilisé pour produire plus de contenu à environ troisjs ou pour acheter de nouveaux cours.