Developer

Appearance

Scene ​

Here you find all available actions for the scene. You can adjust the environment and fetch a list of all nodes in the scene.

scene.environment ​

Set the environment of the scene. This will overwrite the current environment. You can find a list of all available parameters here.

SET scene.environment(options?: Object): Promise<void>
js
api.scene
	.environment({
		backgroundYRotation: Math.PI,
		cameraContrast: 2, // default: 1.6
		cameraExposure: 1, // default: 0.6
		createGround: true, // default: true
		createSkybox: true, // default: true *not working*
		enableGroundMirror: true, // default: true
		enableGroundShadow: false, // default: true *not working*
		environmentTexture: 'https://assets.babylonjs.com/environments/environmentSpecular.env',
		// groundColor: [0.5, 0.5, 0.5], // default: new Color3(0.2, 0.2, 0.3).toLinearSpace(scene.getEngine().useExactSrgbConversions).scale(3)
		groundMirrorAmount: 0.5, // default: 1
		groundMirrorBlurKernel: 64, // default: 64
		groundMirrorFallOffDistance: 0, // default: 0
		groundMirrorFresnelWeight: 1, // default: 1
		groundMirrorSizeRatio: 0.3, // default: 0.3
		groundMirrorTextureType: 0, // default: 0
		groundOpacity: 0.9, // default: 0.9
		groundShadowLevel: 0.5, // default: 0.5
		groundSize: 15, // default: 15
		groundTexture: 'https://assets.babylonjs.com/environments/backgroundGround.png',
		groundYBias: 0.00001, // default: 0.00001
		// rootPosition: [0, 0, 0], // default: Vector3.Zero()
		setupImageProcessing: true, // default: true
		sizeAuto: true, // default: true
		// skyboxColor: [0.5, 0.5, 0.5], // default: new Color3(0.2, 0.2, 0.3).toLinearSpace(scene.getEngine().useExactSrgbConversions).scale(3)
		skyboxSize: 20, // default: 20
		skyboxTexture: 'https://assets.babylonjs.com/environments/backgroundSkybox.dds',
		toneMappingEnabled: true, // default: true
	})

scene.mainColor ​

Set the main color of the scene. This will change the color of the ground and the skybox. See here for more information.

SET scene.mainColor(color?: string | [r: number, g: number, b: number]): Promise<void>
js
api.scene.mainColor('#ff0000')
js
actions: [{ name: 'scene.mainColor', arg: '#ff0000' }]

scene.nodes ​

This will return an array of all nodes in the scene. For each node the name, id and type will be returned.

GET scene.nodes(): Promise<Array>
js
api.scene.nodes().then((result) => console.log(result))
// [
//	{ name: 'nodeAbc', id: 'id123', type: 'Mesh' }
//	{ name: 'nodeDef', id: 'id456', type: 'Mesh' }
//	{ name: 'nodeGhi', id: 'id789', type: 'Light' }
// ]
js
actions: [{ name: 'scene.nodes' }]

scene.animate ​

Create and start animation for a node. You can define an animation by passing an object with the following properties: node, prop, range and frames.

  • The node property defines the name of the node.
  • The prop property defines the property of the node that should be animated.
  • The range property defines the range of the animation.
  • The frames property defines an array of keyframes. Each keyframe is an object with the following properties: frame, value.
  • The frame property defines the frame number of the keyframe.
  • The value property defines the value of the keyframe.

Todo: easingFunction The easingFunction property defines the easing function of the keyframe. You can find a list of all available easing functions here.

After the animation is created, it will be started automatically and the promise will resolve when the animation is finished.

SET scene.animate(animation: Object): Promise<void>
js
api.scene
	.animate({
		node: 'node-name',
		prop: 'rotation.y',
		range: [0, 60],
		frames: [
			{ frame: 0, value: 0 },
			{ frame: 100, value: 1 },
		],
	})
	.then((result) => console.log('Animation finished'))
js
actions: [
	{
		name: 'scene.animate',
		arg: {
			node: 'node-name',
			prop: 'rotation.y',
			range: [0, 60],
			frames: [
				{ frame: 0, value: 0 },
				{ frame: 100, value: 1 },
			],
		},
	},
]