Home Pictures of 3D objects

Studying this description of the cylinder object provides an overview of important aspects common to all of the GlowScript 3D objects, box, sphere, pyramid, etc. Additional details about how to orient an object using "axis" and "up" are found in the description of the box object.

Here is an example of how to make a cylinder, naming it "rod" for future reference:

rod  = cylinder()
rod.pos  = vec(0,1,2)
rod.axis = vec(1,0,0)
rod.size = vec(5,1,1)

Attributes: The properties pos (position), axis, and size are called "attributes" of the object. The function "vec" creates a vector with (x,y,z) components.


Alternatively, you can specify the initial values of the attributes when creating the cylinder::

rod = cylinder( pos=vec(0,2,1),                 axis=vec(1,0,0),
                size=vec(5,1,1) )

The center of one end of this cylinder (pos) is at x=0, y=2, and z=1. Its axis lies along the x axis, vec(1,0,0), which points to the right (y points up, z points out of the screen toward you). The size or bounding box is 5 in the direction of the axis, so that the other end of the cylinder is at (5,2,1). The lateral size of the cylinder, the diameter, is 1. If you specify the size to be vec(3,1,2), the cylinder will have an elliptical cross section.


Here is the form to use in JavaScript (if you specify "JavaScript" in the header line of your program):

var rod = cylinder( {pos:vec(0,2,1),
   axis:vec(1,0,0), size:vec(5,1,1)} )

Note the required "var" and required braces. Also, True and False are spelled true and false.

Modifying attributes

You can modify the position attribute of the cylinder after it has been created, which has the effect of moving it immediately to the new position:

rod.pos=vec(15,11,9) # change (x,y,z)
rod.pos.x=15 # change the x component

If you create an object such as a cylinder without giving it a name such as rod, you can't refer to it later. This doesn't matter if you never intend to modify the object.

The bounding box: All of the 3D objects (except for arrow) can be thought of as being contained in a box whose size is specified by the size attribute. Changing the size corresponds to stretching or squeezing the box that contains the object. Setting size to vec(3,1,2) means that if the axis is in the x direction, vec(1,0,0), the bounding box will be 3 have a length of 3 in the x direction, a height of 1 in they y direction, and a depth of 2 in the z direction.

If you change the axis (rod.axis) to point in some direction other than in the x direction, you still specify the size attribute as though the axis were pointing to the right. In other words, when specifying the size, imagine that the object is aligned along the x axis even if you specify a different direction by setting the axis attribute. This is true for all the 3D objects (other than arrow).

Specifying the color: Since we didn't specify a color for rod, the cylinder will be the default color, which is white (shown on a black background). After creating the cylinder, you can change its color. The following will change the color to blue:

rod.color = vec(0,0,1) # same as color.blue

This uses the so-called RGB system for specifying colors in terms of fractions of red, green, and blue. (For details on choosing colors, see Specifying Colors.) You can set individual amounts of red, green, and blue, as colors are treated as though they were vectors, with x, y, and z components:

rod.color.x = 0.4
rod.color.y = 0.7
rod.color.z = 0.8

Here is a full list of attributes for a cylinder. All 3D objects have all of these attributes, other than arrow and curve:

pos Position: the center of one end of the cylinder; default = vec(0,0,0).

size The length, width, and height of the cylinder; default = vec(1,1,1).

axis The axis points in the direction of the length of the cylinder, default = vec(1,0,0). Only the direction of the axis is meaningful, not its magnitude. The length of the cylinder is size.x, not the magnitude of the axis. Changing axis may change up, to ensure that axis and up are always perpendicular to each other.

up Which side of the cylinder is "up"; this has only a subtle effect on the 3D appearance of a cylinder unless the cross section is not circular or a texture is applied; default = vec(0,1,0). Changing up may change axis, to ensure that axis and up are always perpendicular to each other.

color Color of object, as a red-green-blue (RGB) triple: vec(1,0,0) is the same as color.red, default = vec(1,1,1), which is color.white.

opacity Opacity of object, default = 1 (fully opaque); 0 is completely transparent.

shininess 0 to 1, default 0.6; governs the amount of specular reflections.

emissive If True, local and distant lights are ignored, and the brightness is governed by the object's own color. An example of its use is to put an emissive sphere at the location of a local_light, which looks like a glowing lamp. The default for emissive is False. (For JavaScript, specify true or false instead of True or False.)

visible If false, object is not displayed; e.g. rod.visible = False
Use rod.visible = True to make the object visible again. (For JavaScript, specify true or false instead of True or False.)

texture You can specify a texture to apply to the object's surface. See the Textures documentation.

End vs center: The pos attribute for arrow, cone, cylinder, helix, and pyramid corresponds to one end of the object, whereas for a box, ring, or sphere it corresponds to the center of the object.

To display a trail or an arrow along the path of a moving object, see Attach a trail or arrow.

See Rotating an Object for an easy way to change the orientation of an object.

When you run a program, for convenience GlowScript creates a canvas on the web page and names it scene. Objects that you create are drawn on this canvas. If you have more than one canvas, you can specify in which canvas to place a new object, as in box(canvas=myscene); in JavaScript this would be box( {canvas:myscene} ). If you don't specify a canvas, the new object goes into the most recently created canvas, or the most recently selected canvas as specified by setting canvas.selected.

Top of page