ThreeStage¶

Overview¶

Encapsulates the main three.js primitives needed for a stage (scene/camera/renderer).

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

Class ThreeStage¶

import { ThreeStage } from 'scenerystack/mobius';

Constructor¶

new ThreeStage( providedOptions? : ThreeStageOptions )¶

Instance Methods¶

renderToCanvas( supersampleMultiplier, backingMultiplier, scale ) : HTMLCanvasElement¶

Returns a Canvas containing the displayed content in this scene.

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 coordinates using THREE/Vector3.unproject()

getRayFromScreenPoint( screenPoint : 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.

setDimensions( width : number, height : number )¶

adjustViewOffset( cameraBounds : Bounds2 )¶

Adjusts the camera's view offsets so that it displays the camera's main output within the specified cameraBounds. This is a generalization of the isometric FOV computation, as it also supports other combinations such as properly handling pan/zoom. See https://github.com/phetsims/density/issues/50

render( target : THREE.WebGLRenderTarget | undefined, autoClear )¶

Renders the simulation to a specific rendering target

@param target - undefined for the default target @param autoClear - when true, THREE will clear all pixels prior to rendering the next frame onto it. This is expensive, but can clean up animations where objects look laggy/warped in certain contexts.

dispose()¶

Releases references.

Instance Properties¶

activeScale : number¶

Scale applied to interaction that isn't directly tied to screen coordinates (rotation), updated in layout

canvasWidth : number¶

canvasHeight : number¶

threeScene : THREE.Scene¶

(readonly)

threeCamera : THREE.PerspectiveCamera¶

(readonly)

threeRenderer : THREE.WebGLRenderer | null¶

dimensionsChangedEmitter : TEmitter¶

(readonly)

contextLostEmitter : TEmitter¶

(readonly)

contextRestoredEmitter : TEmitter¶

(readonly)

Static Methods¶

computeIsometricFOV( fov : number, canvasWidth : number, canvasHeight : number, layoutWidth : number, layoutHeight : number ) : number¶

It's a bit tricky, since if we are vertically-constrained, we don't need to adjust the camera's FOV (since the width of the scene will scale proportionally to the scale we display our contents at). It's only when our view is horizontally-constrained where we have to account for the changed aspect ratio, and adjust the FOV so that the content shows up at a scale of "sy / sx" compared to the normal case. Note that sx === sy is where our layout bounds fit perfectly in the self, so we don't really have a constraint. Most of the complexity here is that threeCamera.fov is in degrees, and our ideal vertically-constrained FOV is 50 (so there's conversion factors in place).

Type ThreeStageOptions¶

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

• backgroundColorProperty?: TReadOnlyProperty<Color>
• cameraPosition?: Vector3
  The initial camera position
• threeRendererOptions?: THREE.WebGLRendererParameters
• threeRendererPixelRatio?: number

Source Code¶

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