Skip to main content

Annotation(Hotspot)

To use Annotations, you should include CSS/SASS file for them.

// It's included in the bundle CSS
import "@egjs/view3d/css/view3d-bundle.min.css";

// Or you can use individual css/sass file
import "@egjs/view3d/css/view3d-annotation.min.css"
import "@egjs/view3d/sass/view3d-annotation.sass"

Annotations​

You can place the annotations above the 3D model by adding elements inside ".view3d-annotation-wrapper" element.

You should also add data-position="x y z", which will place annotations in the given position.
(Optional) By adding data-focus="yaw pitch zoom", you can set where the camera should be when annotation is clicked.

<div class="view3d-wrapper">
  <div class="view3d-canvas">
  <div class="view3d-annotation-wrapper">
    <div class="view3d-annotation default" data-position="0.13 0.5 -0.05" data-focus="-90 0 30"></div>
    <div class="view3d-annotation default" data-position="-0.22 0.5 0.05" data-focus="90 0 30" data-duration="500"></div>
    <div class="view3d-annotation default" data-position="-0.05 0.4 0.18" data-focus="0 20 35" data-duration="0"></div>
  </div>
</div>

Adding default class will render annotations in a default style, which renders white circles with index in it.

{
    src: "/egjs-view3d/model/draco/payphone.glb",
    poster: "/egjs-view3d/poster/payphone.png"
}
info

If you want to change the class names for those elements, see annotationWrapper and annotationSelector.
In that case, you have to add correct CSS for each elements yourself.

Annotation for animated models​

<div class="view3d-wrapper">
  <div class="view3d-canvas">
  <div class="view3d-annotation-wrapper">
    <div class="view3d-annotation default" data-mesh-index="10" data-face-index="5" data-focus="0 0 15" data-duration="500">
      <div class="view3d-annotation-tooltip default">A thick eyebrow</div>
    </div>
    <div class="view3d-annotation default" data-mesh-index="6" data-face-index="5" data-focus="30 15 30" data-duration="200">
      <div class="view3d-annotation-tooltip default">An animated robot arm</div>
    </div>
  </div>
</div>
A thick eyebrow
An animated robot arm
{
    src: "/egjs-view3d/model/RobotExpressive.glb"
}

Annotation Tooltips​

You can add an element with class .view3d-annotation-tooltip inside annotations for showing tooltips that will appear when clicked.

Adding default class will render tooltips in a default style, which has translucent black background and some paddings applied.

<div class="view3d-wrapper">
  <div class="view3d-canvas">
  <div class="view3d-annotation-wrapper">
    <div class="view3d-annotation default" data-position="0.1 0 0">
      <div class="view3d-annotation-tooltip default">
        <div class="card">
          <div class="card-image">
            <figure class="image is-4by3 m-0">
              <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image" />
            </figure>
          </div>
          <div class="card-content is-size-7">
            <div class="content">
              Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="view3d-annotation default" data-position="0 0.1 0">
      <div class="view3d-annotation-tooltip default">Plane text description</div>
    </div>
    <div class="view3d-annotation default" data-position="0.3 0.3 0.3"></div>
  </div>
</div>
Placeholder image
Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
Plane text description
{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm_default.png"
}

Annotations inside glTF​

Annotations can be included in glTF files when saving 3D models with Playground (See Download tab)

{
    src: "/egjs-view3d/model/annotation/alarm/alarm.gltf",
    poster: "/egjs-view3d/poster/alarm_default.png"
}

Load annotations from JSON file​

Annotations can be loaded from the saved JSON file made with Playground (See Model tab)
Use annotationURL to load it.

{
    src: "/egjs-view3d/model/draco/alarm.glb",
    poster: "/egjs-view3d/poster/alarm_default.png",
    annotationURL: "/egjs-view3d/model/annotation/alarm-annotations.json"
}