Utilities | Realsee Developer Platform

Documentation for the utility functions/classes in @realsee/dnalogel.

Import

import { Util } from '@realsee/dnalogel'

Util.blink

Blinks a DOM element / THREE.Object3D.

import { Five } from '@realsee/five'
import * as THREE from 'three'
const five: Five = {} as any
import { Util } from '@realsee/dnalogel'
const object = new THREE.Object3D()

// ---cut---
const target = document.getElementById('my-dom-element')!

Util.blink(target)
Util.reblink(target) // Blink in reverse

Util.FiveDomEvents

An interaction system for objects within the Five SDK space.

import { Five } from '@realsee/five'
import * as THREE from 'three'
const five: Five = {} as any
import { Util } from '@realsee/dnalogel'
const object = new THREE.Object3D()

// ---cut---
const domEvents = new Util.FiveDomEvents(five)

domEvents.addEventListener(object, 'click', () => {
  console.log('Clicked!')
})

domEvents.addEventListener(object, 'hover', () => {
  console.log('Hovered!')
})

domEvents.addEventListener(object, 'unHover', () => {
  console.log('Unhovered!')
})

Util.FivePuppet

Renders objects on a separate canvas, keeping its camera position and field of view in sync with Five SDK.

import { Five } from '@realsee/five'
import * as THREE from 'three'
const five: Five = {} as any
import { Util } from '@realsee/dnalogel'
const object = new THREE.Object3D()

// ---cut---
const fivePuppet = new Util.FivePuppet(five)
fivePuppet.scene.add(object)

Util.lookObject

Views an object from the best vantage point.

import { Five } from '@realsee/five'
import * as THREE from 'three'
const five: Five = {} as any
import { Util } from '@realsee/dnalogel'
const object = new THREE.Object3D()

// ---cut---
Util.lookObject(five, object)

Util.lookPoint

Looks toward a coordinate point from the best vantage point.

import { Five } from '@realsee/five'
import * as THREE from 'three'
const five: Five = {} as any
import { Util } from '@realsee/dnalogel'

const vector3 = new THREE.Vector3(0, 1, 2)
// ---cut---
Util.lookPoint(five, vector3)

Util.PointSelector

A point selector that supports long-press point selection on touch screens.

import { Five } from '@realsee/five'
import * as THREE from 'three'
const five: Five = {} as any
import { Util } from '@realsee/dnalogel'

// ---cut---
const selector = new Util.PointSelector(five)

// Continuous point selection
selector.on('select', (intersection) => {
  if (!intersection) return
  console.log('Selected point:', intersection.point)
})

// Finish automatically after selecting a point
selector.on('select', (intersection) => {
  if (!intersection) return
  console.log('Selected point:', intersection.point)
  selector.disable()
})

selector.enable()

Util.sculpt

Wraps a number of commonly used meshes. Full data structure: data

import { Five } from '@realsee/five'
import * as THREE from 'three'
const five: Five = {} as any
import { Util } from '@realsee/dnalogel'

// ---cut---
const {
  LineMesh,
  BoxMesh,
  CircleMesh,
  CircleWithEdgeMesh,
  CylinderMesh,
  PointMesh,
  PolygonMesh,
  PrismMesh
} = Util.sculpt

// Add the point (0,1,2) in space
five.scene.add(new PointMesh({ point: [0, 1, 2] }))

// Add a line
five.scene.add(new LineMesh({ points: [[0, 1, 2], [3, 4, 5]] }))

// Add a polygon
five.scene.add(new PolygonMesh({ points: [[0, 1, 2], [3, 4, 5], [6, 7, 8]] }))

// Add a circle of radius 3, centered at the point (0,1,2)
five.scene.add(new CircleMesh({ center: [0, 1, 2], radius: 3 }))

// Add a circle with an edge
five.scene.add(new CircleWithEdgeMesh({ center: [0, 1, 2], radius: 3 }))

// Add a cylinder
five.scene.add(new CylinderMesh({ bottomCenter: [0, 1, 0], topCenter: [0, 2, 0], radius: 3 }))

// Add a box whose base rectangle is [[0, 0, 0], [1, 0, 0], [1, 0, 1], [0, 0, 1]] and whose top point is [0, 2, 0]
five.scene.add(new BoxMesh({ 
  points: [
    [0, 0, 0],
    [1, 0, 0],
    [1, 0, 1],
    [0, 0, 1]
  ],
  heightPoint: [0, 2, 0], 
}))

// Add a prism
five.scene.add(new PrismMesh({
  points: [
    [0, 0, 0],
    [1, 0, 0],
    [1, 0, 2],
    [1, 0, 1],
    [0, 0, 1]
  ],
  heightPoint: [0, 2, 0], 
}))

See Sculpt object creation for an example that draws a BoxMesh and enables editing.

import { Five } from '@realsee/five'
import * as THREE from 'three'
const five: Five = {} as any
import { Util } from '@realsee/dnalogel'

// ---cut---
const { PointSelector } = Util
const { BoxMesh, BoxMeshEditor, createBox } = Util.sculpt

// Create a boxMesh
const boxMesh = new BoxMesh({ lineColor: 0xff0000 })
five.scene.add(boxMesh)

// Initialize the editor as needed
const editor = new BoxMeshEditor(boxMesh)

// Create the selector
const pointSelector = new PointSelector(five)

createBox(boxMesh, pointSelector).then(() => {
  console.log('Drawing complete')

  // Enable the editing feature as needed
  editor.enable()
})

Util.tag

A lightweight tag.

import { Five } from '@realsee/five'
import * as THREE from 'three'
const five: Five = {} as any
import { Util } from '@realsee/dnalogel'

// ---cut---
const tag1 = Util.tag(five, [0, 1, 2])
tag1.container.innerHTML = '<div>tag1</div>'

const tag2 = Util.tag(five, [0, 1, 2])
tag2.container.innerHTML = '<div>tag2</div>'

Or: initialize first, then set the position.

import { Five } from '@realsee/five'
import * as THREE from 'three'
const five: Five = {} as any
import { Util } from '@realsee/dnalogel'

// ---cut---
const tag = Util.tag(five)
tag.container.innerHTML = '<div>tag</div>'

tag.setPosition(new THREE.Vector3(0, 1, 2))