Animation Questions

Hello Chris,
I was working in Chapter 1 and 3 and I noticed something: every time I try to do anything with motion or animating, everything where the shapes are supposed to be just goes white. I don’t know what to do!
Here’s my code for the cartwheels in Chap. 3:

  // ******** START CODING ON THE NEXT LINE ********
var body = new THREE.SphereGeometry(100);
var cover = new THREE.MeshNormalMaterial(flat);
var avatar = new THREE.Mesh(body, cover);
scene.add(avatar);

var hand = new THREE.SphereGeometry(50);

var leftHand = new THREE.Mesh(hand, cover);
leftHand.position.set(-150, 0, 0);
avatar.add(leftHand);

var rightHand = new THREE.Mesh(hand, cover);
rightHand.position.set(150, 0, 0);
avatar.add(rightHand);

var foot = new THREE.SphereGeometry(50);

var leftFoot = new THREE.Mesh(foot, cover);
leftFoot.position.set(-75, -125, 0);
avatar.add(leftFoot);

var rightFoot = new THREE.Mesh(foot, cover);
rightFoot.position.set(75, -125, 0);
avatar.add(rightFoot);

  // Now, show what the camera sees on the screen:
  function animate() {
    requestAnimationFrame(animate);
    avatar.rotation.z = avatar.rotation.z + 0.05;
    renderer.render(scene, camera);
  }
animate();

Thanks,
Jakin

The code that you’ve included looks good to me. So I suspect that something other than this code is causing the problem.

Can you do two things for me? When things go white, do this:

  1. Check the JavaScript console as described in chapter 2. Hopefully there’s a clue in there.
  2. Copy and paste ALL of the code in 3DE - not just the part you typed, but everything from the very top (the line <body></body>) all the way down to the bottom (</script>).

Be sure you paste your code as described in the welcome post (in between three backtick lines).

Sorry for the trouble. We’ll figure it out!

-Chris

Here’s ALL the code:

// The "scene" is where stuff in our game will happen: var scene = new THREE.Scene(); var flat = {flatShading: true}; var light = new THREE.AmbientLight('white', 0.8); scene.add(light);

// The “camera” is what sees the stuff:
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000);
camera.position.z = 500;
scene.add(camera);

// The “renderer” draws what the camera sees onto the screen:
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// ******** START CODING ON THE NEXT LINE ********
var body = new THREE.SphereGeometry(100);
var cover = new THREE.MeshNormalMaterial(flat);
var avatar = new THREE.Mesh(body, cover);
scene.add(avatar);

var hand = new THREE.SphereGeometry(50);

var leftHand = new THREE.Mesh(hand, cover);
leftHand.position.set(-150, 0, 0);
avatar.add(leftHand);

var rightHand = new THREE.Mesh(hand, cover);
rightHand.position.set(150, 0, 0);
avatar.add(rightHand);

var foot = new THREE.SphereGeometry(50);

var leftFoot = new THREE.Mesh(foot, cover);
leftFoot.position.set(-75, -125, 0);
avatar.add(leftFoot);

var rightFoot = new THREE.Mesh(foot, cover);
rightFoot.position.set(75, -125, 0);
avatar.add(rightFoot);

// Now, show what the camera sees on the screen:
function animate() {
requestAnimationFrame(animate);
avatar.rotation.z = avatar.rotation.z + 0.05;
renderer.render(scene, camera);
}
animate();

Thanks. That still looks good to me. Have you you checked the JavaScript console (as described in chapter 2)? Are there any messages that might indicate what the problem is?

Is it possible that you have some Chrome extensions installed? Certain extension (Gramarly in particular), have been know to cause problems.

The easiest way to tell if it’s an extension problem is to try running Chrome in an incognito session: Menu -> New incognito window. Then go to 3DE @ https://www.code3dgames.com/3de/. Copy and paste the code from the regular 3DE into the incognito session. If it’s an extension problem, then the code should be fine in the incognito 3DE.

Sorry again for the trouble. Debugging weird things like this is part of being a programmer, but that doesn’t make it fun.

-Chris

Chris,
I think I found the problem! I just got a new computer for Christmas, and when I made the code again on it it worked! My old computer was really slow, so I think that was the reason.
Have a happy new Year,
Jakin

