Gecko [ dp-client.com ]

Name	Size	Permission
align-html-elements-to-3d.html	31.92 KB	-rw-r--r--
backgrounds.html	12.91 KB	-rw-r--r--
billboards.html	14.75 KB	-rw-r--r--
cameras.html	29.83 KB	-rw-r--r--
canvas-textures.html	17.61 KB	-rw-r--r--
cleanup.html	17.12 KB	-rw-r--r--
custom-buffergeometry.html	23.65 KB	-rw-r--r--
debugging-glsl.html	6.83 KB	-rw-r--r--
debugging-javascript.html	28.47 KB	-rw-r--r--
fog.html	14.32 KB	-rw-r--r--
fundamentals.html	27.56 KB	-rw-r--r--
game.html	81.78 KB	-rw-r--r--
indexed-textures.html	28.62 KB	-rw-r--r--
lights.html	28.49 KB	-rw-r--r--
load-gltf.html	32.6 KB	-rw-r--r--
load-obj.html	34.76 KB	-rw-r--r--
material-table.html	1.77 KB	-rw-r--r--
materials.html	18.7 KB	-rw-r--r--
multiple-scenes.html	27.63 KB	-rw-r--r--
offscreencanvas.html	44.53 KB	-rw-r--r--
optimize-lots-of-objects-anima...	21.68 KB	-rw-r--r--
optimize-lots-of-objects.html	25.07 KB	-rw-r--r--
picking.html	20.61 KB	-rw-r--r--
post-processing-3dlut.html	25.43 KB	-rw-r--r--
post-processing.html	17.11 KB	-rw-r--r--
prerequisites.html	20.59 KB	-rw-r--r--
primitives.html	22.01 KB	-rw-r--r--
rendering-on-demand.html	11.92 KB	-rw-r--r--
rendertargets.html	7.85 KB	-rw-r--r--
responsive.html	15.02 KB	-rw-r--r--
scenegraph.html	28.84 KB	-rw-r--r--
setup.html	4.49 KB	-rw-r--r--
shadertoy.html	22.83 KB	-rw-r--r--
shadows.html	28.41 KB	-rw-r--r--
textures.html	31.92 KB	-rw-r--r--
tips.html	16.32 KB	-rw-r--r--
transparency.html	18.74 KB	-rw-r--r--
voxel-geometry.html	43.43 KB	-rw-r--r--
webxr-basics.html	18.92 KB	-rw-r--r--
webxr-look-to-select.html	21.23 KB	-rw-r--r--
webxr-point-to-select.html	17.52 KB	-rw-r--r--

Code Editor : game.html

<!DOCTYPE html><html lang="en"><head>
 <meta charset="utf-8">
 <title>Making a Game</title>
 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:site" content="@threejs">
 <meta name="twitter:title" content="Three.js – Making a Game">
 <meta property="og:image" content="https://threejs.org/files/share.png">
 <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
 <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">

<a href="https://opengameart.org/users/quaternius">quaternius</a> also made <a href="https://opengameart.org/content/lowpoly-animated-farm-animal-pack">these animated animals</a>.
<div class="threejs_center"><img src="../resources/images/animals.jpg" style="width: 606px;"></div>

These seem like good models to start with so the first thing we need to
do is load them.
We covered <a href="load-gltf.html">loading glTF files before</a>. 
The difference this time is we need to load multiple models and
we can't start the game until all the models are loaded.
Fortunately three.js provides the <a href="/docs/#api/en/loaders/managers/LoadingManager"><code class="notranslate" translate="no">LoadingManager</code></a> just for this purpose.
We create a <a href="/docs/#api/en/loaders/managers/LoadingManager"><code class="notranslate" translate="no">LoadingManager</code></a> and pass it to the other loaders. The
<a href="/docs/#api/en/loaders/managers/LoadingManager"><code class="notranslate" translate="no">LoadingManager</code></a> provides both <a href="/docs/#api/en/loaders/managers/LoadingManager#onProgress"><code class="notranslate" translate="no">onProgress</code></a> and 
<a href="/docs/#api/en/loaders/managers/LoadingManager#onLoad"><code class="notranslate" translate="no">onLoad</code></a> properties we can attach callbacks to.
The <a href="/docs/#api/en/loaders/managers/LoadingManager#onLoad"><code class="notranslate" translate="no">onLoad</code></a> callback will be called when
all files have been loaded. The <a href="/docs/#api/en/loaders/managers/LoadingManager#onProgress"><code class="notranslate" translate="no">onProgress</code></a> callback
as called after each individual file arrives to give as a chance to show
loading progress.
Starting with the code from <a href="load-gltf.html">loading a glTF file</a> I removed all
the code related to framing the scene and added this code to load all models.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const manager = new THREE.LoadingManager();
manager.onLoad = init;
const models = {
 pig: { url: 'resources/models/animals/Pig.gltf' },
 cow: { url: 'resources/models/animals/Cow.gltf' },
 llama: { url: 'resources/models/animals/Llama.gltf' },
 pug: { url: 'resources/models/animals/Pug.gltf' },
 sheep: { url: 'resources/models/animals/Sheep.gltf' },
 zebra: { url: 'resources/models/animals/Zebra.gltf' },
 horse: { url: 'resources/models/animals/Horse.gltf' },
 knight: { url: 'resources/models/knight/KnightCharacter.gltf' },
};
{
 const gltfLoader = new GLTFLoader(manager);
 for (const model of Object.values(models)) {
 gltfLoader.load(model.url, (gltf) =&gt; {
 model.gltf = gltf;
 });
 }
}

function init() {
 // TBD
}
</pre>
This code will load all the models above and the <a href="/docs/#api/en/loaders/managers/LoadingManager"><code class="notranslate" translate="no">LoadingManager</code></a> will call
<code class="notranslate" translate="no">init</code> when done. We'll use the <code class="notranslate" translate="no">models</code> object later to let us access the
loaded models so the <a href="/docs/#examples/loaders/GLTFLoader"><code class="notranslate" translate="no">GLTFLoader</code></a> callback for each individual model attaches
the loaded data to that model's info.
All the models with all their animation are currently about 6.6meg. That's a
pretty big download. Assuming your server supports compression (the server this
site runs on does) it's able to compress them to around 1.4meg. That's
definitely better than 6.6meg bit it's still not a tiny amount of data. It would
probably be good if we added a progress bar so the user has some idea how much
longer they have to wait.
So, let's add an <a href="/docs/#api/en/loaders/managers/LoadingManager#onProgress"><code class="notranslate" translate="no">onProgress</code></a> callback. It will be
called with 3 arguments, the <code class="notranslate" translate="no">url</code> of the last loaded object and then the number
of items loaded so far as well as the total number of items.
Let's setup some HTML for a loading bar
<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;body&gt;
 &lt;canvas id="c"&gt;&lt;/canvas&gt;
+ &lt;div id="loading"&gt;
+ &lt;div&gt;
+ &lt;div&gt;...loading...&lt;/div&gt;
+ &lt;div class="progress"&gt;&lt;div id="progressbar"&gt;&lt;/div&gt;&lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
&lt;/body&gt;
</pre>
We'll look up the <code class="notranslate" translate="no">#progressbar</code> div and we can set the width from 0% to 100% 
to show our progress. All we need to do is set that in our callback.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const manager = new THREE.LoadingManager();
manager.onLoad = init;

+const progressbarElem = document.querySelector('#progressbar');
+manager.onProgress = (url, itemsLoaded, itemsTotal) =&gt; {
+ progressbarElem.style.width = `${itemsLoaded / itemsTotal * 100 | 0}%`;
+};
</pre>
We already setup <code class="notranslate" translate="no">init</code> to be called when all the models are loaded so
we can turn off the progress bar by hiding the <code class="notranslate" translate="no">#loading</code> element.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function init() {
+ // hide the loading bar
+ const loadingElem = document.querySelector('#loading');
+ loadingElem.style.display = 'none';
}
</pre>
Here's a bunch of CSS for styling the bar. The CSS makes the <code class="notranslate" translate="no">#loading</code> <code class="notranslate" translate="no">&lt;div&gt;</code>
the full size of the page and centers its children. The CSS makes a <code class="notranslate" translate="no">.progress</code>
area to contain the progress bar. The CSS also gives the progress bar
a CSS animation of diagonal stripes.
<pre class="prettyprint showlinemods notranslate lang-css" translate="no">#loading {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 font-size: xx-large;
 font-family: sans-serif;
}
#loading&gt;div&gt;div {
 padding: 2px;
}
.progress {
 width: 50vw;
 border: 1px solid black;
}
#progressbar {
 width: 0;
 transition: width ease-out .5s;
 height: 1em;
 background-color: #888;
 background-image: linear-gradient(
 -45deg, 
 rgba(255, 255, 255, .5) 25%, 
 transparent 25%, 
 transparent 50%, 
 rgba(255, 255, 255, .5) 50%, 
 rgba(255, 255, 255, .5) 75%, 
 transparent 75%, 
 transparent
 );
 background-size: 50px 50px;
 animation: progressanim 2s linear infinite;
}

