Example 1 - Basic setup

This example demonstrates the most basic usage of the CFF viewer component.

Reference: Example 1 - Basic Setup

Key features

• Single viewport configuration
• Simple 3D model loading (PLY format)
• Basic PerspectiveView implementation
• Minimal styling and configuration

Code example

<div
  style={{
    position: "relative",
    width: "100%",
    height: "600px",
    border: "1px solid #ccc",
    borderRadius: "4px",
    overflow: "hidden",
  }}
>
  {/* The Viewer component is the main component of the scan-viewer library. 
      It is responsible for rendering the 3D scene and handling user input. 

      Here we setup a parent container that it can fit nicely into this tutorial page.    
  */}
  <App />
</div>

import { PlySample } from "../../data/scans";
import { Viewport } from "../../ui/Viewport";
import { Viewer } from "../../Viewer";
import { PerspectiveView } from "../../views/PerspectiveView";

function App() {
  return (
    <Viewer
      // We want to fill the rest of the parent container
      sx={{
        background: "transparent",
        position: "absolute",
        inset: 0,
        zIndex: 0,
      }}
      // This is the key part, we need to pass the object to the viewer
      objects={{
        example: {
          // This is the most simple way to load a model, just pass the url.
          url: PlySample["FACTORY"].url,
          // There are tons of other options, check the 'types/ViewerObject' docs for more info.
        },
      }}
      // We could just set the preset to "single" and it would work, but we want to show how to use the viewport component.
      // preset="single"
    >
      <Viewport
        // This component is also a div-like component, so we can use the sx prop to style it. Also in the debugger you'll see it floating on top of the viewer.

        // The scan viewer will automatically set the viewport to the correct size and position of this component.

        // With the sx prop we just set it to fill the rest of the parent container. Pointer events are disabled by default, so you can interact with the viewer.
        sx={{
          background: "transparent",
          position: "absolute",
          inset: 0,
          zIndex: 0,
        }}
        props={{}}
        // The viewport needs a name / id, this is used to identify the viewport in the viewer.
        name={"3d"}
        // A bit of a unlucky name here, PerspectiveView is 3D, but it's still using an orthographic camera.
        component={PerspectiveView}
      />
    </Viewer>
  );
}

export default App;