AutoFocusDOF

Tolong perhatian ️ :

Repositori ini sekarang menjadi bagian dari perpustakaan pemrosesan serat React Three Fiber. Anda dapat menemukan cara menggunakannya di sini: https://docs.pmnd.rs/react-postprocessing/effects/autofocus. Repo ini masih berfungsi (Desember 2023) tetapi saya tidak akan memperbaruinya lagi dengan fitur baru. Anda masih dapat menggunakannya jika Anda mau, tetapi saya sarankan Anda menggunakan versi resmi sekarang karena lebih mudah digunakan dan akan selalu diperbarui. Saya menghargai minat Anda pada proyek ini.

Komponen autofocusdof untuk reaksi tiga serat

Tautan langsung dengan demo komponen https://autofocusdof.vercel.app

Unduh tautan untuk komponen: Klik di sini

Perkenalan

Komponen ini dibuat untuk membuat hidup Anda lebih mudah saat membuat adegan menggunakan reaksi tiga serat dan efek pemrosesan pos untuk mendapatkan fokus otomatis. Itu tergantung pada @react-tiga/postprocessing untuk bekerja, selain dapat memindai objek pada kanvas menggunakan raycaster untuk menghitung jarak.

Ada beberapa opsi yang dapat Anda gunakan:

• bokehscale = {10} // skala blur
• resolusi = {1024} // resolusi (dapat mempengaruhi kinerja)
• mousefocus // Jika salah, pusat layar akan menjadi fokus
• focusspeed = {0,05} // milidetik untuk memfokuskan mesh yang baru terdeteksi
• focAllength = {0,01} // Seberapa jauh fokusnya harus melangkah

Bagaimana cara menggunakannya?

 import AutoFocusDOF from './AutoFocusDOF'

Anda juga dapat membuat file untuk menahan komponen sendiri. Cukup salin dan tempel baris ini.

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

};

Dan tambahkan komponen ini di dalam Efek Composer ...

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

Sumber Daya: ThreeJs, WebGL, Bereaksi Tiga Serat, Bereaksi Tiga Posting Pemrosesan

Tunjukkan, jangan katakan

Di sini Anda dapat melihat video dengan itu beraksi dan beberapa opsi https://www.youtube.com/watch?v=vflxceggtgs

Mulai menggunakan proyek demo ini

Unduh dan instal node.js di komputer Anda (https://nodejs.org/en/download/).

Kemudian, buka vScode, seret folder proyek ke sana. Buka Terminal VScode dan instal dependensi (Anda perlu melakukan ini hanya untuk pertama kalinya)

 npm install

Jalankan perintah ini di terminal Anda untuk membuka server lokal di LocalHost: 8080

 npm run dev

---

Sangat penting!

Komponen ini selalu mencari poin pada jerat dan dapat berdampak pada kinerja jika Anda tidak menggunakan. Menggunakan adalah suatu keharusan untuk menggunakan komponen ini. Pastikan untuk mengimpor dan merangkul semua adegan Anda dengannya

Contoh

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

Masalah yang diketahui

Jika Anda menambahkan komponen yang menutupi seluruh layar, seperti kilau, fokus otomatis akan melihatnya dan tidak akan dapat fokus pada objek di belakangnya. Juga, ada masalah yang mencegah fokus otomatis untuk bekerja setelah mengubah ukuran di kanvas. Saya masih mengerjakan ini dan berencana untuk memperbaikinya segera.

Bisakah Anda meninggalkan bintang?

Akankah sangat dihargai jika Anda bersedia memberi saya bintang di sini di GitHub? Atau belikan saja saya kopi ☕ https://www.buymeacoffee.com/andersonmancini. Uang itu akan digunakan untuk menghasilkan lebih banyak konten tentang tiga atau untuk membeli kursus baru.