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的内容或购买新课程。