CodePen Embed

<html>

<head>
  <script src="https://api.catenda.com/js/v1/viewer3d"></script>
</head>

<body>

  <div id="splash">
    <div id="title">
      <div id="title-text">
        Shape
      </div>
      <div id="play">
        <button id="play-button" disabled=true onclick="start()">
          <i id="play-icon" class="fa fa-play"></i>
        </button>
      </div>
    </div>
    <div id="error">
      The example is unavailable<br>
      Please try again later
    </div>
    <div id="logo">
      <image id="logo-image" src="https://archbee-image-uploads.s3.amazonaws.com/v9iuLCcKE2amnKqiFVllF/qCmgrBQdRA0cjxeSZ0Rvn_logo-api-light.png" />
    </div>
  </div>
  <div id="gui"></div>
  <div id="scene">
    <div id="viewer-container">
      <div id="viewer-3d"></div>
    </div>
    <div id="console">
      <div id="console-header">
        <div id="console-header-text">Output</div>
        <button id="console-copy" onclick="copyConsole()">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11 12H1C0.447 12 0 11.553 0 11V1C0 0.448 0.447 0 1 0H11C11.553 0 12 0.448 12 1V11C12 11.553 11.553 12 11 12Z" fill="currentColor" />
            <path d="M15 16H4V14H14V4H16V15C16 15.553 15.553 16 15 16Z" fill="currentColor" />
          </svg>
          <span id="tooltip">Copy</span>
        </button>
      </div>
      <div id="console-text"></div>
    </div>
  </div>
  <script type="text/javascript">
    bimsync.setOnLoadCallback(function() {
      document.getElementById("play-button").disabled = false
    });
    bimsync.load();
  </script>
</body>

</html>

html {
  height: 100%;
  overflow: hidden;
  width: 100%;
}

body {
  background-color: #ade0bc;
  background-image: url("https://archbee-image-uploads.s3.amazonaws.com/oGjtxJ5MUZmGondFfGBOZ-0l0obCRKymJG7Q9KTtAhl-20240826-204445.png");
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  color: #004d47;
  font-family: Inter;
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

#console {
  display: flex;
  flex-direction: column;
  height: 100px;
  width: 100%;
  /* Be above measurements */
  z-index: 1;
}

#console-copy {
  align-items: center;
  background-color: #f3f3f5;
  border: none;
  color: #6e7574;
  display: flex;
  justify-content: center;
  margin-right: 16px;
  padding: 5px;
  /* Be above measurements */
  z-index: 1;
}

#console-copy:hover {
  color: #212322;
  cursor: pointer;
}

#console-copy:active {
  color: #c5c7c7;
}

#console-copy #tooltip {
  border-radius: 6px;
  bottom: 102px;
  background-color: black;
  color: #fff;
  font-size: 12px;
  padding: 10px;
  position: absolute;
  right: 2px;
  visibility: hidden;
  width: 40px;
}

#console-copy:hover #tooltip {
  visibility: visible;
}

#console-header {
  align-items: center;
  background-color: #f3f3f5;
  display: flex;
  height: 32px;
  justify-content: space-between;
}

#console-header-text {
  color: #6e7574;
  font-size: 14px;
  margin-left: 16px;
  user-select: none;
}

#console-text {
  background-color: white;
  color: black;
  flex: 1;
  font-family: monospace;
  font-size: 14px;
  overflow: auto;
  padding: 10px 16px 10px 16px;
  word-break: break-all;
}

#error {
  align-self: center;
  bottom: 50px;
  display: none;
  font-size: 20px;
  font-weight: 600;
  position: absolute;
  text-align: center;
}

#gui {
  display: none;
  left: 20px;
  position: absolute;
  top: 20px;
  /* Be above measurements */
  z-index: 1;
}

#logo {
  bottom: 15px;
  position: absolute;
  right: 15px;
}

#logo-image {
  width: 200px;
}

#play {
  align-items: center;
  display: flex;
  justify-content: center;
}

#play-button {
  align-items: center;
  background-color: #004d47;
  border-color: transparent;
  border-radius: 50%;
  color: #ade0bc;
  display: flex;
  font-size: 26px;
  height: 60px;
  justify-content: center;
  margin-top: 24px;
  width: 60px;
}

#play-button:disabled {
  cursor: wait;
}

#play-button:hover:enabled {
  background-color: #001e1c;
  cursor: pointer;
}

#play-icon {
  padding-left: 5px;
}

#scene {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-end;
  width: 100%;
}

#splash {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}

