Now that you have a better idea of how an avatar is built and how to work with an avatar on a ThreeJS Scene, we’re going to practice working with objects that could be placed in the path of our avatar. We will not be making the avatar collide with these objects yet, so focus on understanding how all of these objects are placed throughout the scene.

STEP 1: Program Setup
Open Notepad++ and close down all of your old files.

STEP 2: File Setup
Create a new document with Notepad++ and save it as “objectcollide1.html” in your LG8_gamejs subfolder.

STEP 3: Code Setup
Copy this new source code and paste it into your “objectcollide1.html” document.

STEP 4: Screen Setup
Open up your page with Chrome, then create a split screen between your code and your design.

STEP 5: Warm Up
For now, leave the trees alone, but feel free to change the colors of your avatar or the style of your background (color, gradient, or image). After five minutes, we will get started.

Six Things We Will Do During This Section:

• Practice Adjusting the Width/Height
• Practice Adding Animations and Keyboard Controls
• Expand Our View of the Scene with a Marker
• Explore the Design and Placement of the Trees
• Build an Oddball Tree that’s Out-of-Place
• Fill the Forest

Now that you know how to work with objects on a 3JS Scene, there is one major problem. The avatar can walk right through every object. This section is about learning how to stop the avatar once it hits a certain boundary.

STEP 1: Program Setup
In your Notepad++ program, close down your old files.

STEP 2: File Setup
Create a new document with Notepad++ and save it as “objectcollide2.html” in your LG8_gamejs subfolder.

STEP 3: Code Setup
Copy this new source code and paste it into your “objectcollide2.html” document.

STEP 4: Screen Setup
Open up your page with Chrome, then create a split screen between your code and your design.

Five Things We Will Do During This Section:

• Practice Adjusting the Width/Height
• Create a Boundary that Cannot be Crossed
• Match our Boundary to the Background and make it Invisible
• Adjust our Collisions to include a bounce
• Add additional Oddball trees that have their own collisions