Marker

Tracks the World, View and Canvas coordinates, and visibility, of a position within a Scene.

Position

A Marker holds its position in the World, View and Canvas coordinate systems in three properties:

• Marker#worldPos holds the Marker's 3D World-space coordinates. This property can be dynamically updated. The Marker will fire a "worldPos" event whenever this property changes.
• Marker#viewPos holds the Marker's 3D View-space coordinates. This property is read-only, and is automatically updated from Marker#worldPos and the current Camera position. The Marker will fire a "viewPos" event whenever this property changes.
• Marker#canvasPos holds the Marker's 2D Canvas-space coordinates. This property is read-only, and is automatically updated from Marker#canvasPos and the current Camera position and projection. The Marker will fire a "canvasPos" event whenever this property changes.

Visibility

Marker#visible indicates if the Marker is currently visible. The Marker will fire a "visible" event whenever Marker#visible changes.

This property will be false when:

• Marker#entity is set to an Entity, and Entity#visible is false,
• Marker#occludable is true and the Marker is occluded by some Entity in the 3D view, or
• Marker#canvasPos is outside the boundary of the Canvas.

Usage

In the example below, we'll create a Marker that's associated with a Mesh (which a type of Entity).

We'll configure our Marker to become invisible whenever it's occluded by any Entities in the canvas.

We'll also demonstrate how to query the Marker's visibility status and position (in the World, View and Canvas coordinate systems), and how to subscribe to change events on those properties.

import {Viewer, GLTFLoaderPlugin, Marker} from "xeokit-sdk.es.js";

const viewer = new Viewer({
    canvasId: "myCanvas"
});

// Create the torus Mesh
// Recall that a Mesh is an Entity
new Mesh(viewer.scene, {
    geometry: new ReadableGeometry(viewer.scene, buildTorusGeometry({
        center: [0,0,0],
        radius: 1.0,
        tube: 0.5,
        radialSegments: 32,
        tubeSegments: 24,
        arc: Math.PI * 2.0
    }),
    material: new PhongMaterial(viewer.scene, {
        diffuseMap: new Texture(viewer.scene, {
            src: "textures/diffuse/uvGrid2.jpg"
        }),
        backfaces: true
    })
});

// Create the Marker, associated with our Mesh Entity
const myMarker = new Marker(viewer, {
     entity: entity,
     worldPos: [10,0,0],
     occludable: true
});

// Get the Marker's current World, View and Canvas coordinates
const worldPos   = myMarker.worldPos;     // 3D World-space position
const viewPos    = myMarker.viewPos;      // 3D View-space position
const canvasPos  = myMarker.canvasPos;    // 2D Canvas-space position

const visible = myMarker.visible;

// Listen for change of the Marker's 3D World-space position
myMarker.on("worldPos", function(worldPos) {
   //...
});

// Listen for change of the Marker's 3D View-space position, which happens
// when either worldPos was updated or the Camera was moved
myMarker.on("viewPos", function(viewPos) {
   //...
});

// Listen for change of the Marker's 2D Canvas-space position, which happens
// when worldPos or viewPos was updated, or Camera's projection was updated
myMarker.on("canvasPos", function(canvasPos) {
   //...
});

// Listen for change of Marker visibility. The Marker becomes invisible when it falls outside the canvas,
// has an Entity that is also invisible, or when an Entity occludes the Marker's position in the 3D view.
myMarker.on("visible", function(visible) { // Marker visibility has changed
   if (visible) {
       this.log("Marker is visible");
   } else {
       this.log("Marker is invisible");
   }
});

// Listen for destruction of Marker
myMarker.on("destroyed", () => {
     //...
});