The Wandering Fox

A computer graphics project made with three.js. capture the sense of adventure we had as children and the nostalgia we may have for those times through this animation. I decided to use a mix low-poly graphics, simple color schemes, a relaxing harmonica and bango song, and movement of our carefree fox to best convey those feelings.Please enjoy this short animation of a little fox travelling through a forest by itself.

MODELING THE FOX

I followed hierarchical order for all the sub-components that make up both the fox and the world. The fox Object3D consists with the following hierarchy:

  • head - the joint for the headheadMesh - the top half of the head mesh
    • headBottomMesh - the bottom half of the head mesh
    • leftEyeMesh - the left eye mesh
    • rightEyeMesh - the right eye mesh
    • leftEar - the left ear jointinnerEarMesh - the black inner ear mesh
    • outerEarMesh - the orange outer ear mesh
    • rightEar - the right ear jointinnerEarMesh - the black inner ear mesh
    • outerEarMesh - the orange outer ear mesh
    • snout - the snout jointsnoutTopMesh - the top half of the snout
    • snoutBottomMesh - the bottom half of the snout
    • noseMesh - the nose tip
  • body
    • tail - the joint of the tailtailBody - the Object3D holding both halves of the tail together
    • tailTopMesh - the tip of the tail
    • tailBottomMesh - the bottom of the tail
    • leg (x4) - the joints of each leglegMesh - the leg itself.
       

 

fox
Screen Shot 2020-06-14 at 11.21.33 AM

MODELING THE WORLD

To avoid our world from looking too uniform, I had to add randomness to both the tree's locations and the model itself. 

For the tree model itself, a randomly sized cylinder is split into 25 segments. The leaf types are randomly selected between a dark or a lighter green color. At each vertex

  • There is a 50% of a branch being created if the vertix is between 10 and the tree's height minus 10
  • There is a 30% of a leaf cluster being created if the vertix is between half and 3/5th of the tree's height
  • There is a 50% of a leaf cluster being created if the vertix is over 3/5th of the tree's height.

To generate our tree locations, I used the following formulas to determine positions:

x = Math.sin(theta) * Math.cos(phi)
y = Math.sin(theta) * Math.sin(phi)
z = Math.cos(theta)

Where phi is the determined by the index / total trees * PI / 2 and theta is PI / 2 plus some noise. The noise has 15% chance of being some value between -0.55 and -0.25, putting it in front of the fox's path, and 85% chance of being some value between 0.25 and 0.55, putting it behind the fox's path. This will allow the fox to travel between PI/2-0.25 and PI/2+0.25 without hitting a tree.

circle_front
circle_side

Trees visible from front and side when theta has no noise.
 


If noise is added, the trees follow a curved loop with most of the trees falling behind the Z = 0 line.


circle_with_theta

Trees visible from side view when there is noise

ANIMATION

ANIMATION


ANIMATION

I opted for keeping the camera fixed in order and creating the illusion of movement by rotating the world around the fox in order to focus more on the animations for the fox itself. The world slowly rotates along the z axis at every animation updated.

As mentioned in the Modeling section, the head, tail, and limbs are meshes attached to an empty 3D object acting as a joint. By attaching the mesh to this joint and displacing it accordingly, we can animate that limb by rotating along the joint, rather than by the center of the mesh.

As for the animation of the fox itself, each limb has it's own rotation speed and direction and a min and max rotation. At every call of the function, the current rotatation is updated by the angular rotation speed. If the max/min rotation is reached for a limb, that limb's rotation direction is reversed. All rotations are applied to a joint, which is an empty 3D object containing a mesh. The body rotates along the x axis. The legs and tail rotate along the y axis. The head rotates along the z axis.

 

 


I opted for keeping the camera fixed in order and creating the illusion of movement by rotating the world around the fox in order to focus more on the animations for the fox itself. The world slowly rotates along the z axis at every animation updated.

As mentioned in the Modeling section, the head, tail, and limbs are meshes attached to an empty 3D object acting as a joint. By attaching the mesh to this joint and displacing it accordingly, we can animate that limb by rotating along the joint, rather than by the center of the mesh.

As for the animation of the fox itself, each limb has it's own rotation speed and direction and a min and max rotation. At every call of the function, the current rotatation is updated by the angular rotation speed. If the max/min rotation is reached for a limb, that limb's rotation direction is reversed. All rotations are applied to a joint, which is an empty 3D object containing a mesh. The body rotates along the x axis. The legs and tail rotate along the y axis. The head rotates along the z axis.

 

 


LIGHT OF MY LIFE  /  NEXTSTOP  / THE HOLE /  LOLITA  / THE WANDERING FOX