Can not load Web Viewer in my Next.js application

HOOPS Communicator
1

Hi, I am trying to use the HOOPS Web Viewer in my Next.js application. I have a created a HoopsViewer.js component, which looks like this:

import { useEffect } from "react";

const HoopsViewer = () => {
  useEffect(() => {
    // Ensure code runs only in the browser
    if (typeof window === "undefined") {
      return;
    }

    const script = document.createElement("script");
    script.src = "/js/hoops/hoops_web_viewer.js";
    script.onload = () => initViewer();
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  const initViewer = () => {
    // Check if the Communicator object is available globally
    if (Communicator) {
      const hwv = new Communicator.WebViewer({
        containerId: "viewer",
        endpointUri:
          "https://innovation-lab-downloads.s3-us-west-amazonaws.com/microengine.scs",
      });
      hwv.start();
      console.log("hwv", hwv);
    }
  };

  return (
    <div>
      <h3>Web Viewer Minimal Example</h3>
      <div
        id="viewer"
        style={{
          width: "640px",
          height: "480px",
          position: "relative",
          outline: "1px solid black",
        }}
      ></div>
    </div>
  );
};

export default HoopsViewer;

In the public directory I have created a data folder in which I have pasted the microengine.scs file.
In the public directory I have also created a js/hoops/hoops_web_viewer.js file in which I have pasted the hoops_web_viewer.js file within the SDK’s directory structure.

I see only the box with the black border, but nothing is rendered inside it.

image
image1909×822 117 KB

I also do not see a start function in my hwb object when I log it in the console.
What am I doing wrong?
Thanks in advance.

2

Hello @dayana,

Given the similarities between Next.js and React.js, our recommendation is to view a How-To article on using React with Communicator.

Thanks,
Tino

1 Like
3

Hi, Tino, thanks for your fast reply. The problem is that I have already tried the approach from the above video… It is not working for me. This is the code example:


import microengine from "../assets/microengine.scs";

export default class ViewerManager {
  createViewer(divId) {
    let viewer = new window.Communicator.WebViewer({
      containerId: divId,
      endpointUri: microengine,
    });
    viewer.start();
    return viewer;
  }
}


import React from "react";
import ViewerManager from "./ViewerManager";

export default class Hoops extends React.Component {
  constructor() {
    super();
    this._hwv = undefined;
    this._viewerManager = new ViewerManager();
  }

  componentDidMount() {
    this._hwv = this._viewerManager.createViewer("canvas");
  }

  render() {
    return (
      <div id="hoops-container">
        <div id="canvas"></div>
      </div>
    );
  }
}

I have created also a basic html page with this code to test the functionality in a normal HTML page, but still not working:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>My Viewer</title>
    <style type="text/css">
      #viewer {
        width: 640px;
        height: 480px;
        position: relative;
        outline: 1px solid black;
      }
    </style>
    <script
      crossorigin
      type="text/javascript"
      src="https://cdn.jsdelivr.net/gh/techsoft3d/hoops-web-viewer@2020.0.0/hoops_web_viewer.js"
    ></script>
    <script type="text/javascript">
      window.onload = () => {
        const hwv = new Communicator.WebViewer({
          containerId: 'viewer',
          endpointUri: '/data/microengine.scs',
        });
        hwv.start();
      };
    </script>
  </head>
  <body>
    <h3>Web Viewer Minimal Example</h3>
    <div id="viewer"></div>
  </body>
</html>

In the simple example below I have created a folder data where I defining microengine.scs, but not working…

image
image1919×721 49.2 KB
.

Just to clarify for the React approach I have defined the .scs file in assets folder, and I am calling the HoopsViewer component, just showing the black border and no model inside them. Same for the simple HTML page.

Best regards,
Dayana

4

Hello @dayana,

In addition to having hoops_web_viewer.js in your js/hoops public directory, please include the following files:

  • engine.wasm
  • engine-wasm.js

Thanks,
Tino

5

Hi, @tino

I have added the engine.wasm and engine-wasm.js files in hoops directory. Now I do not see any errors in console or failing resourses in network tab. The model is still not loading. Can I provide you any other additional data ?

image
image1917×753 119 KB

6

Hello @dayana,

I’m able to run your HoopsViewer.js in my React app (created using Create React App) with very minimal changes:

image
image1924×934 130 KB

In your last screenshot, can you confirm that microegine.scs is being served?

Thanks,
Tino

7

@dayana,

Also, are you seeing any messages in the console?

8

Yes, @tino , after adding the engine.wasm and engine-wasm.js in js/hoops directory and refreshing the page I have this error in the console:

image
image1355×87 6.41 KB

9

@tino probably this screenshot can also be helpfull

image
image1089×708 52.2 KB

10

It’s possible that the WASM file is not being served correctly. Perhaps you can check that the MIME type configuration is set (application/wasm).

11

Now it is working for me also withouth any additional changes. There was a mistake when copiying the .scs file. So I think there is no issue with the library and we can close the issue. Thank you for the support.

Best regards,
Dayana

1 Like