@keyframes progressanim {
 0% {
 background-position: 50px 50px;
 }
 100% {
 background-position: 0 0;
 }
}
</pre>
Now that we have a progress bar let's deal with the models. These models
have animations and we want to be able to access those animations.
Animations are stored in an array by default be we'd like to be able to
easily access them by name so let's setup an <code class="notranslate" translate="no">animations</code> property for
each model to do that. Note of course this means animations must have unique names.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+function prepModelsAndAnimations() {
+ Object.values(models).forEach(model =&gt; {
+ const animsByName = {};
+ model.gltf.animations.forEach((clip) =&gt; {
+ animsByName[clip.name] = clip;
+ });
+ model.animations = animsByName;
+ });
+}

function init() {
  // hide the loading bar
  const loadingElem = document.querySelector('#loading');
  loadingElem.style.display = 'none';

+ prepModelsAndAnimations();
}
</pre>
Let's display the animated models.
Unlike the <a href="load-gltf.html">previous example of loading a glTF file</a>
This time we probably want to be able to display more than one instance
of each model. To do this, instead of adding
the loaded gltf scene directly like we did in <a href="load-gltf.html">the article on loading a glTF</a>,
we instead want to clone the scene and in particular we want to clone
it for skinned animated characters. Fortunately there's a utility function,
<code class="notranslate" translate="no">SkeletonUtils.clone</code> we can use to do this. So, first we need to include
the utils.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
+import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
</pre>
Then we can clone the models we just loaded
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function init() {
 // hide the loading bar
 const loadingElem = document.querySelector('#loading');
 loadingElem.style.display = 'none';

prepModelsAndAnimations();

+ Object.values(models).forEach((model, ndx) =&gt; {
+ const clonedScene = SkeletonUtils.clone(model.gltf.scene);
+ const root = new THREE.Object3D();
+ root.add(clonedScene);
+ scene.add(root);
+ root.position.x = (ndx - 3) * 3;
+ });
}
</pre>
Above, for each model, we clone the <code class="notranslate" translate="no">gltf.scene</code> we loaded and we parent that
to a new <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a>. We need to parent it to another object because when
we play animations the animation will apply animated positions to the nodes
in the loaded scene which means we won't have control over those positions.
To play the animations each model we clone needs an <a href="/docs/#api/en/animation/AnimationMixer"><code class="notranslate" translate="no">AnimationMixer</code></a>.
An <a href="/docs/#api/en/animation/AnimationMixer"><code class="notranslate" translate="no">AnimationMixer</code></a> contains 1 or more <a href="/docs/#api/en/animation/AnimationAction"><code class="notranslate" translate="no">AnimationAction</code></a>s. An
<a href="/docs/#api/en/animation/AnimationAction"><code class="notranslate" translate="no">AnimationAction</code></a> references an <a href="/docs/#api/en/animation/AnimationClip"><code class="notranslate" translate="no">AnimationClip</code></a>. <a href="/docs/#api/en/animation/AnimationAction"><code class="notranslate" translate="no">AnimationAction</code></a>s
have all kinds of settings for playing then chaining to another
action or cross fading between actions. Let's just get the first 
<a href="/docs/#api/en/animation/AnimationClip"><code class="notranslate" translate="no">AnimationClip</code></a> and create an action for it. The default is for
an action to play its clip in a loop forever.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const mixers = [];

function init() {
  // hide the loading bar
  const loadingElem = document.querySelector('#loading');
  loadingElem.style.display = 'none';

prepModelsAndAnimations();

Object.values(models).forEach((model, ndx) =&gt; {
    const clonedScene = SkeletonUtils.clone(model.gltf.scene);
    const root = new THREE.Object3D();
    root.add(clonedScene);
    scene.add(root);
    root.position.x = (ndx - 3) * 3;

+ const mixer = new THREE.AnimationMixer(clonedScene);
+ const firstClip = Object.values(model.animations)[0];
+ const action = mixer.clipAction(firstClip);
+ action.play();
+ mixers.push(mixer);
 });
}
</pre>
We called <a href="/docs/#api/en/animation/AnimationAction#play"><code class="notranslate" translate="no">play</code></a> to start the action and stored
off all the <code class="notranslate" translate="no">AnimationMixers</code> in an array called <code class="notranslate" translate="no">mixers</code>. Finally
we need to update each <a href="/docs/#api/en/animation/AnimationMixer"><code class="notranslate" translate="no">AnimationMixer</code></a> in our render loop by computing
the time since the last frame and passing that to <a href="/docs/#api/en/animation/AnimationMixer.update"><code class="notranslate" translate="no">AnimationMixer.update</code></a>.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+let then = 0;
function render(now) {
+ now *= 0.001; // convert to seconds
+ const deltaTime = now - then;
+ then = now;

if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }

+  for (const mixer of mixers) {
+    mixer.update(deltaTime);
+  }

renderer.render(scene, camera);

requestAnimationFrame(render);
}
</pre>
And with that we should get each model loaded and playing its first animation.
<div translate="no" class="threejs_example_container notranslate">
 <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/game-load-models.html"></iframe></div>
 <a class="threejs_center" href="/manual/examples/game-load-models.html" target="_blank">click here to open in a separate window</a>
</div>

Let's make it so we can check all of the animations.
We'll add all of the clips as actions and then enable just one at 
a time.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const mixers = [];
+const mixerInfos = [];

function init() {
  // hide the loading bar
  const loadingElem = document.querySelector('#loading');
  loadingElem.style.display = 'none';

prepModelsAndAnimations();

const mixer = new THREE.AnimationMixer(clonedScene);
-    const firstClip = Object.values(model.animations)[0];
-    const action = mixer.clipAction(firstClip);
-    action.play();
-    mixers.push(mixer);
+    const actions = Object.values(model.animations).map((clip) =&gt; {
+      return mixer.clipAction(clip);
+    });
+    const mixerInfo = {
+      mixer,
+      actions,
+      actionNdx: -1,
+    };
+    mixerInfos.push(mixerInfo);
+    playNextAction(mixerInfo);
  });
}

+function playNextAction(mixerInfo) {
+ const {actions, actionNdx} = mixerInfo;
+ const nextActionNdx = (actionNdx + 1) % actions.length;
+ mixerInfo.actionNdx = nextActionNdx;
+ actions.forEach((action, ndx) =&gt; {
+ const enabled = ndx === nextActionNdx;
+ action.enabled = enabled;
+ if (enabled) {
+ action.play();
+ }
+ });
+}
</pre>
The code above makes an array of <a href="/docs/#api/en/animation/AnimationAction"><code class="notranslate" translate="no">AnimationAction</code></a>s,
one for each <a href="/docs/#api/en/animation/AnimationClip"><code class="notranslate" translate="no">AnimationClip</code></a>. It makes an array of objects, <code class="notranslate" translate="no">mixerInfos</code>,
with references to the <a href="/docs/#api/en/animation/AnimationMixer"><code class="notranslate" translate="no">AnimationMixer</code></a> and all the <a href="/docs/#api/en/animation/AnimationAction"><code class="notranslate" translate="no">AnimationAction</code></a>s 
for each model. It then calls <code class="notranslate" translate="no">playNextAction</code> which sets <code class="notranslate" translate="no">enabled</code> on
all but one action for that mixer.
We need to update the render loop for the new array
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">-for (const mixer of mixers) {
+for (const {mixer} of mixerInfos) {
 mixer.update(deltaTime);
}
</pre>
Let's make it so pressing a key 1 to 8 will play the next animation
for each model
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">window.addEventListener('keydown', (e) =&gt; {
 const mixerInfo = mixerInfos[e.keyCode - 49];
 if (!mixerInfo) {
 return;
 }
 playNextAction(mixerInfo);
});
</pre>
Now you should be able to click on the example and then press keys 1 through 8
to cycle each of the models through their available animations.
<div translate="no" class="threejs_example_container notranslate">
 <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/game-check-animations.html"></iframe></div>
 <a class="threejs_center" href="/manual/examples/game-check-animations.html" target="_blank">click here to open in a separate window</a>
