Skip to content

ThreeIsometricNode

Overview

Shows three.js content with isometric scaling that takes up the entire viewport in a high-performance way.

Note: When using in a PhET sim, the "entire viewport" is not just the screen view, but includes the nav bar/etc.

@author Jonathan Olson <jonathan.olson@colorado.edu>

Class ThreeIsometricNode

import { ThreeIsometricNode } from 'scenerystack/mobius';

Constructor

new ThreeIsometricNode( layoutBounds : Bounds2, providedOptions? : ThreeIsometricNodeOptions )

Instance Methods

getPhetioMouseHit( point : Vector2 ) : PhetioObject | null | 'phetioNotSelectable'

for studio autoselect

projectPoint( point : Vector3 ) : Vector2

Projects a 3d point in the global coordinate frame to one within the 2d global coordinate frame.

unprojectPoint( point : Vector2, modelZ ) : Vector3

Project a 2d global screen coordinate into 3d global coordinate frame. Defaults to a target model z of 0 (in model coords)

getRayFromScreenPoint( globalScreenPoint : Vector2 ) : Ray3

Given a screen point, returns a 3D ray representing the camera's position and direction that point would be in the 3D scene.

layout( width : number, height : number )

render( target : THREE.WebGLRenderTarget | undefined )

Renders the simulation to a specific rendering target

@param target - undefined for the default target

dispose()

Releases references.

Instance Properties

stage : ThreeStage

(readonly)

backgroundEventTarget : Rectangle

(readonly)

our target for drags that don't hit other UI components

Type ThreeIsometricNodeOptions

Constructor options are passed directly to ThreeStage as well as used by this Node.

import type { ThreeIsometricNodeOptions } from 'scenerystack/mobius';

Source Code

See the source for ThreeIsometricNode.ts in the mobius repository.