AutoFocusDOF

โปรดใส่ใจ -

ที่เก็บนี้เป็นส่วนหนึ่งของไลบรารีการประมวลผลโพสต์ไฟเบอร์โพสต์เริ่มต้น คุณสามารถค้นหาวิธีการใช้งานได้ที่นี่: https://docs.pmnd.rs/react-postprocessing/effects/autofocus repo นี้ยังคงใช้งานได้ (ธ.ค. 2023) แต่ฉันจะไม่อัปเดตอีกต่อไปด้วยคุณสมบัติใหม่ คุณยังสามารถใช้งานได้หากคุณต้องการ แต่ฉันขอแนะนำให้คุณใช้เวอร์ชันอย่างเป็นทางการตอนนี้เพราะใช้งานง่ายกว่าและจะได้รับการอัปเดตเสมอ ฉันขอขอบคุณที่คุณสนใจในโครงการนี้

ส่วนประกอบ AutofocusDof สำหรับ React Three Fiber

ลิงค์สดพร้อมการสาธิตของส่วนประกอบ https://autofocusdof.vercel.app

ดาวน์โหลดลิงค์สำหรับส่วนประกอบ: คลิกที่นี่

การแนะนำ

ส่วนประกอบนี้ถูกสร้างขึ้นเพื่อให้ชีวิตของคุณง่ายขึ้นเมื่อสร้างฉากโดยใช้ปฏิกิริยาสามเส้นใยและเอฟเฟกต์การประมวลผลโพสต์เพื่อให้ได้โฟกัสอัตโนมัติ ขึ้นอยู่กับ @react-three/postprocessing ในการทำงานนอกเหนือจากการสแกนวัตถุบนผืนผ้าใบโดยใช้ Raycaster เพื่อคำนวณระยะทาง

มีตัวเลือกบางอย่างที่คุณสามารถใช้ได้:

• bokehscale = {10} // blur scale
• ความละเอียด = {1024} // ความละเอียด (อาจส่งผลต่อประสิทธิภาพ)
• MouseFocus // ถ้าเป็นเท็จกึ่งกลางของหน้าจอจะเป็นจุดสนใจ
• focusspeed = {0.05} // มิลลิวินาทีเพื่อโฟกัสตาข่ายที่ตรวจพบใหม่
• focallength = {0.01} // ควรโฟกัสไปไกลแค่ไหน

ใช้อย่างไร?

 import AutoFocusDOF from './AutoFocusDOF'

คุณยังสามารถสร้างไฟล์เพื่อเก็บส่วนประกอบด้วยตัวเอง เพียงแค่คัดลอกและวางบรรทัดเหล่านี้

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

};

และเพิ่มส่วนประกอบนี้ภายใน 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>

ทรัพยากร: threejs, webgl, ตอบสนองสามเส้นใย, ตอบสนองสามโพสต์การประมวลผล

แสดงอย่าบอก

ที่นี่คุณสามารถดูวิดีโอที่ใช้งานได้และตัวเลือกบางอย่าง https://www.youtube.com/watch?v=vflxceggtgs

เริ่มต้นใช้โครงการสาธิตนี้

ดาวน์โหลดและติดตั้ง node.js บนคอมพิวเตอร์ของคุณ (https://nodejs.org/en/download/)

จากนั้นเปิด vScode ลากโฟลเดอร์โครงการไป เปิดเทอร์มินัล vscode และติดตั้งการพึ่งพา (คุณต้องทำสิ่งนี้ในครั้งแรกเท่านั้น)

 npm install

เรียกใช้คำสั่งนี้ในเทอร์มินัลของคุณเพื่อเปิดเซิร์ฟเวอร์ท้องถิ่นที่ LocalHost: 8080

 npm run dev

---

สำคัญมาก!

ส่วนประกอบนี้มักจะค้นหาจุดบนตาข่ายและอาจส่งผลกระทบต่อประสิทธิภาพการทำงานหากคุณไม่ได้ใช้ การใช้เป็นสิ่งจำเป็นในการใช้ส่วนประกอบนี้ อย่าลืมนำเข้าและโอบกอดฉากทั้งหมดของคุณด้วย

ตัวอย่าง

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

ปัญหาที่รู้จัก

หากคุณเพิ่มส่วนประกอบที่ครอบคลุมทั้งหน้าจอเช่น Sparkles Autofocus จะเห็นพวกเขาและจะไม่สามารถโฟกัสในวัตถุที่อยู่เบื้องหลังพวกเขาได้ นอกจากนี้ยังมีปัญหาในการป้องกันการโฟกัสอัตโนมัติให้ทำงานหลังจากปรับขนาดบนผืนผ้าใบ ฉันยังคงดำเนินการเกี่ยวกับเรื่องนี้และวางแผนที่จะแก้ไขในไม่ช้า

คุณสามารถทิ้งดาวไว้ได้ไหม

จะได้รับการชื่นชมจริง ๆ ถ้าคุณเต็มใจที่จะให้ดาวที่นี่กับ GitHub? หรือซื้อกาแฟให้ฉัน☕ https://www.buymeacoffee.com/andersonmancini เงินจะถูกใช้ในการผลิตเนื้อหาเพิ่มเติมเกี่ยวกับ threejs หรือซื้อหลักสูตรใหม่