</div>

So that is arguably the sum-total of the three.js portion of this
article. We covered loading multiple files, cloning skinned models,
and playing animations on them. In a real game you'd have to do a
ton more manipulation of <a href="/docs/#api/en/animation/AnimationAction"><code class="notranslate" translate="no">AnimationAction</code></a> objects.
Let's start making a game infrastructure
A common pattern for making a modern game is to use an
<a href="https://www.google.com/search?q=entity+component+system">Entity Component System</a>.
In an Entity Component System an object in a game is called an entity that consists
of a bunch of components. You build up entities by deciding which components to
attach to them. So, let's make an Entity Component System.
We'll call our entities <code class="notranslate" translate="no">GameObject</code>. It's effectively just a collection
of components and a three.js <a href="/docs/#api/en/core/Object3D"><code class="notranslate" translate="no">Object3D</code></a>.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function removeArrayElement(array, element) {
 const ndx = array.indexOf(element);
 if (ndx &gt;= 0) {
 array.splice(ndx, 1);
 }
}

class GameObject {
 constructor(parent, name) {
 this.name = name;
 this.components = [];
 this.transform = new THREE.Object3D();
 parent.add(this.transform);
 }
 addComponent(ComponentType, ...args) {
 const component = new ComponentType(this, ...args);
 this.components.push(component);
 return component;
 }
 removeComponent(component) {
 removeArrayElement(this.components, component);
 }
 getComponent(ComponentType) {
 return this.components.find(c =&gt; c instanceof ComponentType);
 }
 update() {
 for (const component of this.components) {
 component.update();
 }
 }
}
</pre>
Calling <code class="notranslate" translate="no">GameObject.update</code> calls <code class="notranslate" translate="no">update</code> on all the components.
I included a name only to help in debugging so if I look at a <code class="notranslate" translate="no">GameObject</code>
in the debugger I can see a name to help identify it.
Some things that might seem a little strange:
<code class="notranslate" translate="no">GameObject.addComponent</code> is used to create components. Whether or not
this a good idea or a bad idea I'm not sure. My thinking was it makes
no sense for a component to exist outside of a gameobject so I thought
it might be good if creating a component automatically added that component
to the gameobject and passed the gameobject to the component's constructor.
In other words to add a component you do this
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gameObject = new GameObject(scene, 'foo');
gameObject.addComponent(TypeOfComponent);
</pre>
If I didn't do it this way you'd instead do something like this
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gameObject = new GameObject(scene, 'foo');
const component = new TypeOfComponent(gameObject);
gameObject.addComponent(component);
</pre>
Is it better that the first way is shorter and more automated or is it worse
because it looks out of the ordinary? I don't know.
<code class="notranslate" translate="no">GameObject.getComponent</code> looks up components by type. That has
the implication that you can not have 2 components of the same
type on a single game object or at least if you do you can only
look up the first one without adding some other API.
It's common for one component to look up another and when looking them up they
have to match by type otherwise you might get the wrong one. We could instead
give each component a name and you could look them up by name. That would be
more flexible in that you could have more than one component of the same type but it
would also be more tedious. Again, I'm not sure which is better.
On to the components themselves. Here is their base class.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">// Base for all components
class Component {
 constructor(gameObject) {
 this.gameObject = gameObject;
 }
 update() {
 }
}
</pre>
Do components need a base class? JavaScript is not like most strictly 
typed languages so effectively we could have no base class and just 
leave it up to each component to do whatever it wants in its constructor
knowing that the first argument is always the component's gameobject.
If it doesn't care about gameobject it wouldn't store it. I kind of feel like this
common base is good though. It means if you have a reference to a
component you know you can find its parent gameobject always and from its
parent you can easily look up other components as well as look at its
transform.
To manage the gameobjects we probably need some kind of gameobject manager. You
might think we could just keep an array of gameobjects but in a real game the
components of a gameobject might add and remove other gameobjects at runtime.
For example a gun gameobject might add a bullet gameobject every time the gun
fires. A monster gameobject might remove itself if it has been killed. We then
would have an issue that we might have code like this
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">for (const gameObject of globalArrayOfGameObjects) {
 gameObject.update();
}
</pre>
The loop above would fail or do un-expected things if
gameobjects are added or removed from <code class="notranslate" translate="no">globalArrayOfGameObjects</code>
in the middle of the loop in some component's <code class="notranslate" translate="no">update</code> function.
To try to prevent that problem we need something a little safer.
Here's one attempt.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class SafeArray {
 constructor() {
 this.array = [];
 this.addQueue = [];
 this.removeQueue = new Set();
 }
 get isEmpty() {
 return this.addQueue.length + this.array.length &gt; 0;
 }
 add(element) {
 this.addQueue.push(element);
 }
 remove(element) {
 this.removeQueue.add(element);
 }
 forEach(fn) {
 this._addQueued();
 this._removeQueued();
 for (const element of this.array) {
 if (this.removeQueue.has(element)) {
 continue;
 }
 fn(element);
 }
 this._removeQueued();
 }
 _addQueued() {
 if (this.addQueue.length) {
 this.array.splice(this.array.length, 0, ...this.addQueue);
 this.addQueue = [];
 }
 }
 _removeQueued() {
 if (this.removeQueue.size) {
 this.array = this.array.filter(element =&gt; !this.removeQueue.has(element));
 this.removeQueue.clear();
 }
 }
}
</pre>
The class above lets you add or remove elements from the <code class="notranslate" translate="no">SafeArray</code>
but won't mess with the array itself while it's being iterated over. Instead
new elements get added to <code class="notranslate" translate="no">addQueue</code> and removed elements to the <code class="notranslate" translate="no">removeQueue</code>
and then added or removed outside of the loop.
Using that here is our class to manage gameobjects.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class GameObjectManager {
 constructor() {
 this.gameObjects = new SafeArray();
 }
 createGameObject(parent, name) {
 const gameObject = new GameObject(parent, name);
 this.gameObjects.add(gameObject);
 return gameObject;
 }
 removeGameObject(gameObject) {
 this.gameObjects.remove(gameObject);
 }
 update() {
 this.gameObjects.forEach(gameObject =&gt; gameObject.update());
 }
}
</pre>
With all that now let's make our first component. This component
will just manage a skinned three.js object like the ones we just created.
To keep it simple it will just have one method, <code class="notranslate" translate="no">setAnimation</code> that
takes the name of the animation to play and plays it.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class SkinInstance extends Component {
 constructor(gameObject, model) {
 super(gameObject);
 this.model = model;
 this.animRoot = SkeletonUtils.clone(this.model.gltf.scene);
 this.mixer = new THREE.AnimationMixer(this.animRoot);
 gameObject.transform.add(this.animRoot);
 this.actions = {};
 }
 setAnimation(animName) {
 const clip = this.model.animations[animName];
 // turn off all current actions
 for (const action of Object.values(this.actions)) {
 action.enabled = false;
 }
 // get or create existing action for clip
 const action = this.mixer.clipAction(clip);
 action.enabled = true;
 action.reset();
 action.play();
 this.actions[animName] = action;
 }
 update() {
 this.mixer.update(globals.deltaTime);
 }
}
</pre>
You can see it's basically the code we had before that clones the scene we loaded,
then sets up an <a href="/docs/#api/en/animation/AnimationMixer"><code class="notranslate" translate="no">AnimationMixer</code></a>. <code class="notranslate" translate="no">setAnimation</code> adds a <a href="/docs/#api/en/animation/AnimationAction"><code class="notranslate" translate="no">AnimationAction</code></a> for a 
particular <a href="/docs/#api/en/animation/AnimationClip"><code class="notranslate" translate="no">AnimationClip</code></a> if one does not already exist and disables all
existing actions.
The code references <code class="notranslate" translate="no">globals.deltaTime</code>. Let's make a globals object
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const globals = {
 time: 0,
 deltaTime: 0,
};
</pre>
And update it in the render loop
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">let then = 0;
function render(now) {
 // convert to seconds
 globals.time = now * 0.001;
 // make sure delta time isn't too big.
 globals.deltaTime = Math.min(globals.time - then, 1 / 20);
 then = globals.time;
</pre>
The check above for making sure <code class="notranslate" translate="no">deltaTime</code> is not more than 1/20th
of a second is because otherwise we'd get a huge value for <code class="notranslate" translate="no">deltaTime</code>
if we hide the tab. We might hide it for seconds or minutes and then
when our tab was brought to the front <code class="notranslate" translate="no">deltaTime</code> would be huge
and might teleport characters across our game world if we had code like
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">position += velocity * deltaTime;
</pre>
By limiting the maximum <code class="notranslate" translate="no">deltaTime</code> that issue is prevented.
Now let's make a component for the player.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class Player extends Component {
 constructor(gameObject) {
 super(gameObject);
 const model = models.knight;
 this.skinInstance = gameObject.addComponent(SkinInstance, model);
 this.skinInstance.setAnimation('Run');
 }
}
</pre>
The player calls <code class="notranslate" translate="no">setAnimation</code> with <code class="notranslate" translate="no">'Run'</code>. To know which animations
are available I modified our previous example to print out the names of 
the animations
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function prepModelsAndAnimations() {
 Object.values(models).forEach(model =&gt; {
+ console.log('-------&gt;:', model.url);
 const animsByName = {};
 model.gltf.animations.forEach((clip) =&gt; {
 animsByName[clip.name] = clip;
+ console.log(' ', clip.name);
 });
 model.animations = animsByName;
 });
}
</pre>
And running it got this list in <a href="https://developers.google.com/web/tools/chrome-devtools/console/javascript">the JavaScript console</a>.
<pre class="prettyprint showlinemods notranslate notranslate" translate="no"> -------&gt;: resources/models/animals/Pig.gltf
 Idle
 Death
 WalkSlow
 Jump
 Walk
 -------&gt;: resources/models/animals/Cow.gltf
 Walk
 Jump
 WalkSlow
 Death
 Idle
 -------&gt;: resources/models/animals/Llama.gltf
 Jump
 Idle
 Walk
 Death
 WalkSlow
 -------&gt;: resources/models/animals/Pug.gltf
 Jump
 Walk
 Idle
 WalkSlow
 Death
 -------&gt;: resources/models/animals/Sheep.gltf
 WalkSlow
 Death
 Jump
 Walk
 Idle
 -------&gt;: resources/models/animals/Zebra.gltf
 Jump
 Walk
 Death
 WalkSlow
 Idle
 -------&gt;: resources/models/animals/Horse.gltf
 Jump
 WalkSlow
 Death
 Walk
 Idle
 -------&gt;: resources/models/knight/KnightCharacter.gltf
 Run_swordRight
 Run
 Idle_swordLeft
 Roll_sword
 Idle
 Run_swordAttack
