Lighting
xeometry lets you create and animate an unlimited number of custom light sources.
Light sources come in three types:
- "ambient" - ambient light source with color and intensity,
- "point" - positional light source with color, pos, intensity, plus constantAttenuation, linearAttenuation and quadraticAttenuation,
- "dir" - directional light source with color, dir and intensity
The color properties are RGB, with each component having range [0..1]
. The intensity property is a scaling factor in range `[0..1]
, which governs how much each light source contributes to overall illumination. The and pos _and dir_ properties are World-space 3D position and direction, respectively.
The attenuation properties for point lights determine how light intensity decreases in proportion to distance from pos.
The number of light sources is actually limited by your GPU, but you can safely have at least four or five directional or point light sources on the lowest-end WebGL-compatible GPUs.
Examples
Removing all light sources:
viewer.destroyLights();
Creating custom ambient, directional and point lights:
// Create a green ambient light
viewer.createLight("myAmbientLight", {
type: "ambient",
color: [0.6, 1.0, 0.6],
intensity: 0.7
});
// Create a red directional light shining down the -Z axis
viewer.createLight("myDirLight", {
type: "dir",
color: [1.0, 0.5, 0.5],
dir: [0,0,-1],
intensity: 0.7
});
// Create a blue point light
viewer.createLight("myPointLight", {
type: "pos",
color: [0.5, 0.5, 1.0],
pos: [1,1,-1],
intensity: 1.0
});
Getting the IDs of the lights in your viewer:
var lights = viewer.getLights();
// Returns ["myAmbientLight", "myDirLight", "myPointLight"]
Changing the color of the ambient light to yellow, while reducing its intensity:
viewer.setColor("myAmbientLight", [1, 1, 0]);
viewer.setIntensity(0.4);
Changing the direction of the directional light, to make it shine downwards:
viewer.setDir("myDirLight", [0, -1, 0]);
Changing the position of the point light:
viewer.setDir("myPointLight", [-1, -1, 0]);
Note that xeometry will ignore (but log) attempts to set properties that don't exist on the target light source. For example,
if you try to set the direction of an ambient light, like so:
viewer.setDir("myAmbientLight", [1, -1, 1]);
then xeometry will ignore the call and log a warning.
Find out more about light sources in the API docs.