MobiusScreenView¶

Overview¶

MobiusScreenView extends PhET's ScreenView to include functionality specific to 3D model-to-view and view-to-model transformations using THREE.js. The MobiusScreenView renders 3D content in an isometric projection and handles the layout and rendering processes.

@author Agustín Vallejo (PhET Interactive Simulations) @author Michael Kauzmann (PhET Interactive Simulations)

Class MobiusScreenView¶

import { MobiusScreenView } from 'scenerystack/sim';

Constructor¶

new MobiusScreenView( providedOptions : MobiusScreenViewOptions )¶

Instance Methods¶

modelToViewPoint( point : Vector3 ) : Vector2¶

Projects a 3d model point to a 2d view point (in the screen view's coordinate frame). see https://github.com/phetsims/density-buoyancy-common/issues/142

modelToViewDelta( point1 : Vector3, point2 : Vector3 ) : Vector2¶

Get the difference in screen view coordinates between two model points. Both points are needed because of the 3d nature of the model */

viewToModelPoint( point : Vector2, modelZ ) : Vector3¶

Project a 2d global screen coordinate into 3d global coordinate frame. Default to z distance of 0 (center of masses/pool)

viewToModelDelta( viewPoint1 : Vector2, modelZ1 : number, viewPoint2 : Vector2, modelZ2 : number ) : Vector3¶

Get the difference in screen view coordinates from the first to the second provided screen points, in model coordinates. Both points are needed because of the 3d nature of the model. Please note that the delta can have negative values.

layout( viewBounds : Bounds2 )¶

END: model view transform code ///////////////////////////////////////////////////////////////

renderSceneNode()¶

step( dt : number )¶

Steps forward in time.

Instance Properties¶

supportsWebGL : boolean¶

(protected, readonly)

Whether this ScreenView supports WebGL.

sceneNode : ThreeIsometricNode¶

(protected, readonly)

Used to display the 3D view

Static Methods¶

showWebGLWarning( screenView : ScreenView )¶

Shows a warning with a link to more information about PhET simulation webgl compatibility.

Type MobiusScreenViewOptions¶

import type { MobiusScreenViewOptions } from 'scenerystack/sim';

• sceneNodeOptions?: ThreeIsometricNodeOptions
• & ScreenViewOptions

Type THREEModelViewTransform¶

import type { THREEModelViewTransform } from 'scenerystack/sim';

• modelToViewPoint: ( modelPoint: Vector3 ) => Vector2
• modelToViewDelta: ( point1: Vector3, point2: Vector3 ) => Vector2
• viewToModelPoint: ( point: Vector2, modelZ?: number ) => Vector3
• viewToModelDelta: ( viewPoint1: Vector2, modelZ1: number, viewPoint2: Vector2, modelZ2: number ) => Vector3

Source Code¶

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