App class allows you to set up your 3D application more easily. It includes code to init WebGL renderer, load glTF scenes, auto-start animations as well as logic for basic camera controls.
// loaded GLTF 2.0 asset
var url = 'template.gltf';
// construct a new application with simple rotating preloader
var app = new v3d.App('v3d-container', null, new v3d.SimplePreloader({ container: 'v3d-container' }));
// load main scene
app.loadScene(url, function() {
app.enableControls();
app.run();
runCode();
});
function runCode() {
// place your own code here
}
container - the id of an HTML-element or the HTML-element itself to contain the canvas.
ctxSettings - the WebGL context attributes to be passed in the canvas.getContext() method.
preloader - the instance of application's Preloader class.
This constructor does the following:
Array of animation actions used to schedule app animations. Instead of accessing this list directly you can also use the getAnimationActionByName method to search for an action by its clip name.
Set the scene background to null after loading a glTF scene. Default is false.
A container element. This is a parent element for 3D Canvas used for rendering operations.
Application main scene.
Application main camera.
Application clock object.
Array of functions which will be called just before shader compilation. Shader compilation occurs during scene loading right after all assets (glTF metadata, binary, textures) has been fetched.
Use compile callback to enable post-processing or add fog, since adding these effects in runtime can negatively affect performance.
function initFog(appInstance) {
appInstance.scene.fog = new v3d.FogExp2('green', 0.01);
}
// loaded GLTF 2.0 asset
var url = 'my_scene.gltf';
// construct a new application with simple rotating preloader
var app = new v3d.App('v3d-container', null, new v3d.SimplePreloader({ container: 'v3d-container' }));
// initialize fog just before shader compilation
app.compileCallbacks.push(initFog);
// load main scene
app.loadScene(url, function() {
app.enableControls();
app.run();
});
Application main camera controls object.
Current rendering frame of the application.
Application FPS divider. Use setFrameDivider to set this value.
Mixer used to play animations loaded from glTF data.
App preloader element (exists only during scene loading)
Application WebGL renderer.
Array of functions which will be called every time when rendering begins.
Application glTF loader.
Resolution of the cubemap texture representing the world material. Default is 1024.
Material used to generate world environment.
Array of controller objects for the active WebXR session.
Active WebXR session.
Handler for scene updates: rendering, animations and camera controls. Do not change unless you know what you are doing.
Append the scene from the specified glTF file to the current scene. The loadCb
callback will receive the loaded scene as a parameter after the loading is finished.
If there is no active scene in the application, then nothing will be appended.
Such parameters as loadCameras and loadLights are used to specify if
cameras and lights will be appended from the loaded scene. Both parameters
are true by default.
Deprecated. Use dispose or unload instead.
Disable all post-processing effects (except outline when keepOutline=true).
Disable graphics updates in the animation loop after the given amount of frames (specify 0 to disable immediately). The controls and the animation mixer will keep being updated and the render callbacks will keep being called.
Disable supersample anti-aliasing.
Unloads the scene and cleans up the application data.
Enable controls for the main app camera. Depending on the control type specified for the camera this method will give you 'ORBIT', 'FLYING' or static camera.
Enable the given post-processing effects.
Enable graphics updates in the animation loop.
Enable supersample anti-aliasing. The number of samples is calculated as 2^sampleLevel (e.g specify 4 to enable 16x SSAA).
Returns main app camera.
Return calculated container element height.
Return calculated container element width.
Handler for app post-processing initialization. Do not change unless you know what you are doing.
Hide frame rate counter.
Deprecated. Use loadScene
instead.
Load the glTF scene. The loadOkCb callback will receive the loaded scene as
a parameter after the loading is finished.
If there already is an active scene (e.g. loaded before via the load
method), then use unload first to avoid conflicts between the
existed scene and the loaded one.
Load the glTF scene. The loadCb callback will receive the loaded scene as
a parameter after the loading is finished.
If there already is an active scene (e.g. loaded before via the
loadScene method), then use unload first to
avoid conflicts between the existed scene and the loaded one.
Handler for canvas resize event. Do not change unless you know what you are doing.
Estimate and print out rendering performance profile. delta is an optional period of estimation (default 1).
Handler for scene rendering. Do not change unless you know what you are doing.
Starts the application by removing the preloader and starting the rendering cycle.
Lowers the maximum frame by dividing it by a specified integer number. By default the engine tries to render scenes at 60 frames per second. If the divider is set to 2, for example, the FPS will be topped out to 30.
Show frame rate counter.
rootObj -- (optional) an object to unload along with its
children; if no object is given or the given object is the main application
scene then the method performs full scene cleanup.
Unloads either a part or the whole scene depending on the parameters.
Update world environment from the specified material.
For more info on how to obtain the source code of this module see this page.