Sketchfab.init unresponsive with React

viewer

(Sputn1kolas) #1

Having an odd bug on our website. We're using sketchfab to load a 3D model with a number of different camera angles. The first time the user navigates to the page with the 3D model, it loads just fine and all of the functionality works. However, if the user then navigates away from the model page, and then returns to it without refreshing the page, the 3D model will not automatically load. Even if the user then manually clicks sketchfab's "start" button, the 3D model will load but the event listeners will not initialize.

Here is a link to our (very much still under development) site: http://betaclimbing.ca/. You can replicate the bug by going to the Demo page, navigating to the Routes tab (the model here works), navigating back to the Home page, and then going to the Demo page/Routes tab again (model is now broken).

When the model breaks, we noticed that we aren't getting a response out of client.init. None of the code in the success function will run, and we don't get an error message either. Our site is built with React and React-router. Has anybody had similar problems or know what the issue might be?

The code below is how we're initializing the sketchfab viewer. It is being called on componentDidMount

  initializeSketchFab() {
    const version = '1.0.0'
    const iframe = document.getElementById('api-frame')
    const client = new window.Sketchfab(version, iframe)

    client.init(
     modelID,
      {
        camera: 0,
        preload: 0,
        scrollwheel: 0,
        navigation: 'fps',
        annotations_visible: 0,
        transparent: 1,
        ui_stop: 0,
        ui_infos: 0,
        ui_controls: 0,
        fps_speed: 0,
        success: (api) => {
          api.load()
          api.start()
          this.setSketchFab(api)
          this.apiEventListeners()
        },
        error: function onError() {
          console.log('Viewer error')
        }
      }
    )
  }

#2

Hmm, maybe @arthurjamain can help.


(Rémy Bouquet) #3

I can reproduce the issue. Hard to tell what is the cause though, it looks like an initialization issue, but there is no error in the log.
Note for @arthurjamain:
At first the viewer auto starts, but when you come back you have to click the "play" button, so that's already strange. The init callback doesn't seem to be called the second time.
Also the camera seems to not be initialized properly the second time, I don't know if it's due to the same init problem or if it's a camera limit issue.

@sputn1kolas could you try to disable the constraints on the model in sketchfab and see if it changes the situation please?


#4

On a side note, you could use autostart: 1 in your parameters rather than api.load() and api.start() in the success callback, so the model will always load even with this initialization issue.


(Sputn1kolas) #5
  • removed constraints, and camera will now set initial viewpoint correctly, however, api calls to change the camera still do not function (you can see this by clicking any of the buttons to the left of the model, of which have no effect).