#splash #title {
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 36px;
  font-weight: 600;
  height: 100%;
  justify-content: center;
  text-align: center;
}

#title-text {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#viewer-container {
  flex: 1;
  overflow: hidden;
}

#viewer-3d {
  background: linear-gradient(rgb(237, 255, 254) 0px, rgb(255, 255, 255));
  height: 100%;
  width: 100%;
}

.lil-gui {
  --background-color: #30343a;
  --focus-color: #00665e;
  --hover-color: #005952;
  --number-color: #ade0bc;
  --string-color: #ade0bc;
  --text-color: #ade0bc;
  --title-background-color: #24272b;
  --title-text-color: #ade0bc;
  --widget-color: #004d47;
  --width: 180px;
}

// Global variables to ease access
let viewer3d = null;
let gui = null;
const modelId = "my-model-id";

// Enum of Ids for HTML elements referenced in this file
const ElementId = {
  CONSOLE_COPY: "console-copy",
  CONSOLE_TEXT: "console-text",
  ERROR: "error",
  GUI: "gui",
  LOADING_ICON: "loading-icon",
  PLAY_BUTTON: "play-button",
  PLAY_ICON: "play-icon",
  SPLASH: "splash",
  TOOLTIP: "tooltip",
  VIEWER_3D: "viewer-3d"
};

// Enum of style values used in this file
const Style = {
  FLEX: "flex",
  NONE: "none"
};

// Reset tooltip text
const consoleCopy = document.getElementById(ElementId.CONSOLE_COPY);
const onCopyLeave = function () {
  document.getElementById(ElementId.TOOLTIP).innerHTML = "Copy";
};
consoleCopy.addEventListener("mouseleave", onCopyLeave);
consoleCopy.addEventListener("touchend", onCopyLeave);

/**
 *  Catenda 3D viewer Shape Example.
 *  The runExample function contains the 3D viewer related calls to fulfill the example shown.
 */

