Build a Simple Avatar

In 3D programming, you can make simple graphics in two ways. We’ll use both in this game—one kind for the Purple Fruit Monster and the other kind for the fruit. The simple graphic technique that we use for the Purple Fruit Monster is called a sprite.

In the addAvatar() function, we create an invisible, physics-enabled box mesh, then we add the sprite to the box mesh. Add this function below the addGround() function.

 function​ addAvatar() {
 var​ shape = ​new​ THREE.CubeGeometry(100, 100, 1);
 var​ cover = ​new​ THREE.MeshBasicMaterial({visible: ​false​});
 var​ avatar = ​new​ Physijs.BoxMesh(shape, cover, 1);
 var​ image = ​new​ THREE.TextureLoader().load(​"/images/monster.png"​);
 var ...

Get 3D Game Programming for Kids, 2nd Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.