How to use Panolens in Next JS

[irwansyafani]

Description

How to use Panolens in Next JS, I do not have any reference to implement
can someone help?

Panolens version

• Master

Browser

• Chrome

OS

• macOS

Device: Mac M1

[e-pacciani]

You can install the npm package and use it in the React template of the page you are making. I would make an hook named usePanolens passing the HTML ref of the element to the hook and configuring there all the options to create the panorama.

[irwansyafani]

Alright, thank you @e-pacciani-developer

[flyandi]

This is what I do ..

import THREE from "threejs";
import {useRef, useEffect} from "react";

const usePanolens = ({ width = "100%", height = "100%", options }) => {

    const instance = useRef();
    useEffect(() => {
        const container = instance.current;
        new Viewer({
            container,
            controlBar: false,
            renderer: new THREE.WebGLRenderer({
                alpha: true,
                antialias: false,
                preserveDrawingBuffer: true,
            }),
            ...options,
        })

    });

    return (
        <div style={{width, height}} ref= {instance} />
    )
};