// The code specific to the example
const runExample = function () {
  // gui labels
  const ADD = "Add";
  const ADD_BOX_SHAPE = "Add Box Shape";
  const ADD_CIRCLE_SHAPE = "Add Circle Shape";
  const ADD_SPHERE_SHAPE = "Add Sphere Shape";
  const REMOVE_ALL_SHAPES = "Remove All Shapes";
  const REMOVE_BOX_SHAPE = "Remove Box Shape";
  const REMOVE = "Remove";
  const REMOVE_CIRCLE_SHAPE = "Remove Circle Shape";
  const REMOVE_SPHERE_SHAPE = "Remove Sphere Shape";

  // Predefined ids for each shape type
  const boxShapeId = "box-id";
  const circleShapeId = "circle-id";
  const sphereShapeId = "sphere-id";

  // Keep track of number of shapes added
  let shapesCount = 0;

  // Hide spaces in the 3D viewer
  hideSpaces();

  /**
   * Define button callbacks
   */
  const onAddBoxShapeClick = function () {
    // Predefined shape
    const boxShape = {
      color: "red",
      extents: {
        x: 5.0,
        y: 5.0,
        z: 5.0
      },
      id: boxShapeId,
      onClick: () => {
        setOutput("Clicked Box Shape");
      },
      position: {
        x: -10.0,
        y: -10.0,
        z: 0.0
      },
      type: "box"
    };
    const shapeId = viewer3d.addShape(boxShape);
    shapesCount++;
    disableGuiProperty(ADD_BOX_SHAPE);
    enableGuiProperty(REMOVE_BOX_SHAPE);
    enableGuiProperty(REMOVE_ALL_SHAPES);
  };
  const onAddCircleShapeClick = function () {
    // Predefined shape
    const circleShape = {
      id: circleShapeId,
      onClick: () => {
        setOutput("Clicked Circle Shape");
      },
      position: {
        x: 0.0,
        y: 0.0,
        z: 1.0
      },
      radius: 5.0,
      type: "circle"
    };
    const shapeId = viewer3d.addShape(circleShape);
    shapesCount++;
    disableGuiProperty(ADD_CIRCLE_SHAPE);
    enableGuiProperty(REMOVE_CIRCLE_SHAPE);
    enableGuiProperty(REMOVE_ALL_SHAPES);
  };
  const onAddSphereShapeClick = function () {
    // Predefined shape
    const sphereShape = {
      color: "blue",
      id: sphereShapeId,
      onClick: () => {
        setOutput("Clicked Sphere Shape");
      },
      position: {
        x: 10.0,
        y: 10.0,
        z: 0.0
      },
      radius: 5.0,
      type: "sphere"
    };
    const shapeId = viewer3d.addShape(sphereShape);
    shapesCount++;
    disableGuiProperty(ADD_SPHERE_SHAPE);
    enableGuiProperty(REMOVE_SPHERE_SHAPE);
    enableGuiProperty(REMOVE_ALL_SHAPES);
  };
  const onRemoveAllShapesClick = function () {
    viewer3d.clearShapes();
    addFolder.controllers.forEach((controller) => {
      controller.enable();
    });
    removeFolder.controllers.forEach((controller) => {
      controller.disable();
    });
    shapesCount = 0;
    disableGuiProperty(REMOVE_ALL_SHAPES);
  };
  const onRemoveBoxShapeClick = function () {
    viewer3d.removeShape(boxShapeId);
    disableGuiProperty(REMOVE_BOX_SHAPE);
    enableGuiProperty(ADD_BOX_SHAPE);
    // Is this the last shape to be removed
    if (--shapesCount === 0) {
      disableGuiProperty(REMOVE_ALL_SHAPES);
    }
  };
  const onRemoveCircleShapeClick = function () {
    viewer3d.removeShape(circleShapeId);
    disableGuiProperty(REMOVE_CIRCLE_SHAPE);
    enableGuiProperty(ADD_CIRCLE_SHAPE);
    // Is this the last shape to be removed
    if (--shapesCount === 0) {
      disableGuiProperty(REMOVE_ALL_SHAPES);
    }
  };
  const onRemoveSphereShapeClick = function () {
    viewer3d.removeShape(sphereShapeId);
    disableGuiProperty(REMOVE_SPHERE_SHAPE);
    enableGuiProperty(ADD_SPHERE_SHAPE);
    // Is this the last shape to be removed
    if (--shapesCount === 0) {
      disableGuiProperty(REMOVE_ALL_SHAPES);
    }
  };

  // Map of gui items to data and callbacks
  const state = {
    [ADD_BOX_SHAPE]: onAddBoxShapeClick,
    [ADD_CIRCLE_SHAPE]: onAddCircleShapeClick,
    [ADD_SPHERE_SHAPE]: onAddSphereShapeClick,
    [REMOVE_ALL_SHAPES]: onRemoveAllShapesClick,
    [REMOVE_BOX_SHAPE]: onRemoveBoxShapeClick,
    [REMOVE_CIRCLE_SHAPE]: onRemoveCircleShapeClick,
    [REMOVE_SPHERE_SHAPE]: onRemoveSphereShapeClick
  };

  /**
   * Build gui panel
   */
  const addFolder = gui.addFolder(ADD);
  addFolder.add(state, ADD_BOX_SHAPE);
  addFolder.add(state, ADD_CIRCLE_SHAPE);
  addFolder.add(state, ADD_SPHERE_SHAPE);
  const removeFolder = gui.addFolder(REMOVE);
  removeFolder.add(state, REMOVE_BOX_SHAPE).disable();
  removeFolder.add(state, REMOVE_CIRCLE_SHAPE).disable();
  removeFolder.add(state, REMOVE_SPHERE_SHAPE).disable();
  removeFolder.add(state, REMOVE_ALL_SHAPES).disable();
};

/**
 *  Code required for bootstrapping a 3D viewer instance with which to execute the example
 */

// Bootstrap a 3D viewer instance and load a model
const initialize = async function (onViewerReady) {
  // Show the loading indicator until the 3D viewer is ready
  showLoadingIndicator();
  // Hide any previous error message
  hideElement(ElementId.ERROR);

  // Create a gui instance for 3D viewer controls
  gui = new lil.GUI({
    container: document.getElementById("gui")
  });
  gui.title("Options");

  // HTML Div element where the 3D viewer is mounted
  const div3d = document.getElementById(ElementId.VIEWER_3D);

  // Options used when creating a 3D viewer instance
  const viewerOptions = {
    enableTouch: true,
    textRenderMode: "dom"
  };

  // Create a 3D viewer instance
  viewer3d = new bimsync.viewer3d.Viewer3D(div3d, viewerOptions);

  // Options used when loading the model
  const loadModelOptions = {
    modelId: modelId
  };

  // Fetch a 3D viewer token for the model to load
  const url3d = await getToken();
  // Load the model
  viewer3d
    .loadModelsFromToken(url3d, loadModelOptions)
    .then(function () {
      // 3D viewer is ready, stop loading
      showPlayButton();
      // Hide the splash screen
      hideElement(ElementId.SPLASH);
      // Show the 3D viewer gui
      showElement(ElementId.GUI);
      // 3D viewer is ready, run the callback
      onViewerReady();
    })
    .catch(function (error) {
      showError();
    });
};

