Some Hints for Graphics Town
Please check back, because we may add to this list as questions come up.
advance method of
GrObject to animate things. The basics were introduced in Workbook 7. You can put the behavior into a class (like the example does with
SpinCube. Over the later workbooks, you saw the use of tricks like adding methods to the objects after the object is created.
simpleBehaviors.js in the Framework folder has an example. Hidden in Workbook 10 Page 2 Box 3 are more examples (the
spinY function adds a method to an object, but the code to blink an object also adds an
advance method, and takes advantage of the non-lexical
For more complicated behaviors, you will need to keep track of time. The
advance method is given an amount of time (delta) that things advance, but isn’t given the actual resulting time. You may need to keep a variable inside of the object that gets incremented each time.
We do not recommend you use THREE.JS’s animation system – it is complicated to figure out, and will not work well with the Graphics Town framework (it is unclear how to integrate the “play” loops of each action with the animation loop of
The UI code allows objects to be “looked at” (you select an object and the camera is teleported to look at that object by changing the lookfrom and lookat points). Each object has a
lookFromLookAt method. It makes a guess of where to put the camera based on the object’s bounding box, but this is a guess. Object’s can override this method to do a better job.
If you point the camera at a moving object, you point the camera at where the object is at the moment you move the camera. Look at works best with non-moving objects. Use “Follow” to watch where an object goes.
Making Objects Rideable
The user interface allows the camera to be placed so that the user “rides” and object. In order for this to work, the object needs to be defined so that its center is at the origin, and the direction of travel is along the positive Z axis.
In riding mode, the object is not drawn (otherwise, you’d see the inside of the object). This is done by hiding it.
GrObject you set the
rideable variable to be an
Object3D that has the correct motion (the camera will be placed at the origin of this object’s coordinate system, and will face towards its positive z axis).
To make a particle effect, you can either make each one be a separate shape (triangle or cube), or use a
Points object (where each particle is a tiny dot – and then you use a
You are required to use at least one model file. You can find free models all over the web. OBJ is the simplest file format, but it can be problematic. More modern file formats are often more robust.
THREE has loaders for many file formats, however they are not part of the main system. We have included the loader for OBJ files and FBX files with the Graphics Town Repository. We have also provided interfaces to make using these loaders easier within the framework.
If things don’t work as expected, be sure to check the console log for errors. Because the loaders are not part of the “core” of THREE, they often have dependencies that must be loaded separately.
Also, be aware that using a model can be challenging. For one, there are issues that the author may have created the model as a scale or position that isn’t convenient for you. Also, there are lots of broken model files around the web. These include incorrect normals, missing parts, or even files that are not valid data.
Time of Day
The Framework has support for “time of day” as an extra parameter to the
advance method of
GrObject. This is for future expansion. Right now, the parameter is not used, and your objects can ignore it.
The Framework uses THREE’s flying controls. They aren’t great, and they aren’t documented. Drag the mouse to turn (be careful: if you drag outside the canvas it will miss the mouse up event). WASD to move, Q and E to roll.