AutoFocusDOF

Aufmerksamkeit bitte Euen :

Dieses Repository ist jetzt Teil der Standard -Reaktion von drei Faser -Postverarbeitungsbibliothek. Hier finden Sie, wie Sie es hier verwenden: https://docs.pmnd.rs/react-postprocessing/effects/autofocus. Dieses Repo funktioniert immer noch (Dezember 2023), aber ich werde es nicht mehr mit neuen Funktionen aktualisieren. Sie können es immer noch verwenden, wenn Sie möchten, aber ich empfehle Ihnen, die offizielle Version jetzt zu verwenden, da sie einfacher zu verwenden ist und immer aktualisiert wird. Ich schätze Ihr Interesse an diesem Projekt.

Autofocusdof -Komponente für React Three Faser

Live -Link mit der Demo der Komponente https://autofocusdof.vercel.app

Laden Sie den Link für die Komponente herunter: Klicken Sie hier

Einführung

Diese Komponente wurde erstellt, um Ihr Leben zu erleichtern, wenn Sie eine Szene mit React Three Fiber und dem Nachverarbeitungseffekt erstellen, um einen automatischen Fokus zu erhalten. Es hängt davon ab, dass @react-Drei/Nachbearbeitung zu arbeiten, zusätzlich dazu, Objekte auf Leinwand mit einem Raycaster zu scannen, um die Entfernung zu berechnen.

Es gibt einige Optionen, die Sie verwenden können:

• bokehscale = {10} // Blur Skala
• Auflösung = {1024} // Auflösung (kann die Leistung beeinflussen)
• Mousefocus // Wenn falsch, liegt die Mitte des Bildschirms im Fokus
• focusspeed = {0.05} // Millisekunden, um ein neu erkanntes Netz zu fokussieren
• Focallength = {0.01} // Wie weit der Fokus stehen sollte

Wie benutze ich?

 import AutoFocusDOF from './AutoFocusDOF'

Sie können auch eine Datei erstellen, um die Komponente selbst zu halten. Kopieren Sie diese Zeilen einfach und fügen Sie einfach ein.

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

};

Und fügen Sie diese Komponente in den EffectsComposer hinzu ...

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

Ressourcen: ThreeJs, WebGL, reagieren Sie drei Faser, reagieren Sie drei Postverarbeitung

Zeigen Sie, sagen Sie es nicht

Hier sehen Sie ein Video damit in Aktion und einige Optionen https://www.youtube.com/watch?v=vflxceggtgs

Erste Schritte mit diesem Demo -Projekt

Laden Sie node.js auf Ihrem Computer herunter und installieren Sie sie (https://nodejs.org/en/download/).

Öffnen Sie dann VSCODE und ziehen Sie den Projektordner darauf. Öffnen Sie die VSCODE -Anschluss und installieren Sie Abhängigkeiten (Sie müssen dies nur im ersten Mal tun)

 npm install

Führen Sie diesen Befehl in Ihrem Terminal aus, um einen lokalen Server bei Localhost: 8080 zu öffnen

 npm run dev

---

Sehr wichtig!

Diese Komponente sucht immer nach Punkten auf Maschen und kann sich auf die Leistung auswirken, wenn Sie nicht verwenden. Die Verwendung ist ein Muss, um diese Komponente zu verwenden. Achten Sie darauf, Ihre gesamte Szene damit zu importieren und zu umarmen

Beispiel

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

Bekannte Probleme

Wenn Sie Komponenten hinzufügen, die den gesamten Bildschirm wie die Funkeln abdecken, wird der Autofokus sie sehen und sich nicht in den dahinter stehenden Objekten konzentrieren. Außerdem besteht ein Problem, dass der Autofokus nach einer Größenänderung auf der Leinwand funktioniert. Ich arbeite immer noch daran und plane, es bald zu beheben.

Kannst du bitte einen Stern verlassen?

Wäre sehr geschätzt, wenn Sie bereit sind, mir hier auf Github einen Stern zu geben? Oder kaufen Sie mir einen Kaffee ☕ https://www.buymaacoffee.com/andersonmancini. Das Geld wird verwendet, um mehr Inhalte über dreiJs zu produzieren oder neue Kurse zu kaufen.