</pre>Fortunately the names of the animations for all the animals match
which will come in handy later. For now we only care the that the 
player has an animation called <code class="notranslate" translate="no">Run</code>.
Let's use these components. Here's the updated init function.
All it does is create a <code class="notranslate" translate="no">GameObject</code> and add a <code class="notranslate" translate="no">Player</code> component to it.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const globals = {
 time: 0,
 deltaTime: 0,
};
+const gameObjectManager = new GameObjectManager();

function init() {
  // hide the loading bar
  const loadingElem = document.querySelector('#loading');
  loadingElem.style.display = 'none';

prepModelsAndAnimations();

+ {
+ const gameObject = gameObjectManager.createGameObject(scene, 'player');
+ gameObject.addComponent(Player);
+ }
}
</pre>
And we need to call <code class="notranslate" translate="no">gameObjectManager.update</code> in our render loop
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">let then = 0;
function render(now) {
 // convert to seconds
 globals.time = now * 0.001;
 // make sure delta time isn't too big.
 globals.deltaTime = Math.min(globals.time - then, 1 / 20);
 then = globals.time;

if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }

-  for (const {mixer} of mixerInfos) {
-    mixer.update(deltaTime);
-  }
+  gameObjectManager.update();

renderer.render(scene, camera);

requestAnimationFrame(render);
}
</pre>
and if we run that we get a single player.
<div translate="no" class="threejs_example_container notranslate">
 <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/game-just-player.html"></iframe></div>
 <a class="threejs_center" href="/manual/examples/game-just-player.html" target="_blank">click here to open in a separate window</a>
</div>

That was a lot of code just for an entity component system but
it's infrastructure that most games need.
Let's add an input system. Rather than read keys directly we'll
make a class that other parts of the code can check <code class="notranslate" translate="no">left</code> or <code class="notranslate" translate="no">right</code>.
That way we can assign multiple ways to input <code class="notranslate" translate="no">left</code> or <code class="notranslate" translate="no">right</code> etc..
We'll start with just keys
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">// Keeps the state of keys/buttons
//
// You can check
//
// inputManager.keys.left.down
//
// to see if the left key is currently held down
// and you can check
//
// inputManager.keys.left.justPressed
//
// To see if the left key was pressed this frame
//
// Keys are 'left', 'right', 'a', 'b', 'up', 'down'
class InputManager {
 constructor() {
 this.keys = {};
 const keyMap = new Map();

const setKey = (keyName, pressed) =&gt; {
      const keyState = this.keys[keyName];
      keyState.justPressed = pressed &amp;&amp; !keyState.down;
      keyState.down = pressed;
    };

const addKey = (keyCode, name) =&gt; {
      this.keys[name] = { down: false, justPressed: false };
      keyMap.set(keyCode, name);
    };

const setKeyFromKeyCode = (keyCode, pressed) =&gt; {
      const keyName = keyMap.get(keyCode);
      if (!keyName) {
        return;
      }
      setKey(keyName, pressed);
    };

addKey(37, 'left');
    addKey(39, 'right');
    addKey(38, 'up');
    addKey(40, 'down');
    addKey(90, 'a');
    addKey(88, 'b');

...

gameObjectManager.update();
+  inputManager.update();

...
}
</pre>
It needs to be called after <code class="notranslate" translate="no">gameObjectManager.update</code> otherwise
<code class="notranslate" translate="no">justPressed</code> would never be true inside a component's <code class="notranslate" translate="no">update</code> function.
Let's use it in the <code class="notranslate" translate="no">Player</code> component
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const kForward = new THREE.Vector3(0, 0, 1);
const globals = {
 time: 0,
 deltaTime: 0,
+ moveSpeed: 16,
};

class Player extends Component {
 constructor(gameObject) {
 super(gameObject);
 const model = models.knight;
 this.skinInstance = gameObject.addComponent(SkinInstance, model);
 this.skinInstance.setAnimation('Run');
+ this.turnSpeed = globals.moveSpeed / 4;
 }
+ update() {
+ const {deltaTime, moveSpeed} = globals;
+ const {transform} = this.gameObject;
+ const delta = (inputManager.keys.left.down ? 1 : 0) +
+ (inputManager.keys.right.down ? -1 : 0);
+ transform.rotation.y += this.turnSpeed * delta * deltaTime;
+ transform.translateOnAxis(kForward, moveSpeed * deltaTime);
+ }
}
</pre>
The code above uses <a href="/docs/#api/en/core/Object3D.transformOnAxis"><code class="notranslate" translate="no">Object3D.transformOnAxis</code></a> to move the player
forward. <a href="/docs/#api/en/core/Object3D.transformOnAxis"><code class="notranslate" translate="no">Object3D.transformOnAxis</code></a> works in local space so it only
works if the object in question is at the root of the scene, not if it's
parented to something else <a class="footnote" href="#parented" id="parented-backref">1</a>
We also added a global <code class="notranslate" translate="no">moveSpeed</code> and based a <code class="notranslate" translate="no">turnSpeed</code> on the move speed.
The turn speed is based on the move speed to try to make sure a character
can turn sharply enough to meet its target. If <code class="notranslate" translate="no">turnSpeed</code> so too small
a character will turn around and around circling its target but never
hitting it. I didn't bother to do the math to calculate the required
turn speed for a given move speed. I just guessed.
The code so far would work but if the player runs off the screen there's no
way to find out where they are. Let's make it so if they are offscreen
for more than a certain time they get teleported back to the origin.
We can do that by using the three.js <a href="/docs/#api/en/math/Frustum"><code class="notranslate" translate="no">Frustum</code></a> class to check if a point
is inside the camera's view frustum.
We need to build a frustum from the camera. We could do this in the Player
component but other objects might want to use this too so let's add another
gameobject with a component to manage a frustum.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class CameraInfo extends Component {
 constructor(gameObject) {
 super(gameObject);
 this.projScreenMatrix = new THREE.Matrix4();
 this.frustum = new THREE.Frustum();
 }
 update() {
 const {camera} = globals;
 this.projScreenMatrix.multiplyMatrices(
 camera.projectionMatrix,
 camera.matrixWorldInverse);
 this.frustum.setFromProjectionMatrix(this.projScreenMatrix);
 }
}
</pre>
Then let's setup another gameobject at init time.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function init() {
 // hide the loading bar
 const loadingElem = document.querySelector('#loading');
 loadingElem.style.display = 'none';

prepModelsAndAnimations();

+  {
+    const gameObject = gameObjectManager.createGameObject(camera, 'camera');
+    globals.cameraInfo = gameObject.addComponent(CameraInfo);
+  }

{
 const gameObject = gameObjectManager.createGameObject(scene, 'player');
 gameObject.addComponent(Player);
 }
}
</pre>
and now we can use it in the <code class="notranslate" translate="no">Player</code> component.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class Player extends Component {
 constructor(gameObject) {
 super(gameObject);
 const model = models.knight;
 this.skinInstance = gameObject.addComponent(SkinInstance, model);
 this.skinInstance.setAnimation('Run');
 this.turnSpeed = globals.moveSpeed / 4;
+ this.offscreenTimer = 0;
+ this.maxTimeOffScreen = 3;
 }
 update() {
- const {deltaTime, moveSpeed} = globals;
+ const {deltaTime, moveSpeed, cameraInfo} = globals;
 const {transform} = this.gameObject;
 const delta = (inputManager.keys.left.down ? 1 : 0) +
 (inputManager.keys.right.down ? -1 : 0);
 transform.rotation.y += this.turnSpeed * delta * deltaTime;
 transform.translateOnAxis(kForward, moveSpeed * deltaTime);

+ const {frustum} = cameraInfo;
+ if (frustum.containsPoint(transform.position)) {
+ this.offscreenTimer = 0;
+ } else {
+ this.offscreenTimer += deltaTime;
+ if (this.offscreenTimer &gt;= this.maxTimeOffScreen) {
+ transform.position.set(0, 0, 0);
+ }
+ }
 }
}
</pre>
One more thing before we try it out, let's add touchscreen support
for mobile. First let's add some HTML to touch
<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;body&gt;
 &lt;canvas id="c"&gt;&lt;/canvas&gt;
