AutoFocusDOF

請注意配x ：

該存儲庫現在是默認的React三個光纖後處理庫的一部分。您可以在此處找到如何使用它：https：//docs.pmnd.rs/reeact-postprocessing/effects/autofocus。此存儲庫仍然有效（2023年12月），但我將不再使用新功能進行更新。如果需要，您仍然可以使用它，但是我建議您現在使用官方版本，因為它易於使用並且將始終更新。感謝您對這個項目的興趣。

反應三個纖維的自動對位分量

與組件演示的實時鏈接https://autofocusdof.vercel.app

下載組件的鏈接：單擊此處

介紹

創建此組件的目的是在使用React三個光纖創建場景和後處理效果以獲得自動焦點時創建其生活。它取決於 @react-three/後處理，除了能夠使用射線卡斯特在畫布上掃描對像以計算距離。

您可以使用一些選項：

• bokehscale = {10} //模糊比例
• 分辨率= {1024} //分辨率（可能影響性能）
• MouseFocus //如果false，則屏幕的中心將是焦點
• pocussPeed = {0.05} //毫秒注意到新近檢測到的網格
• 焦點= {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}
        />
    );

};

並添加此組件在felsivestComposer中...

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

資源：三j，webgl，反應三個光纖，反應三個後處理

展示，不要告訴

在這裡，您可以在行動中看到一個視頻，有些選項https://www.youtube.com/watch?v=vflxceggtgs

開始使用此演示項目

在計算機（https://nodejs.org/en/download/）上下載並安裝node.js。

然後，打開Vscode，將項目文件夾拖到其上。打開VSCODE終端並安裝依賴項（您只需要首次執行此操作）

 npm install

在您的終端中運行此命令，以打開Localhost的本地服務器：8080

 npm run dev

---

非常重要！

該組件始終在網格上搜索點，如果您不使用的話，可能會對性能產生影響。使用是使用此組件的必不可少的。確保用它導入並擁抱所有場景

例子

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

已知問題

如果添加覆蓋整個屏幕的組件，例如Sparkles，則自動對焦將看到它們，並且將無法集中在它們後面的對像中。此外，還有一個問題，可以防止在帆布上調整大小後自動對焦工作。我仍在努力，併計劃盡快解決。

你能留下一顆星星嗎？

如果您願意在Github上給我一顆星星，這將不勝感激嗎？或給我買咖啡☕https://www.buymeacoffee.com/andersonmancini。這筆錢將用於生產更多有關三名J的內容或購買新課程。