AutoFocusDOF

انتباه من فضلك ️ :

أصبح هذا المستودع الآن جزءًا من مكتبة معالجة الألياف الثلاثة للألياف الافتراضية. يمكنك العثور على كيفية استخدامه هنا: https://docs.pmnd.rs/react-postprocessing/effects/autofocus. لا يزال هذا الريبو يعمل (ديسمبر 2023) لكنني لن أقوم بتحديثه بعد الآن بميزات جديدة. لا يزال بإمكانك استخدامه إذا أردت ، لكنني أوصي باستخدام الإصدار الرسمي الآن لأنه من الأسهل استخدامه وسيتم تحديثه دائمًا. أنا أقدر اهتمامك بهذا المشروع.

مكون AutofocusDof لرد ثلاثة الألياف

رابط مباشر مع العرض التوضيحي للمكون https://autofocusdof.vercel.app

تنزيل الرابط للمكون: انقر هنا

مقدمة

تم إنشاء هذا المكون لجعل حياتك أسهل عند إنشاء مشهد باستخدام React Three Fiber وتأثير المعالجة بعد الحصول على تركيز تلقائي. يعتمد ذلك على @React-ثلاثة/postprocessing للعمل ، بالإضافة إلى أن تكون قادرًا على مسح الكائنات على قماش باستخدام Raycaster لحساب المسافة.

هناك بعض الخيارات التي يمكنك استخدامها:

• Bokehscale = {10} // blur مقياس
• الدقة = {1024} // الدقة (قد تؤثر على الأداء)
• Mousefocus // إذا كان خطأ ، فإن مركز الشاشة سيكون محور التركيز
• FOCUSSPEED = {0.05} // milliseconds لتركيز شبكة تم اكتشافها حديثًا
• FORCALLENGTH = {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>

القضايا المعروفة

إذا قمت بإضافة مكونات تغطي الشاشة بأكملها ، مثل التألق ، فستراها ضبط تلقائي للصورة ولن تتمكن من التركيز في الكائنات التي تقف وراءها. أيضًا ، هناك مشكلة تمنع التركيز التلقائي على العمل بعد تغيير الحجم على القماش. ما زلت أعمل على هذا وأخطط لإصلاحه قريبًا.

هل يمكنك ترك نجم من فضلك؟

سيكون موضع تقدير حقًا إذا كنت على استعداد لإعطائي نجمة هنا على Github؟ أو اشتر لي قهوة ☕ https://www.buymeacoffee.com/andersonmancini. سيتم استخدام الأموال لإنتاج المزيد من المحتوى حوالي ثلاثة جوس أو لشراء دورات جديدة.