+ &lt;div id="ui"&gt;
+ &lt;div id="left"&gt;&lt;img src="../resources/images/left.svg"&gt;&lt;/div&gt;
+ &lt;div style="flex: 0 0 40px;"&gt;&lt;/div&gt;
+ &lt;div id="right"&gt;&lt;img src="../resources/images/right.svg"&gt;&lt;/div&gt;
+ &lt;/div&gt;
 &lt;div id="loading"&gt;
 &lt;div&gt;
 &lt;div&gt;...loading...&lt;/div&gt;
 &lt;div class="progress"&gt;&lt;div id="progressbar"&gt;&lt;/div&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/body&gt;
</pre>
and some CSS to style it
<pre class="prettyprint showlinemods notranslate lang-css" translate="no">#ui {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 display: flex;
 justify-items: center;
 align-content: stretch;
}
#ui&gt;div {
 display: flex;
 align-items: flex-end;
 flex: 1 1 auto;
}
.bright {
 filter: brightness(2);
}
#left {
 justify-content: flex-end;
}
#right {
 justify-content: flex-start;
}
#ui img {
 padding: 10px;
 width: 80px;
 height: 80px;
 display: block;
}
</pre>
The idea here is there is one div, <code class="notranslate" translate="no">#ui</code>, that 
covers the entire page. Inside will be 2 divs, <code class="notranslate" translate="no">#left</code> and <code class="notranslate" translate="no">#right</code>
both of which are almost half the page wide and the entire screen tall.
In between there is a 40px separator. If the user slides their finger
over the left or right side then we need up update <code class="notranslate" translate="no">keys.left</code> and <code class="notranslate" translate="no">keys.right</code>
in the <code class="notranslate" translate="no">InputManager</code>. This makes the entire screen sensitive to being touched
which seemed better than just small arrows.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class InputManager {
 constructor() {
 this.keys = {};
 const keyMap = new Map();

const setKey = (keyName, pressed) =&gt; {
      const keyState = this.keys[keyName];
      keyState.justPressed = pressed &amp;&amp; !keyState.down;
      keyState.down = pressed;
    };

const addKey = (keyCode, name) =&gt; {
      this.keys[name] = { down: false, justPressed: false };
      keyMap.set(keyCode, name);
    };

const setKeyFromKeyCode = (keyCode, pressed) =&gt; {
      const keyName = keyMap.get(keyCode);
      if (!keyName) {
        return;
      }
      setKey(keyName, pressed);
    };

addKey(37, 'left');
    addKey(39, 'right');
    addKey(38, 'up');
    addKey(40, 'down');
    addKey(90, 'a');
    addKey(88, 'b');

window.addEventListener('keydown', (e) =&gt; {
      setKeyFromKeyCode(e.keyCode, true);
    });
    window.addEventListener('keyup', (e) =&gt; {
      setKeyFromKeyCode(e.keyCode, false);
    });

+ const sides = [
+ { elem: document.querySelector('#left'), key: 'left' },
+ { elem: document.querySelector('#right'), key: 'right' },
+ ];
+
+ const clearKeys = () =&gt; {
+ for (const {key} of sides) {
+ setKey(key, false);
+ }
+ };
+
+ const handleMouseMove = (e) =&gt; {
+ e.preventDefault();
+ // this is needed because we call preventDefault();
+ // we also gave the canvas a tabindex so it can
+ // become the focus
+ canvas.focus();
+ window.addEventListener('pointermove', handleMouseMove);
+ window.addEventListener('pointerup', handleMouseUp);
+
+ for (const {elem, key} of sides) {
+ let pressed = false;
+ const rect = elem.getBoundingClientRect();
+ const x = e.clientX;
+ const y = e.clientY;
+ const inRect = x &gt;= rect.left &amp;&amp; x &lt; rect.right &amp;&amp;
+ y &gt;= rect.top &amp;&amp; y &lt; rect.bottom;
+ if (inRect) {
+ pressed = true;
+ }
+ setKey(key, pressed);
+ }
+ };
+
+ function handleMouseUp() {
+ clearKeys();
+ window.removeEventListener('pointermove', handleMouseMove, {passive: false});
+ window.removeEventListener('pointerup', handleMouseUp);
+ }
+
+ const uiElem = document.querySelector('#ui');
+ uiElem.addEventListener('pointerdown', handleMouseMove, {passive: false});
+
+ uiElem.addEventListener('touchstart', (e) =&gt; {
+ // prevent scrolling
+ e.preventDefault();
+ }, {passive: false});
 }
 update() {
 for (const keyState of Object.values(this.keys)) {
 if (keyState.justPressed) {
 keyState.justPressed = false;
 }
 }
 }
}
</pre>
And now we should be able to control the character with the left and right
cursor keys or with our fingers on a touchscreen
<div translate="no" class="threejs_example_container notranslate">
 <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/game-player-input.html"></iframe></div>
 <a class="threejs_center" href="/manual/examples/game-player-input.html" target="_blank">click here to open in a separate window</a>
</div>