Now I have ANOTHER problem…
This is what is says in the JavaScript console:
Creating Application Cache with manifest https://www.code3dgames.com/3de/editor.appcache
www.code3dgames.com/:1 Application Cache Checking event
www.code3dgames.com/:1 Application Cache Downloading event
www.code3dgames.com/:1 Application Cache Progress event (0 of 68) https://www.code3dgames.com/3de/packages/ice_code_editor/js/deflate/rawinflate.js
www.code3dgames.com/:1 Application Cache Progress event (1 of 68) https://www.code3dgames.com/sounds/snick.mp3
www.code3dgames.com/:1 Application Cache Progress event (2 of 68) https://www.code3dgames.com/sounds.js
www.code3dgames.com/:1 Application Cache Progress event (3 of 68) https://www.code3dgames.com/3de/appcache.js
www.code3dgames.com/:1 Application Cache Progress event (4 of 68) https://www.code3dgames.com/textures/moon.png
www.code3dgames.com/:1 Application Cache Progress event (5 of 68) https://www.code3dgames.com/3de/packages/ice_code_editor/js/deflate/rawdeflate.js
www.code3dgames.com/:1 Application Cache Progress event (6 of 68) https://www.code3dgames.com/controls/EditorControls.js
www.code3dgames.com/:1 Application Cache Progress event (7 of 68) https://www.code3dgames.com/sounds/donk.mp3
www.code3dgames.com/:1 Application Cache Progress event (8 of 68) https://www.code3dgames.com/scoreboard.js
www.code3dgames.com/:1 Application Cache Progress event (9 of 68) https://www.code3dgames.com/sounds/bubble.mp3
www.code3dgames.com/:1 Application Cache Progress event (10 of 68) https://www.code3dgames.com/favicon.ico
www.code3dgames.com/:1 Application Cache Progress event (11 of 68) https://www.code3dgames.com/images/rotten_banana.png
www.code3dgames.com/:1 Application Cache Progress event (12 of 68) https://www.code3dgames.com/controls/DeviceOrientationControls.js
www.code3dgames.com/:1 Application Cache Progress event (13 of 68) https://www.code3dgames.com/physijs_worker.js
www.code3dgames.com/:1 Application Cache Progress event (14 of 68) https://www.code3dgames.com/sounds/spring.mp3
www.code3dgames.com/:1 Application Cache Progress event (15 of 68) https://www.code3dgames.com/three.js
www.code3dgames.com/:1 Application Cache Progress event (16 of 68) https://www.code3dgames.com/physi.js
content.js:454 frameLoad
www.code3dgames.com/:1 Application Cache Progress event (17 of 68) https://www.code3dgames.com/tween.js
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
www.code3dgames.com/:1 Application Cache Progress event (18 of 68) https://www.code3dgames.com/ammo.js
www.code3dgames.com/:1 Application Cache Progress event (19 of 68) https://www.code3dgames.com/sounds/click.mp3
www.code3dgames.com/:1 Application Cache Progress event (20 of 68) https://www.code3dgames.com/3de/packages/ice_code_editor/html/code-OFFLINE.html
www.code3dgames.com/:1 Application Cache Progress event (21 of 68) https://www.code3dgames.com/spe.js
www.code3dgames.com/:1 Application Cache Progress event (22 of 68) https://www.code3dgames.com/3de/packages/ice_code_editor/css/ice.css
www.code3dgames.com/:1 Application Cache Progress event (23 of 68) https://www.code3dgames.com/sounds/knock.mp3
www.code3dgames.com/:1 Application Cache Progress event (24 of 68) https://www.code3dgames.com/3de/packages/ice_code_editor/js/ace/worker-javascript.js
www.code3dgames.com/:1 Application Cache Progress event (25 of 68) https://www.code3dgames.com/3de/main.dart.js
www.code3dgames.com/:1 Application Cache Progress event (26 of 68) https://www.code3dgames.com/sounds/drip.mp3
www.code3dgames.com/:1 Application Cache Progress event (27 of 68) https://www.code3dgames.com/images/purple_fruit_monster.png
www.code3dgames.com/:1 Application Cache Progress event (28 of 68) https://www.code3dgames.com/3de/packages/ace/src/js/ace.js
www.code3dgames.com/:1 Application Cache Progress event (29 of 68) https://www.code3dgames.com/3de/packages/browser/dart.js
www.code3dgames.com/:1 Application Cache Progress event (30 of 68) https://www.code3dgames.com/controls/OrbitControls.js
www.code3dgames.com/:1 Application Cache Progress event (31 of 68) https://www.code3dgames.com/textures/hardwood.png
www.code3dgames.com/:1 Application Cache Progress event (32 of 68) https://www.code3dgames.com/3de/packages/browser/interop.js
www.code3dgames.com/:1 Application Cache Progress event (33 of 68) https://www.code3dgames.com/controls/OrthographicTrackballControls.js
www.code3dgames.com/:1 Application Cache Progress event (34 of 68) https://www.code3dgames.com/sounds/explosion.wav
www.code3dgames.com/:1 Application Cache Progress event (35 of 68) https://www.code3dgames.com/3de/index.html
www.code3dgames.com/:1 Application Cache Progress event (36 of 68) https://www.code3dgames.com/3de/packages/ace/src/js/keybinding-emacs.js
www.code3dgames.com/:1 Application Cache Progress event (37 of 68) https://www.code3dgames.com/textures/ground.png
www.code3dgames.com/:1 Application Cache Progress event (38 of 68) https://www.code3dgames.com/3de/packages/ace/src/js/theme-textmate.js
www.code3dgames.com/:1 Application Cache Progress event (39 of 68) https://www.code3dgames.com/3de/packages/ace/src/js/theme-chrome.js
www.code3dgames.com/:1 Application Cache Progress event (40 of 68) https://www.code3dgames.com/3de/packages/ace/src/js/mode-javascript.js
www.code3dgames.com/:1 Application Cache Progress event (41 of 68) https://www.code3dgames.com/3de/packages/ace/src/js/mode-css.js
www.code3dgames.com/:1 Application Cache Progress event (42 of 68) https://www.code3dgames.com/controls/TransformControls.js
www.code3dgames.com/:1 Application Cache Progress event (43 of 68) https://www.code3dgames.com/3de/packages/ace/src/js/ext-searchbox.js
www.code3dgames.com/:1 Application Cache Progress event (44 of 68) https://www.code3dgames.com/controls/DragControls.js
www.code3dgames.com/:1 Application Cache Progress event (45 of 68) https://www.code3dgames.com/sounds/buzz.mp3
www.code3dgames.com/:1 Application Cache Progress event (46 of 68) https://www.code3dgames.com/textures/grass.png
www.code3dgames.com/:1 Application Cache Progress event (47 of 68) https://www.code3dgames.com/3de/packages/ace/src/js/mode-html.js
www.code3dgames.com/:1 Application Cache Progress event (48 of 68) https://www.code3dgames.com/textures/brick.png
www.code3dgames.com/:1 Application Cache Progress event (49 of 68) https://www.code3dgames.com/textures/earth.png
www.code3dgames.com/:1 Application Cache Progress event (50 of 68) https://www.code3dgames.com/textures/floor.png
www.code3dgames.com/:1 Application Cache Progress event (51 of 68) https://www.code3dgames.com/sounds/gunshot.wav
www.code3dgames.com/:1 Application Cache Progress event (52 of 68) https://www.code3dgames.com/textures/metal.png
www.code3dgames.com/:1 Application Cache Progress event (53 of 68) https://www.code3dgames.com/textures/rock.png
www.code3dgames.com/:1 Application Cache Progress event (54 of 68) https://www.code3dgames.com/sounds/jump.wav
www.code3dgames.com/:1 Application Cache Progress event (55 of 68) https://www.code3dgames.com/sounds/swish.mp3
www.code3dgames.com/:1 Application Cache Progress event (56 of 68) https://www.code3dgames.com/controls/FlyControls.js
www.code3dgames.com/:1 Application Cache Progress event (57 of 68) https://www.code3dgames.com/textures/wood.png
www.code3dgames.com/:1 Application Cache Progress event (58 of 68) https://www.code3dgames.com/controls/PointerLockControls.js
www.code3dgames.com/:1 Application Cache Progress event (59 of 68) https://www.code3dgames.com/sounds/index.txt
www.code3dgames.com/:1 Application Cache Progress event (60 of 68) https://www.code3dgames.com/sounds/scratch.mp3
www.code3dgames.com/:1 Application Cache Progress event (61 of 68) https://www.code3dgames.com/sounds/violons11.wav
www.code3dgames.com/:1 Application Cache Progress event (62 of 68) https://www.code3dgames.com/controls/FirstPersonControls.js
www.code3dgames.com/:1 Application Cache Progress event (63 of 68) https://www.code3dgames.com/sounds/guitar.mp3
www.code3dgames.com/:1 Application Cache Progress event (64 of 68) https://www.code3dgames.com/controls/VRControls.js
www.code3dgames.com/:1 Application Cache Progress event (65 of 68) https://www.code3dgames.com/controls/TrackballControls.js
www.code3dgames.com/:1 Application Cache Progress event (66 of 68) https://www.code3dgames.com/images/monster.png
www.code3dgames.com/:1 Application Cache Progress event (67 of 68) https://www.code3dgames.com/images/fruit.png
www.code3dgames.com/:1 Application Cache Progress event (68 of 68)
www.code3dgames.com/:1 Application Cache Cached event
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
code.html:23 Uncaught SyntaxError: Unexpected identifier
content.js:454 frameLoad
code.html:23 Uncaught SyntaxError: Unexpected identifier
content.js:454 frameLoad
code.html:23 Uncaught SyntaxError: Unexpected identifier
content.js:454 frameLoad
code.html:23 Uncaught SyntaxError: Unexpected identifier
content.js:454 frameLoad
code.html:23 Uncaught SyntaxError: Unexpected identifier
content.js:454 frameLoad
code.html:23 Uncaught SyntaxError: Unexpected identifier
content.js:454 frameLoad
code.html:23 Uncaught SyntaxError: Unexpected identifier
content.js:454 frameLoad
code.html:23 Uncaught SyntaxError: Unexpected identifier
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
code.html:27 Uncaught TypeError: THREE is not a constructor
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
code.html:27 Uncaught TypeError: THREE.SphereGeometery is not a constructor
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
code.html:39 Uncaught TypeError: THREE is not a constructor
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
code.html:53 Uncaught SyntaxError: Unexpected identifier
content.js:454 frameLoad
code.html:61 Uncaught SyntaxError: Unexpected end of input
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
code.html:57 Uncaught SyntaxError: Unexpected token }
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
code.html:57 Uncaught ReferenceError: is is not defined
content.js:454 frameLoad
320code.html:57 Uncaught ReferenceError: is is not defined
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
code.html:59 Uncaught SyntaxError: Unexpected token }
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
code.html:64 Uncaught TypeError: Failed to execute ‘addEventListener’ on ‘EventTarget’: 2 arguments required, but only 1 present.
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
code.html:64 Uncaught TypeError: Failed to execute ‘addEventListener’ on ‘EventTarget’: 2 arguments required, but only 1 present.
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
code.html:64 Uncaught ReferenceError: sendKeyDown is not defined
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
code.html:64 Uncaught ReferenceError: sendKeyDown is not defined
content.js:454 frameLoad
code.html:69 Uncaught SyntaxError: Unexpected end of input
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
code.html:67 Uncaught SyntaxError: Unexpected token }
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
code.html:68 Uncaught SyntaxError: Unexpected token }
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
2code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:70 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:68 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:69 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:70 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:70 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:69 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:68 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:68 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:69 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:70 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:70 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:68 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:69 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:70 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:68 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:70 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:68 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:69 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:68 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:70 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:68 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:69 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:70 Uncaught TypeError: Cannot read property ‘z’ of undefined
29code.html:69 Uncaught TypeError: Cannot read property ‘z’ of undefined
2code.html:70 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:68 Uncaught TypeError: Cannot read property ‘x’ of undefined
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:70 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:69 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:68 Uncaught TypeError: Cannot read property ‘x’ of undefined
code.html:69 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:70 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
code.html:69 Uncaught TypeError: Cannot read property ‘z’ of undefined
code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer
content.js:454 frameLoad
three.js:20919 THREE.WebGLRenderer 87
content.js:454 frameLoad
25code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
at HTMLDocument.sendKeyDown (code.html:67)
code.html:68 Uncaught TypeError: Cannot read property ‘x’ of undefined
at HTMLDocument.sendKeyDown (code.html:68)

