search

pchen66 / panolens.js

Javascript panorama viewer based on Three.js
https://pchen66.github.io/Panolens/
MIT License
2.79k stars 498 forks source link

How to use Panolens in Next JS #384

Closed irwansyafani closed 2 years ago

irwansyafani commented 2 years ago
Description

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

Panolens version
e-pacciani commented 2 years ago

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 commented 2 years ago

Alright, thank you @e-pacciani-developer

flyandi commented 2 years ago

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} />
    )
};