Ideally we'd do something else if the player went off the screen like move
the camera or maybe offscreen = death but this article is already going to be
too long so for now teleporting to the middle was the simplest thing.
Lets add some animals. We can start it off similar to the <code class="notranslate" translate="no">Player</code> by making
an <code class="notranslate" translate="no">Animal</code> component.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class Animal extends Component {
 constructor(gameObject, model) {
 super(gameObject);
 const skinInstance = gameObject.addComponent(SkinInstance, model);
 skinInstance.mixer.timeScale = globals.moveSpeed / 4;
 skinInstance.setAnimation('Idle');
 }
}
</pre>
The code above sets the <a href="/docs/#api/en/animation/AnimationMixer.timeScale"><code class="notranslate" translate="no">AnimationMixer.timeScale</code></a> to set the playback
speed of the animations relative to the move speed. This way if we
adjust the move speed the animation will speed up or slow down as well.
To start we could setup one of each type of animal
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function init() {
 // hide the loading bar
 const loadingElem = document.querySelector('#loading');
 loadingElem.style.display = 'none';

prepModelsAndAnimations();
  {
    const gameObject = gameObjectManager.createGameObject(camera, 'camera');
    globals.cameraInfo = gameObject.addComponent(CameraInfo);
  }

{
    const gameObject = gameObjectManager.createGameObject(scene, 'player');
    globals.player = gameObject.addComponent(Player);
    globals.congaLine = [gameObject];
  }

+ const animalModelNames = [
+ 'pig',
+ 'cow',
+ 'llama',
+ 'pug',
+ 'sheep',
+ 'zebra',
+ 'horse',
+ ];
+ animalModelNames.forEach((name, ndx) =&gt; {
+ const gameObject = gameObjectManager.createGameObject(scene, name);
+ gameObject.addComponent(Animal, models[name]);
+ gameObject.transform.position.x = (ndx + 1) * 5;
+ });
}
</pre>
And that would get us animals standing on the screen but we want them to do
something.
Let's make them follow the player in a conga line but only if the player gets near enough.
To do this we need several states.
<ul>
<li>Idle:
Animal is waiting for player to get close
</li>
<li>Wait for End of Line:
Animal was tagged by player but now needs to wait for the animal
at the end of the line to come by so they can join the end of the line.
</li>
<li>Go to Last:
Animal needs to walk to where the animal they are following was, at the same time recording
a history of where the animal they are following is currently.
</li>
<li>Follow
Animal needs to keep recording a history of where the animal they are following is while
moving to where the animal they are following was before.
</li>
</ul>
There are many ways to handle different states like this. A common one is to use
a <a href="https://www.google.com/search?q=finite+state+machine">Finite State Machine</a> and
to build some class to help us manage the state.
So, let's do that.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class FiniteStateMachine {
 constructor(states, initialState) {
 this.states = states;
 this.transition(initialState);
 }
 get state() {
 return this.currentState;
 }
 transition(state) {
 const oldState = this.states[this.currentState];
 if (oldState &amp;&amp; oldState.exit) {
 oldState.exit.call(this);
 }
 this.currentState = state;
 const newState = this.states[state];
 if (newState.enter) {
 newState.enter.call(this);
 }
 }
 update() {
 const state = this.states[this.currentState];
 if (state.update) {
 state.update.call(this);
 }
 }
}
</pre>
Here's a simple class. We pass it an object with a bunch of states.
Each state as 3 optional functions, <code class="notranslate" translate="no">enter</code>, <code class="notranslate" translate="no">update</code>, and <code class="notranslate" translate="no">exit</code>.
To switch states we call <code class="notranslate" translate="no">FiniteStateMachine.transition</code> and pass it
the name of the new state. If the current state has an <code class="notranslate" translate="no">exit</code> function
it's called. Then if the new state has an <code class="notranslate" translate="no">enter</code> function it's called.
Finally each frame <code class="notranslate" translate="no">FiniteStateMachine.update</code> calls the <code class="notranslate" translate="no">update</code> function
of the current state.
Let's use it to manage the states of the animals.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">// Returns true of obj1 and obj2 are close
function isClose(obj1, obj1Radius, obj2, obj2Radius) {
 const minDist = obj1Radius + obj2Radius;
 const dist = obj1.position.distanceTo(obj2.position);
 return dist &lt; minDist;
}

// keeps v between -min and +min
function minMagnitude(v, min) {
  return Math.abs(v) &gt; min
      ? min * Math.sign(v)
      : v;
}

const aimTowardAndGetDistance = function() {
  const delta = new THREE.Vector3();

return function aimTowardAndGetDistance(source, targetPos, maxTurn) {
    delta.subVectors(targetPos, source.position);
    // compute the direction we want to be facing
    const targetRot = Math.atan2(delta.x, delta.z) + Math.PI * 1.5;
    // rotate in the shortest direction
    const deltaRot = (targetRot - source.rotation.y + Math.PI * 1.5) % (Math.PI * 2) - Math.PI;
    // make sure we don't turn faster than maxTurn
    const deltaRotation = minMagnitude(deltaRot, maxTurn);
    // keep rotation between 0 and Math.PI * 2
    source.rotation.y = THREE.MathUtils.euclideanModulo(
        source.rotation.y + deltaRotation, Math.PI * 2);
    // return the distance to the target
    return delta.length();
  };
}();

class Animal extends Component {
 constructor(gameObject, model) {
 super(gameObject);
+ const hitRadius = model.size / 2;
 const skinInstance = gameObject.addComponent(SkinInstance, model);
 skinInstance.mixer.timeScale = globals.moveSpeed / 4;
+ const transform = gameObject.transform;
+ const playerTransform = globals.player.gameObject.transform;
+ const maxTurnSpeed = Math.PI * (globals.moveSpeed / 4);
+ const targetHistory = [];
+ let targetNdx = 0;
+
+ function addHistory() {
+ const targetGO = globals.congaLine[targetNdx];
+ const newTargetPos = new THREE.Vector3();
+ newTargetPos.copy(targetGO.transform.position);
+ targetHistory.push(newTargetPos);
+ }
+
+ this.fsm = new FiniteStateMachine({
+ idle: {
+ enter: () =&gt; {
+ skinInstance.setAnimation('Idle');
+ },
+ update: () =&gt; {
+ // check if player is near
+ if (isClose(transform, hitRadius, playerTransform, globals.playerRadius)) {
+ this.fsm.transition('waitForEnd');
+ }
+ },
+ },
+ waitForEnd: {
+ enter: () =&gt; {
+ skinInstance.setAnimation('Jump');
+ },
+ update: () =&gt; {
+ // get the gameObject at the end of the conga line
+ const lastGO = globals.congaLine[globals.congaLine.length - 1];
+ const deltaTurnSpeed = maxTurnSpeed * globals.deltaTime;
+ const targetPos = lastGO.transform.position;
+ aimTowardAndGetDistance(transform, targetPos, deltaTurnSpeed);
+ // check if last thing in conga line is near
+ if (isClose(transform, hitRadius, lastGO.transform, globals.playerRadius)) {
+ this.fsm.transition('goToLast');
+ }
+ },
+ },
+ goToLast: {
+ enter: () =&gt; {
+ // remember who we're following
+ targetNdx = globals.congaLine.length - 1;
+ // add ourselves to the conga line
+ globals.congaLine.push(gameObject);
+ skinInstance.setAnimation('Walk');
+ },
+ update: () =&gt; {
+ addHistory();
+ // walk to the oldest point in the history
+ const targetPos = targetHistory[0];
+ const maxVelocity = globals.moveSpeed * globals.deltaTime;
+ const deltaTurnSpeed = maxTurnSpeed * globals.deltaTime;
+ const distance = aimTowardAndGetDistance(transform, targetPos, deltaTurnSpeed);
+ const velocity = distance;
+ transform.translateOnAxis(kForward, Math.min(velocity, maxVelocity));
+ if (distance &lt;= maxVelocity) {
+ this.fsm.transition('follow');
+ }
+ },
+ },
+ follow: {
+ update: () =&gt; {
+ addHistory();
+ // remove the oldest history and just put ourselves there.
+ const targetPos = targetHistory.shift();
+ transform.position.copy(targetPos);
+ const deltaTurnSpeed = maxTurnSpeed * globals.deltaTime;
+ aimTowardAndGetDistance(transform, targetHistory[0], deltaTurnSpeed);
+ },
+ },
+ }, 'idle');
+ }
+ update() {
+ this.fsm.update();
+ }
}
</pre>
That was big chunk of code but it does what was described above.
Hopefully of you walk through each state it will be clear.
A few things we need to add. We need the player to add itself
to the globals so the animals can find it and we need to start the
conga line with the player's <code class="notranslate" translate="no">GameObject</code>.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function init() {

...

