HTML Anchor Elements

Sometimes, you might want to enhance your scene with HTML elements to describe objects, show images next to them, or to connect them better to your UI. Therefore, we implemented as specific data format that let’s you put anchors in the scene which can then be used to display HTML elements on the projected position on the canvas.

 const anchorDataText = new HTMLElementAnchorTextData({
  location: [-50, 0, 0],
  data: <IAnchorDataText>{
    color: "#ff0000",
    text: "Text Data"
  }
});
sceneTree.root.data.push(anchorDataText);

const anchorDataImage = new HTMLElementAnchorImageData({
  location: [0, 50, 0],
  data: <IAnchorDataImage>{
    alt: "an image",
    src: "./images/icon2.png",
    width: 581 * 0.1, // scaling original width
    height: 280 * 0.1 // scaling original height
  }
});
sceneTree.root.data.push(anchorDataImage);
sceneTree.root.updateVersion();

The code snippet shows how to add text and image data, but also custom data can be added as well. This is shown in the example below.

Hint: Clicking Click to Run opens a standalone environment with a live preview and direct links to the CodeSandbox project and GitHub source code.

Additional Examples

Additional example can be found on the viewer examples page in the HTML anchors section.