\( \newcommand{\vecIII}[3]{\left[\begin{array}{c} #1\\\\#2\\\\#3 \end{array}\right]} \newcommand{\vecIV}[4]{\left[\begin{array}{c} #1\\\\#2\\\\#3\\\\#4 \end{array}\right]} \newcommand{\Choose}[2]{ { { #1 }\choose{ #2 } } } \newcommand{\vecII}[2]{\left[\begin{array}{c} #1\\\\#2 \end{array}\right]} \newcommand{\vecIII}[3]{\left[\begin{array}{c} #1\\\\#2\\\\#3 \end{array}\right]} \newcommand{\vecIV}[4]{\left[\begin{array}{c} #1\\\\#2\\\\#3\\\\#4 \end{array}\right]} \newcommand{\matIIxII}[4]{\left[ \begin{array}{cc} #1 & #2 \\\\ #3 & #4 \end{array}\right]} \newcommand{\matIIIxIII}[9]{\left[ \begin{array}{ccc} #1 & #2 & #3 \\\\ #4 & #5 & #6 \\\\ #7 & #8 & #9 \end{array}\right]} \)

CS 307 Hwk: Creative Scene

Build an interesting scene or figure using polyhedra, spheres, cylinders, disks, and so forth. Even better, use curves and surfaces, or lathe/extrude geometries. Place several objects or parts in your scene, using the object transformations that we learned in class. Also, use lighting and a variety of materials. Use texture mapping. In short, show your command of the things we have learned so far in the course.

Define an appropriate bounding box for your scene or figure.

I'm not specifying any minimum number of objects or complexity, but I encourage you to have fun with it and make something you are proud of.

It can be

  • indoor or outdoor
  • large or small
  • a single, complicated object or a multi-part scene
  • it can be something you want to develop into your final project, or it can be a throw-away item.

Getting Started

Because each person will be doing something unique and which you might want to share with others, you should put the folder of your code in your ~/public_html/cs307 folder (rather than your "cs307-assignments" folder).

Call the folder creative.

I suggest recursively copying some working code as a starting point, even if you end up deleting all the scene setup. You can copy some existing code of your own (maybe your "simple scene") or one of the CS 307 demos. A demo that was specifically created as such as starting point is the abc demo. It loads the GUI and also a module of code that defines a "figure".

You might start your code like this:

cd ~/public_html/cs307/
cp -r ~cs307/demos/abc/ creative
opendir creative

Of course, you can substitute other folders for the "source" directory of the cp -r command.

Library Contribution

As part of your scene, build a module that other people can use. That is, the code is in a separate file, which the user can import. The module should, as much as is reasonably possible, be flexible and usable in different kinds of programs. For example, it creates a teddy bear, but doesn't do lighting, camera, etc.

Your modules functions can have several arguments, one or none, as you think best. For example:

export function teddyBear(bodyMaterial, eyeMaterial, noseMaterial) {
        ...
}

Or maybe

export function teddyBear(params) {
    const bodyMaterial = params.bodyMaterial;
    const eyeMaterial = params.eyeMaterial;
     const noseMaterial = params.noseMaterial;

    ...
}

Your module can define several objects, of course. The more the merrier. Try to keep the main.js primarily as a demo of these objects you've created.

Your module should be documented so that others can use it. See below.

Implementation Notes

Note that your library may have "helper" functions (a good idea, when warranted). You can make export these or not, as you choose.

Please read the standard instructions for all assignments

Turning it in

When you are done, upload a zip file of your folder to Gradescope.

How You Will Be Graded

I will look for the skills that we have learned, including modeling, material and lighting, texture mapping and curves and surfaces. Your main demo file might have special keyboard callbacks with camera setups.

This will probably be a major component of your project, so think ahead to that.

Contributing Your Module

Once your work is done and graded (possibly with revisions), you will copy it to a library of CS 307 objects. I'll say more about this later, but you should know at the outset that you will be engaging in open-source software.

This rest of this section needs to be updated. You're welcome to read it, but it will be revised.

The goal with your library contribution is to make something that is usable by someone else. That's a pretty high standard. Think about the stuff that was easiest to use in Three.js:

  • There was a working demo, so you could see how to use it and what it looked like.
  • Either the demo or the documentation or both should describe
    • the size or dimensions
    • the arrangement of the axes (for example, PlaneGeometry is in the z=0 plane)
    • the origin (for example, the origin is in the center of the plane)
  • If it uses texture mapping, you will need to supply a texture in your demo. If possible, make the texture URL an argument, so that the user can substitute their own texture.

Documentation

Your JavaScript file should document each of your functions, along with giving the declaration. You should precede the function with a block comment giving all the pertinent information about it.

Some things you should be sure to document are:

  • The frame for the figure or object. That is, it should be clear where the origin is and where the axes are when I want to use a function.
  • The natural size of the figure or object. If I don't scale the coordinate system, how big is it in each of the major dimensions? If the origin is not at one corner of the figure, you may need to document both its negative and positive extent. For example, the origin is at the center of THREE.BoxGeometry(), so we have to not only say that its size is determined by its size argument, but that the cube goes from -size/2 to +size/2.
  • The color(s) of the figure or object. If it has none, like the Three.js geometry objects, that maximizes the flexibility for the user, because they can easily define that before calling your function. If you can, specify the material indexes that various faces have, etc. If it has one or more colors, say what they are or allow the caller to specify them via arguments.

If you have trouble figuring out how to use someone's figure from the documentation, but you'd still like to use it, just read the code.

License

We would like to be able to use your contributions in future offerings of this class. Furthermore, Scott may release TW and his demos into an Open Source package that other people, including professors, will find useful for learning and teaching OpenGL and Three.js. The TW package will be released under the GNU General Public License (GPL).

Towards that end, I'd like you to license your work for use by others.

This is your choice; I won't insist that you share your work with others, nor will you be penalized in any way.

There are many licenses you could choose from. The GPL is the most common, but others are the Mozilla Public License, the Apache Public License, and others. Alternatively, you can place your work in the public domain. There's a good website that helps you choose an open source license.

Please think about this, and if you are willing to contribute your work for the betterment of humankind, place a notice similar to the following at the top of your module file.

A Three.js model of a bicycle. Copyright ((C)) 2025 by YOUR NAME HERE This program is released under the LICENSE INFO HERE.

If you choose the GPL, they have instructions for the GPL at the site linked above. If you do all that, you'll already have done a better job than we have.

If you do not want to make this contribution, please put a copyright notice at the top of your file:

A Three.js model of a bicycle. Copyright ((C)) 2025 by YOUR NAME HERE, all rights reserved.

So, either way, you should have a copyright notice, and then instructions on how your work can be used.