{
    const gameObject = gameObjectManager.createGameObject(scene, 'player');
+    globals.player = gameObject.addComponent(Player);
+    globals.congaLine = [gameObject];
  }

}
</pre>
We also need to compute a size for each model
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function prepModelsAndAnimations() {
+ const box = new THREE.Box3();
+ const size = new THREE.Vector3();
 Object.values(models).forEach(model =&gt; {
+ box.setFromObject(model.gltf.scene);
+ box.getSize(size);
+ model.size = size.length();
 const animsByName = {};
 model.gltf.animations.forEach((clip) =&gt; {
 animsByName[clip.name] = clip;
 // Should really fix this in .blend file
 if (clip.name === 'Walk') {
 clip.duration /= 2;
 }
 });
 model.animations = animsByName;
 });
}
</pre>
And we need the player to record their size
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class Player extends Component {
 constructor(gameObject) {
 super(gameObject);
 const model = models.knight;
+ globals.playerRadius = model.size / 2;
</pre>
Thinking about it now it would probably have been smarter
for the animals to just target the head of the conga line
instead of the player specifically. Maybe I'll come back
and change that later.
When I first started this I used just one radius for all animals
but of course that was no good as the pug is much smaller than the horse.
So I added the difference sizes but I wanted to be able to visualize
things. To do that I made a <code class="notranslate" translate="no">StatusDisplayHelper</code> component.
I uses a <a href="/docs/#api/en/helpers/PolarGridHelper"><code class="notranslate" translate="no">PolarGridHelper</code></a> to draw a circle around each character
and it uses html elements to let each character show some status using
the techniques covered in <a href="align-html-elements-to-3d.html">the article on aligning html elements to 3D</a>.
First we need to add some HTML to host these elements
<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;body&gt;
 &lt;canvas id="c"&gt;&lt;/canvas&gt;
 &lt;div id="ui"&gt;
 &lt;div id="left"&gt;&lt;img src="../resources/images/left.svg"&gt;&lt;/div&gt;
 &lt;div style="flex: 0 0 40px;"&gt;&lt;/div&gt;
 &lt;div id="right"&gt;&lt;img src="../resources/images/right.svg"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;div id="loading"&gt;
 &lt;div&gt;
 &lt;div&gt;...loading...&lt;/div&gt;
 &lt;div class="progress"&gt;&lt;div id="progressbar"&gt;&lt;/div&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
+ &lt;div id="labels"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>
And add some CSS for them
<pre class="prettyprint showlinemods notranslate lang-css" translate="no">#labels {
 position: absolute; /* let us position ourself inside the container */
 left: 0; /* make our position the top left of the container */
 top: 0;
 color: white;
 width: 100%;
 height: 100%;
 overflow: hidden;
 pointer-events: none;
}
#labels&gt;div {
 position: absolute; /* let us position them inside the container */
 left: 0; /* make their default position the top left of the container */
 top: 0;
 font-size: large;
 font-family: monospace;
 user-select: none; /* don't let the text get selected */
 text-shadow: /* create a black outline */
 -1px -1px 0 #000,
 0 -1px 0 #000,
 1px -1px 0 #000,
 1px 0 0 #000,
 1px 1px 0 #000,
 0 1px 0 #000,
 -1px 1px 0 #000,
 -1px 0 0 #000;
}
</pre>
Then here's the component
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const labelContainerElem = document.querySelector('#labels');

class StateDisplayHelper extends Component {
  constructor(gameObject, size) {
    super(gameObject);
    this.elem = document.createElement('div');
    labelContainerElem.appendChild(this.elem);
    this.pos = new THREE.Vector3();

this.helper = new THREE.PolarGridHelper(size / 2, 1, 1, 16);
    gameObject.transform.add(this.helper);
  }
  setState(s) {
    this.elem.textContent = s;
  }
  setColor(cssColor) {
    this.elem.style.color = cssColor;
    this.helper.material.color.set(cssColor);
  }
  update() {
    const {pos} = this;
    const {transform} = this.gameObject;
    const {canvas} = globals;
    pos.copy(transform.position);

// get the normalized screen coordinate of that position
    // x and y will be in the -1 to +1 range with x = -1 being
    // on the left and y = -1 being on the bottom
    pos.project(globals.camera);

// convert the normalized position to CSS coordinates
    const x = (pos.x *  .5 + .5) * canvas.clientWidth;
    const y = (pos.y * -.5 + .5) * canvas.clientHeight;

// move the elem to that position
 this.elem.style.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
 }
}
</pre>
And we can then add them to the animals like this
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class Animal extends Component {
 constructor(gameObject, model) {
 super(gameObject);
+ this.helper = gameObject.addComponent(StateDisplayHelper, model.size);

...

}
 update() {
 this.fsm.update();
+ const dir = THREE.MathUtils.radToDeg(this.gameObject.transform.rotation.y);
+ this.helper.setState(`${this.fsm.state}:${dir.toFixed(0)}`);
 }
}
</pre>
While we're at it lets make it so we can turn them on/off using lil-gui like
we've used else where
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
+import {GUI} from 'three/addons/libs/lil-gui.module.min.js';
</pre>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">+const gui = new GUI();
+gui.add(globals, 'debug').onChange(showHideDebugInfo);
+showHideDebugInfo();

const labelContainerElem = document.querySelector('#labels');
+function showHideDebugInfo() {
+  labelContainerElem.style.display = globals.debug ? '' : 'none';
+}
+showHideDebugInfo();

class StateDisplayHelper extends Component {

...

update() {
+    this.helper.visible = globals.debug;
+    if (!globals.debug) {
+      return;
+    }

...
 }
}
</pre>
And with that we get the kind of start of a game
<div translate="no" class="threejs_example_container notranslate">
 <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/game-conga-line.html"></iframe></div>
 <a class="threejs_center" href="/manual/examples/game-conga-line.html" target="_blank">click here to open in a separate window</a>
</div>

Originally I set out to make a <a href="https://www.google.com/search?q=snake+game">snake game</a>
where as you add animals to your line it gets harder because you need to avoid
crashing into them. I'd also have put some obstacles in the scene and maybe a fence or some
barrier around the perimeter.
Unfortunately the animals are long and thin. From above here's the zebra.
<div class="threejs_center"><img src="../resources/images/zebra.png" style="width: 113px;"></div>

The code so far is using circle collisions which means if we had obstacles like a fence
then this would be considered a collision
<div class="threejs_center"><img src="../resources/images/zebra-collisions.svg" style="width: 400px;"></div>

That's no good. Even animal to animal we'd have the same issue
I thought about writing a 2D rectangle to rectangle collision system but I
quickly realized it could really be a lot of code. Checking that 2 arbitrarily
oriented boxes overlap is not too much code and for our game with just a few
objects it might work but looking into it after a few objects you quickly start
needing to optimize the collision checking. First you might go through all
objects that can possibly collide with each other and check their bounding
spheres or bounding circles or their axially aligned bounding boxes. Once you
know which objects might be colliding then you need to do more work to check if
they are actually colliding. Often even checking the bounding spheres is too
much work and you need some kind of better spacial structure for the objects so
you can more quickly only check objects possibly near each other.
Then, once you write the code to check if 2 objects collide you generally want
to make a collision system rather than manually asking "do I collide with these
objects". A collision system emits events or calls callbacks in relation to
things colliding. The advantage is it can check all the collisions at once so no
objects get checked more than once where as if you manually call some "am I
colliding" function often objects will be checked more than once wasting time.
Making that collision system would probably not be more than 100-300 lines of
code for just checking arbitrarily oriented rectangles but it's still a ton more
code so it seemed best to leave it out.
Another solution would have been to try to find other characters that are
mostly circular from the top. Other humanoid characters for example instead
of animals in which case the circle checking might work animal to animal. 
It would not work animal to fence, well we'd have to add circle to rectangle
checking. I thought about making the fence a fence of bushes or poles, something
circular but then I'd need probably 120 to 200 of them to surround the play area
which would run into the optimization issues mentioned above.
These are reasons many games use an existing solution. Often these solutions
are part of a physics library. The physical library needs to know if objects
collide with each other so on top of providing physics they can also be used
to detect collision.
If you're looking for a solution some of the three.js examples use
<a href="https://github.com/kripken/ammo.js/">ammo.js</a> so that might be one.
One other solution might have been to place the obstacles on a grid
and try to make it so each animal and the player just need to look at
the grid. While that would be performant I felt that's best left as an exercise
for the reader 😜
One more thing, many game systems have something called <a href="https://www.google.com/search?q=coroutines">coroutines</a>.
Coroutines are routines that can pause while running and continue later.
Let's make the main character emit musical notes like they are leading
the line by singing. There are many ways we could implement this but for now
let's do it using coroutines.
First, here's a class to manage coroutines
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function* waitSeconds(duration) {
 while (duration &gt; 0) {
 duration -= globals.deltaTime;
 yield;
 }
}

