2 viewers and 2 sessions in same page (with API v3)

Grasshopper ShapeDiver
1

Hello

I try to have 2 different shapeDivers in the same page but they are both loading in the same

The objective :

  • 1 Viewer in the main page
  • 1 Viewer in a pop-up

The code

Main page :

<div class="wpb_wrapper main_wrapper" id="SD_visual">
      <span id="project_infos"></span>
      <div id='sdv-container' att="<?php echo get_option('ip_frontend_ticket') ?>">
               <canvas id="canvas"></canvas>
      </div>
</div>

function initSdvApp(){
  $('#loading').show();
  viewer = SDV.api.createViewer({ 
    canvas: document.getElementById('canvas'), 
    id: 'myViewer'
  }).then(function(viewer) {
  });

  session = SDV.api.createSession({
    ticket: document.getElementById('sdv-container').getAttribute('att'),
    modelViewUrl: 'https://sdeuc1.eu-central-1.shapediver.com',
    id: 'mySession'
  }).then(function(session) {
    /************************************
    DEFAULT PARAM load into the configurator 
    ********************************************/
    SDV.api.sessions.mySession.getParameterByName('Compute Fixations Holes')[0].value = false;
    session.customize().then(function(session) {
      console.log(session.name);
      getOutputs() ;
      $('#loading').hide();
    });
  });
}

Pop-up

<div class="" id="SD_visual_folding">
        <span id="folding_infos"></span>
        <div id='sdv-container-folding' att="12345">
                <canvas id="canvasFolding"></canvas>
          </div>
</div>

function initSdvAppFolding(){
  //$('#loading').show();
  viewerFolding = SDV.api.createViewer({ 
    canvas: document.getElementById('canvasFolding'), 
    id: 'myViewerFolding'
  }).then(function(viewerFolding) {
    /************************************
    DEFAULT SCENE SETTINGS load into the configurator
    ********************************************/
    console.log("viewer folding");
    console.log(viewerFolding);
  });

  sessionFolding = SDV.api.createSession({
    //ticket: document.getElementById('sdv-container').getAttribute('att'),
    ticket: "456789",
    modelViewUrl: 'https://sdeuc1.eu-central-1.shapediver.com',
    id: 'mySessionFolding'
  }).then(function(sessionFolding) {
    /************************************
    DEFAULT PARAM load into the configurator 
    ********************************************/
    console.log("session folding");
    console.log(sessionFolding);
  });
}

Can you help me ?
Thanks

2

Hello @olivia3,
I created a CodeSandBox for you with mutliple sessions and multiple viewers. You are probably just missing the excludeViewers property in the session creation.

Regarding model settings, currently, the settings of the first model are applied globally, and are therefore applied in both viewers. We know this is not ideal, and this might be adapted in the future (as well as the viewer/session assignment). You can still manually change things in the viewers.

Hope this helps.
Cheers, Michael

1 Like
3

Thanks !
With excludeViewers it’s working