AutoFocusDOF

Внимание, пожалуйста ️ :

Этот репозиторий в настоящее время является частью библиотеки по умолчанию трех оптоволоконных пост -обработки. Вы можете найти, как его использовать здесь: https://docs.pmnd.rs/react-postprocessing/effects/autofocus. Этот репо все еще работает (декабрь 2023 г.), но я больше не буду обновлять его с помощью новых функций. Вы все еще можете использовать его, если хотите, но я рекомендую использовать официальную версию сейчас, потому что ее легче использовать и всегда будет обновляться. Я ценю ваш интерес к этому проекту.

AutoFocusDOF компонент для реагирования три волокна

Живая ссылка с демонстрацией компонента https://autofocusdof.vercel.app

Скачать ссылку для компонента: нажмите здесь

Введение

Этот компонент был создан, чтобы упростить вашу жизнь при создании сцены с использованием React Three Fiber и эффект после обработки для получения автоматического фокуса. Это зависит от @React-three/постобработки для работы, в дополнение к тому, чтобы иметь возможность сканировать объекты на холсте, используя Raycaster для расчета расстояния.

Есть некоторые варианты, которые вы можете использовать:

• Bokehscale = {10} // Шкала размытия
• Resolution = {1024} // разрешение (может повлиять на производительность)
• Mousefocus // Если false, центр экрана будет фокусом
• 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}
        />
    );

};

И добавьте этот компонент в EffectComposer ...

 <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. Деньги будут использоваться для производства большего количества контента около трех JJS или для покупки новых курсов.