Annotation - Verge3D User Manual - Soft8Soft
Description: Learn how to use Annotation in your interactive 3D apps made with Verge3D

Object3D → AnnotationControl →

# Annotation

This class is used to create and display 2D HTML sprites called annotations. Annotation may contain an optional dialog text (or HTML layout) which appears when the user clicks on the annotation label.

## Code Example

`const annotation = new v3d.Annotation(app.container, 'A', 'Hello! ...'); app.scene.add(annotation);`

## Styles

Verge3D offers 3 CSS classes to define annotation look:

- .v3d-annotation — for annotation labels.
- .v3d-annotation-transparent — for semi-transparent annotation labels.
- .v3d-annotation-dialog — for annotation dialogs.

You can override these classes in your own applications. See this page for more info.

## Constructor

### Annotation(container : HTMLElement, character : String, dialogContents : String)

container
  The ID of an HTML-element or the HTML-element itself which will contain the annotation.
character
  A symbol displayed inside the annotation label e.g "1", "2", "3" or "A", "B", "C". In fact, the label character can be a string of any length.
dialogContents
  A text displayed in the annotation popup dialog. This dialog appears when the user clicks on the annotation. It may contain HTML formatted text as well. Specify an empty line to disable the popup dialog feature.

## Properties

See the base AnnotationControl class for common properties.

### # .character : String

Annotation character.

### # .dialogContents : String

Annotation dialog text.

### # .annotation : HTMLElement

Annotation label element (usually div).

### # .annotationDialog : HTMLElement

Annotation dialog element (usually div).

### # .annotationDialogVisible : Boolean

Annotation dialog visibility flag. Calculated by the AnnotationControl.update method.

### # .fadeObscured : Boolean

Fade (make semi-transparent) the annotation if obscured by other objects. Default is `true`.

### # .isAnnotation : Boolean

Used to check whether this or derived classes are annotations. You should not change this, as it is used internally for optimization.

## Methods

See the base Object3D class for common methods.

### # .clone() → Annotation

Returns a clone of this Annotation object and any descendants.

### # .dispose()

Removes the HTML layout and the event listeners for the annotation.

### # .raycast(raycaster : Raycaster, intersects : Array)

Not implemented yet.

## Puzzles

Use the following puzzles to create/remove or open/close annotations:

- add annotation
- remove annotation
- open annotation
- close annotation

## Source

For more info on how to obtain the source code of this module see this page.