Missing example application in embeddable 3D Viewer

Help
7

Turns out my initial issue had something to do with the Vite react-ts template, so I ended up just doing it in plain ReactJS.

Here’s an example of a React component using hooks:


import React, { useEffect, useRef } from "react";
import { Viewer } from "@speckle/viewer";

const SpeckleSceneWithHooks = () => {
  const mount = useRef(null);
  useEffect(() => {
    async function getModel(viewer, speckleURL) {
      console.log(`Loading ${speckleURL}`)
      await viewer.loadObject(speckleURL)
    }

    const v = new Viewer(mount.current);
    const url = 'https://speckle.xyz/streams/508c1fa349/objects/42dfcc0b875322e937353201c93d7e5e'
    getModel(v, url);

    return () => {
      while (mount.current.hasChildNodes()) {
        mount.current.removeChild(mount.current.firstChild)
      }
    }
  }, []);

  return <div id="vis" style={{ width: 400, height: 400 }} ref={mount} />;
};

export default SpeckleSceneWithHooks;

And here’s the class equivalent:

import React, { Component } from "react";
import { Viewer } from "@speckle/viewer";

class SpeckleSceneWithClass extends Component {
  componentDidMount() {
    async function getModel(viewer, speckleURL) {
      console.log(`Loading ${speckleURL}`)
      await viewer.loadObject(speckleURL)
    }

    const v = new Viewer(this.mount);
    const url = 'https://speckle.xyz/streams/508c1fa349/objects/42dfcc0b875322e937353201c93d7e5e'
    getModel(v, url);
  }

  componentWillUnmount() {
    while (this.mount.hasChildNodes()) {
      this.mount.removeChild(this.mount.firstChild);
    }
  }

  render() {
    return (
      <div
        id="vis"
        style={{ width: 400, height: 400 }}
        ref={(mount) => {
          this.mount = mount;
        }}
      />
    );
  }
}

export default SpeckleSceneWithClass;

I’ll have a look this weekend around playing with applying filters and getting properties!

5 Likes