@zhengyuzi/gltf-viewer-for-react v0.0.1

@zhengyuzi/gltf-viewer-for-react

React gltf 3D model viewer, based on @zhengyuzi/gltf-viewer.

Installing

# install peer dependency
npm install three
# install package
npm install @zhengyuzi/gltf-viewer-for-react

Usage

import "@zhengyuzi/gltf-viewer-for-react/dist/style.css"

Basic

import { useEffect, useRef, useState } from "react"
import { Viewer, ViewerControlPanel } from "@zhengyuzi/gltf-viewer-for-react"
import type { ViewerRef } from "@zhengyuzi/gltf-viewer-for-react"

function App() {
  const [url] = useState("/test.glb")

  const ViewerAppRef = useRef<ViewerRef | null>(null)

  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <Viewer ref={ViewerAppRef} url={url}></Viewer>
    </div>
  )
}

export default App

Using ControlPanel

import { Viewer, ViewerControlPanel } from "@zhengyuzi/gltf-viewer-for-react"

<Viewer ref={ViewerAppRef} url={url}>
  <ViewerControlPanel />
</Viewer>