class CoroutineRunner {
 constructor() {
 this.generatorStacks = [];
 this.addQueue = [];
 this.removeQueue = new Set();
 }
 isBusy() {
 return this.addQueue.length + this.generatorStacks.length &gt; 0;
 }
 add(generator, delay = 0) {
 const genStack = [generator];
 if (delay) {
 genStack.push(waitSeconds(delay));
 }
 this.addQueue.push(genStack);
 }
 remove(generator) {
 this.removeQueue.add(generator);
 }
 update() {
 this._addQueued();
 this._removeQueued();
 for (const genStack of this.generatorStacks) {
 const main = genStack[0];
 // Handle if one coroutine removes another
 if (this.removeQueue.has(main)) {
 continue;
 }
 while (genStack.length) {
 const topGen = genStack[genStack.length - 1];
 const {value, done} = topGen.next();
 if (done) {
 if (genStack.length === 1) {
 this.removeQueue.add(topGen);
 break;
 }
 genStack.pop();
 } else if (value) {
 genStack.push(value);
 } else {
 break;
 }
 }
 }
 this._removeQueued();
 }
 _addQueued() {
 if (this.addQueue.length) {
 this.generatorStacks.splice(this.generatorStacks.length, 0, ...this.addQueue);
 this.addQueue = [];
 }
 }
 _removeQueued() {
 if (this.removeQueue.size) {
 this.generatorStacks = this.generatorStacks.filter(genStack =&gt; !this.removeQueue.has(genStack[0]));
 this.removeQueue.clear();
 }
 }
}
</pre>
It does things similar to <code class="notranslate" translate="no">SafeArray</code> to make sure that it's safe to add or remove
coroutines while other coroutines are running. It also handles nested coroutines.
To make a coroutine you make a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*">JavaScript generator function</a>.
A generator function is preceded by the keyword <code class="notranslate" translate="no">function*</code> (the asterisk is important!)
Generator functions can <code class="notranslate" translate="no">yield</code>. For example
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function* countOTo9() {
 for (let i = 0; i &lt; 10; ++i) {
 console.log(i);
 yield;
 }
}
</pre>
If we added this function to the <code class="notranslate" translate="no">CoroutineRunner</code> above it would print
out each number, 0 to 9, once per frame or rather once per time we called <code class="notranslate" translate="no">runner.update</code>.
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const runner = new CoroutineRunner();
runner.add(count0To9);
while(runner.isBusy()) {
 runner.update();
}
</pre>
Coroutines are removed automatically when they are finished. 
To remove a coroutine early, before it reaches the end you need to keep
a reference to its generator like this
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gen = count0To9();
runner.add(gen);

// sometime later

runner.remove(gen);
</pre>
In any case, in the player let's use a coroutine to emit a note every half second to 1 second
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class Player extends Component {
 constructor(gameObject) {

...

+    this.runner = new CoroutineRunner();
+
+    function* emitNotes() {
+      for (;;) {
+        yield waitSeconds(rand(0.5, 1));
+        const noteGO = gameObjectManager.createGameObject(scene, 'note');
+        noteGO.transform.position.copy(gameObject.transform.position);
+        noteGO.transform.position.y += 5;
+        noteGO.addComponent(Note);
+      }
+    }
+
+    this.runner.add(emitNotes());
  }
  update() {
+    this.runner.update();

...

}
}

function* moveAndRemove() {
      for (let i = 0; i &lt; 60; ++i) {
        transform.translateOnAxis(direction, globals.deltaTime * 10);
        noteMaterial.opacity = 1 - (i / 60);
        yield;
      }
      transform.parent.remove(transform);
      gameObjectManager.removeGameObject(gameObject);
    }

this.runner.add(moveAndRemove());
 }
 update() {
 this.runner.update();
 }
}
</pre>
All it does is setup a <a href="/docs/#api/en/objects/Sprite"><code class="notranslate" translate="no">Sprite</code></a>, then pick a random velocity and move
the transform at that velocity for 60 frames while fading out the note
by setting the material's <a href="/docs/#api/en/materials/Material#opacity"><code class="notranslate" translate="no">opacity</code></a>. 
After the loop it the removes the transform
from the scene and the note itself from active gameobjects.
One last thing, let's add a few more animals
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function init() {

...

const animalModelNames = [
 'pig',
 'cow',
 'llama',
 'pug',
 'sheep',
 'zebra',
 'horse',
 ];
+ const base = new THREE.Object3D();
+ const offset = new THREE.Object3D();
+ base.add(offset);
+
+ // position animals in a spiral.
+ const numAnimals = 28;
+ const arc = 10;
+ const b = 10 / (2 * Math.PI);
+ let r = 10;
+ let phi = r / b;
+ for (let i = 0; i &lt; numAnimals; ++i) {
+ const name = animalModelNames[rand(animalModelNames.length) | 0];
 const gameObject = gameObjectManager.createGameObject(scene, name);
 gameObject.addComponent(Animal, models[name]);
+ base.rotation.y = phi;
+ offset.position.x = r;
+ offset.updateWorldMatrix(true, false);
+ offset.getWorldPosition(gameObject.transform.position);
+ phi += arc / r;
+ r = b * phi;
 }
</pre>
<div translate="no" class="threejs_example_container notranslate">
 <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/game-conga-line-w-notes.html"></iframe></div>
 <a class="threejs_center" href="/manual/examples/game-conga-line-w-notes.html" target="_blank">click here to open in a separate window</a>
</div>

You might be asking, why not use <code class="notranslate" translate="no">setTimeout</code>? The problem with <code class="notranslate" translate="no">setTimeout</code>
is it's not related to the game clock. For example above we made the maximum
amount of time allowed to elapse between frames to be 1/20th of a second.
Our coroutine system will respect that limit but <code class="notranslate" translate="no">setTimeout</code> would not.
Of course we could have made a simple timer ourselves
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">class Player ... {
 update() {
 this.noteTimer -= globals.deltaTime;
 if (this.noteTimer &lt;= 0) {
 // reset timer
 this.noteTimer = rand(0.5, 1);
 // create a gameobject with a note component
 }
 }
</pre>
And for this particular case that might have been better but as you add
more and things you'll get more and more variables added to your classes
where as with coroutines you can often just fire and forget.
Given our animal's simple states we could also have implemented them
with a coroutine in the form of
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">// pseudo code!
function* animalCoroutine() {
 setAnimation('Idle');
 while(playerIsTooFar()) {
 yield;
 }
 const target = endOfLine;
 setAnimation('Jump');
 while(targetIsTooFar()) {
 aimAt(target);
 yield;
 }
 setAnimation('Walk')
 while(notAtOldestPositionOfTarget()) {
 addHistory();
 aimAt(target);
 yield;
 }
 for(;;) {
 addHistory();
 const pos = history.unshift();
 transform.position.copy(pos);
 aimAt(history[0]);
 yield;
 }
}
</pre>
This would have worked but of course as soon as our states were not so linear
we'd have had to switch to a <code class="notranslate" translate="no">FiniteStateMachine</code>.
It also wasn't clear to me if coroutines should run independently of their
components. We could have made a global <code class="notranslate" translate="no">CoroutineRunner</code> and put all
coroutines on it. That would make cleaning them up harder. As it is now
if the gameobject is removed all of its components are removed and
therefore the coroutine runners created are no longer called and it will
all get garbage collected. If we had global runner then it would be
the responsibility of each component to remove any coroutines it added
or else some other mechanism of registering coroutines with a particular
component or gameobject would be needed so that removing one removes the
others.
There are lots more issues a
normal game engine would deal with. As it is there is no order to how
gameobjects or their components are run. They are just run in the order added.
Many game systems add a priority so the order can be set or changed.
Another issue we ran into is the <code class="notranslate" translate="no">Note</code> removing its gameobject's transform from the scene.
That seems like something that should happen in <code class="notranslate" translate="no">GameObject</code> since it was <code class="notranslate" translate="no">GameObject</code>
that added the transform in the first place. Maybe <code class="notranslate" translate="no">GameObject</code> should have
a <code class="notranslate" translate="no">dispose</code> method that is called by <code class="notranslate" translate="no">GameObjectManager.removeGameObject</code>?
Yet another is how we're manually calling <code class="notranslate" translate="no">gameObjectManager.update</code> and <code class="notranslate" translate="no">inputManager.update</code>.
Maybe there should be a <code class="notranslate" translate="no">SystemManager</code> which these global services can add themselves
and each service will have its <code class="notranslate" translate="no">update</code> function called. In this way if we added a new
service like <code class="notranslate" translate="no">CollisionManager</code> we could just add it to the system manager and not
have to edit the render loop.
I'll leave those kinds of issues up to you.
I hope this article has given you some ideas for your own game engine.
Maybe I should promote a game jam. If you click the jsfiddle or codepen buttons
above the last example they'll open in those sites ready to edit. Add some features,
Change the game to a pug leading a bunch of knights. Use the knight's rolling animation
as a bowling ball and make an animal bowling game. Make an animal relay race.
If you make a cool game post a link in the comments below.
<div class="footnotes">
[<a id="parented">1</a>]: technically it would still work if none of the parents have any translation, rotation, or scale <a href="#parented-backref">§</a>.
</div>
 </div>
 </div>
 </div>
 
 <script src="../resources/prettify.js"></script>
 <script src="../resources/lesson.js"></script>

</body></html>

${this.title}

Code Editor : game.html