@threlte/extras/dist/interactivity/defaults.js

Utilities, abstractions and plugins for your Threlte apps

import { useThrelte, watch } from '@threlte/core';
export const getDefaultComputeFunction = (target) => {
    const { camera } = useThrelte();
    let width = target.current.clientWidth;
    let height = target.current.clientHeight;
    const resizeObserver = new ResizeObserver(([entry]) => {
        width = entry.contentRect.width;
        height = entry.contentRect.height;
    });
    watch(target, (target) => {
        if (target)
            resizeObserver.observe(target);
        return () => {
            if (target)
                resizeObserver.unobserve(target);
        };
    });
    return (event, state) => {
        state.pointer.update((pointer) => {
            pointer.set((event.offsetX / width) * 2 - 1, -(event.offsetY / height) * 2 + 1);
            return pointer;
        });
        state.raycaster.setFromCamera(state.pointer.current, camera.current);
    };
};