// Entry point called when user clicks the play button
const start = function () {
  // Bootstrap a 3D viewer instance then run the example
  initialize(runExample);
};

/**
 * Utility functions used in this file
 */

// Set console text in clipboard
const copyConsole = async function () {
  await navigator.clipboard.writeText(
    document.getElementById(ElementId.CONSOLE_TEXT).innerHTML
  );
  document.getElementById(ElementId.TOOLTIP).innerHTML = "Copied!";
};

// Disable a property in the gui panel
const disableGuiProperty = function (propertyName) {
  gui
    .controllersRecursive()
    .find(({ property }) => property === propertyName)
    .disable();
};

// Enable a property in the gui panel
const enableGuiProperty = function (propertyName) {
  gui
    .controllersRecursive()
    .find(({ property }) => property === propertyName)
    .enable();
};

// Retrieve a 3D viewer token
const getToken = async function () {
  /**
   * Fetch a 3D viewer token from the Catenda API
   * Here we are using a CodePen specific endpoint for demo purposes
   * Replace this with your own token endpoint in a real application
   * Find out more at https://developers.catenda.com/viewer-3d/bim-models
   * The model this token provides access to is licensed under the Creative Commons Attribution 4.0 International License.
   * (C) original authors
   * https://github.com/buildingSMART/Sample-Test-Files
   * More info and a link to the full license text is available on http://creativecommons.org/licenses/by/4.0/
   */
  const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
  const tryCount = 4;
  let response, result;
  // Try to fetch the token a few times before giving up
  for (let i = 1; i <= tryCount; i++) {
    response = await fetch(
      "https://documentation-edge.developers.catenda.com/token3d"
    );
    if (response.ok) {
      break;
    } else {
      // If the response is not ok, we wait a bit before trying again
      if (i < tryCount) {
        await delay(i * 1000);
      }
      continue;
    }
  }
  // If the response is ok, we can proceed
  if (response && response.ok) {
    const data = await response.json();
    result = data.url;
  } else {
    showError();
  }
  return result;
};

// Hide an HTML element passing its id
const hideElement = function (elementId) {
  document.getElementById(elementId).style.display = Style.NONE;
};

// Hide spaces in the 3D viewer
const hideSpaces = function () {
  const spaceObjectIds = viewer3d
    .getProducts()
    .filter((product) => product.ifcType === "IfcSpace")
    .map((space) => space.objectId);
  viewer3d.hide(spaceObjectIds);
};

// Set the text displayed in the output panel
const setOutput = function (value) {
  const text = value instanceof Object ? JSON.stringify(value) : value;
  document.getElementById(ElementId.CONSOLE_TEXT).innerHTML = text;
};

// Show an HTML element passing its id
const showElement = function (elementId) {
  document.getElementById(elementId).style.display = Style.FLEX;
};

// Reset after an error
const showError = function () {
  viewer3d.dispose();
  gui.destroy();
  showPlayButton();
  showElement(ElementId.ERROR);
};

// Display the loading indicator
const showLoadingIndicator = function () {
  const playButton = document.getElementById(ElementId.PLAY_BUTTON);
  playButton.disabled = true;
  const playIconElement = document.getElementById(ElementId.PLAY_ICON);
  let loadingIcon = document.createElement("i");
  loadingIcon.id = ElementId.LOADING_ICON;
  loadingIcon.classList.add("fa", "fa-spinner", "fa-spin");
  playIconElement.replaceWith(loadingIcon);
};

// Display the play button
const showPlayButton = function () {
  const playButton = document.getElementById(ElementId.PLAY_BUTTON);
  playButton.disabled = false;
  const loadingIconElement = document.getElementById(ElementId.LOADING_ICON);
  let playIcon = document.createElement("i");
  playIcon.id = ElementId.PLAY_ICON;
  playIcon.classList.add("fa", "fa-play");
  loadingIconElement.replaceWith(playIcon);
};

// Update a value used in the gui panel to reflect a change
const updateGuiPropertyValue = function (propertyName, value) {
  gui
    .controllersRecursive()
    .find(({ property }) => property === propertyName)
    .setValue(value);
};

This Pen is owned by Catenda on CodePen.

See more by @Catenda on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

https://cdn.jsdelivr.net/npm/lil-gui@0.19