And here is my code:

I am in Chapter 4.
~Jakin

Here’s a more simplified version on the console messages:
Uncaught TypeError: Cannot read property ‘z’ of undefined
at HTMLDocument.sendKeyDown (code.html:69)
code.html:70 Uncaught TypeError: Cannot read property ‘z’ of undefined
at HTMLDocument.sendKeyDown (code.html:70)
code.html:68 Uncaught TypeError: Cannot read property ‘x’ of undefined
at HTMLDocument.sendKeyDown (code.html:68)
code.html:67 Uncaught TypeError: Cannot read property ‘x’ of undefined
at HTMLDocument.sendKeyDown (code.html:67)

Whoops I forgot to tell you what was wrong.
Whenever I press the arrow keys the avatar does not do ANYTHING!

Glad you got the first issue sorted out :grinning:

Your code did not make it into the post. The forum software here is a little picky. It might be easiest to use the Share link from the 3DE menu. If you prefer to copy & paste your code in the forum, that’s OK too, but be sure to paste it between 3 backtick lines:

Explain how your code is misbehaving...

```
// Paste your code here
```

Include any more information that you like here...

Even without seeing your code, I’d guess that it’s missing the marker code from the end of page 50 / beginning of page 51. If that’s not it, share the code using one of the methods above and I’ll be happy to have a look!

-Chris