Walking (Chatpter 6)

#1

Hey, again I have a question!
My code isn’t working how I’d like it to be because it is kind of “buggy” and I don’t know where the problem is tbh :frowning: in the console is a a error:

three.js:10505 THREE.Object3D.add: object not an instance of THREE.Object3D. undefined

so I can’t really find the problem, can you help me?

    <body></body>
<script src="/three.js"></script>
<script>
  // 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;

  // 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);

  // BODY BODY BODY BODY BODY BODY BODY BODY BODY
var marker = new THREE.Object3D();
scene.add(marker);
var body = new THREE.SphereGeometry(100, 25, 25);
var cover = new THREE. MeshNormalMaterial();
var avatar = new THREE.Mesh(body, cover);
marker.add(avatar);

  // HAND HAND HAND HAND HAND HAND HAND HAND HAND HAND
var hand = new THREE.SphereGeometry(50, 25, 25);

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

var leftHand = new THREE.Mesh(hand, cover);
leftHand.position.set(150, 0, 0);
avatar.add(leftHand);
var foot = new THREE.SphereGeometry(50, 25, 25);

  // FOOD FOOD FOOD FOOD FOOD FOOD FOOD

var rightFood = new THREE.Mesh(foot, cover);
rightFood.position.set(-70, -130, 0);
avatar.add(rightFood);

var leftFood = new THREE.Mesh(foot, cover);
leftFood.position.set (70, -130, 0);
avatar.add(leftFood);

  //EYES EYES EYES EYES EYES EYES

var Eyes = new THREE.SphereGeometry(10);

var rightEye = new THREE.Mesh(Eyes, cover);
rightEye.position.set(-33, 10, 90);
avatar.add(rightEye);

var leftEye = new THREE.Mesh(Eyes, cover);
leftEye.position.set(33, 10, 90);
avatar.add(leftEye);


  // DETAILS

var Mouth = new THREE.TorusGeometry(10,2, 100, 25, 3.14);
var cover = new THREE.MeshNormalMaterial(flat);
var Mund = new THREE.Mesh(Mouth, cover);
Mund.position.set(0, 0, 100);
Mund.rotation.set(0, 0, 3.14);
avatar.add(Mund);

  // Zylinder Zylinder Zylinder Zylinder Zylinder Zylinder
  
  var Zylinder = new THREE.CylinderGeometry(80, 70, 110, 50);
  var cover = new THREE.MeshNormalMaterial(flat);
  var Hut = new THREE.Mesh(Zylinder, cover);
  avatar.add(Hut);
  Hut.position.set(0, 120, 0);
  
  var SeiteZylinder = new THREE.CylinderGeometry(100, 100, 10, 50);
  var cover = new THREE.MeshNormalMaterial(flat);
  var Hut2 = new THREE.Mesh(SeiteZylinder, cover);
  avatar.add(Hut2);
  Hut2.position.set(0, 75, 0);
  
  // STAB STAB STAB STAB STAB STAB STAB STAB STAB
  
  var Stab = new THREE.CylinderGeometry(10, 10, 240, 25);
  var cover = new THREE.MeshNormalMaterial(flat);
  var Stock = new THREE.Mesh(Stab, cover);
  avatar.add(); // .add(Stock); um STock hinzuzufügen!
  Stock.position.set(150, -50, 0);
  
  marker.add(camera);
  // BÄUME
  
  function makeTreeAt(x, z) {
    var trunk = new THREE.Mesh(
      new THREE.CylinderGeometry(50, 50, 200),
      new THREE.MeshBasicMaterial({color: 'sienna'})
      );
      var top = new THREE.Mesh(
        new THREE.SphereGeometry(150),
        new THREE.MeshBasicMaterial({color: 'forestgreen'})
        );
        top.position.y = 175;
        trunk.add(top);
        trunk.position.set(x, -75, z);
        scene.add(trunk);
  }
makeTreeAt(500, 0);
makeTreeAt(-500, 0);
makeTreeAt(750, -1000);
makeTreeAt(-750, -1000);

  // ANIMATION ANIMATION ANIMATION ANIMATION ANIMATION

var clock = new THREE.Clock();
var isCartwheeling = false;
var isFlipping = false;
var isMovingRight = false;
var isMovingLeft = false;
var isMovingForward = false;
var isMovingBack = false;

function animate() {
    requestAnimationFrame(animate);
    walk();
  acrobatics();
    renderer.render(scene, camera);
  }
  animate();
  
  function walk() {
    if (!isWalking()) return;
    
    var speed = 10;
    var size = 100;
    var time = clock.getElapsedTime();
    var position = Math.sin(speed * time) * size;
    rightHand.position.z = position;
    leftHand.position.z = -position;
    leftFood.position.z = position;
    rightFood.position.z = -position;
  }
  function isWalking() {
    if (isMovingRight) return true;
    if (isMovingLeft) return true;
    if (isMovingForward) return true;
    if (isMovingBack) return true;
    return false;
  }
  
  function acrobatics() { 
      if (isCartwheeling) {
    avatar.rotation.z = avatar.rotation.z + 0.05;
    }
    if (isFlipping) {
      avatar.rotation.x = avatar.rotation.x + 0.05;
    }
  }

document.addEventListener('keydown', sendKeyDown);
function sendKeyDown(event) {
  var code = event.code;
  if (code == 'KeyA') {
    marker.position.x = marker.position.x - 5;
    isMovingLeft = true;
  }
  if (code == 'KeyD') {
    marker.position.x = marker.position.x + 5;
    isMovingLeft = true;
  }
  if (code == 'KeyW') {
    marker.position.z = marker.position.z + 5;
    isMovingLeft = true;
  }
  if (code == 'KeyS') {
    marker.position.z = marker.position.z - 5;
    isMovingLeft = true;
  }
  if (code == 'KeyC') isCartwheeling = !isCartwheeling;
  if (code == 'KeyF') isFlipping = !isFlipping;
}
document.addEventListener('keyup', sendKeyUp);
function sendKeyUp(event) {
  var code = event.code;
  if (code == 'KeyA') isMovingLeft = false;
  if (code == 'KeyD') isMovingRight = false;
  if (code == 'KeyS') isMovingBack = false;
  if (code == 'KeyW ') isMovingForward = false;
}

  // Now, show what the camera sees on the screen:
 
    renderer.render(scene, camera);
  
</script>

Okay ty for help and have a nice day!

#2

First: great avatar! Really nice additions to make it your own :+1:

Also: that is a hard error to find. Chapter 2 would not have been much help. Happily, it is easy to fix.

The problem is line 91:

  avatar.add(); // .add(Stock); um STock hinzuzufügen!

This line adds nothing to the avatar. The 3D code library cannot add nothing, causing this (unhelpful) error. If you comment out that line or change it to avatar.add(Stock), then it will work.

Since the error does not include the line number from your code, there is no easy way to find the problem. Instead, I saw the add part of the error message and decided to look through all of the add() references in your code. Eventually I got to line 91. Not easy, so it was a good idea to ask here :slight_smile:

Let me know if you have any questions or run into any other problems.

-Chris

#3

Hey, ty for the quik and helpful answer!
Was I did there was supectet because in German there stand: ".add(Stock) to add a Stick to your Avatar.
I fixed it now and made it a little bit better and now there is no Error anymore! TY!

So my other problem was that my avatar doesn’t stop walking when I stop pressing the button, i don’t know if I miss any code, I checked if everything was typed right and also there should’n be something missing.

Also there is no error in the consol which makes it harder for me to find the issue :slightly_frowning_face: I hope you can help me!
(Also it works for the “KeyA” button but not for the others)

<body></body>
<script src="/three.js"></script>
<script>
  // 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;

  // 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);

  // BODY BODY BODY BODY BODY BODY BODY BODY BODY
var marker = new THREE.Object3D();
scene.add(marker);
var body = new THREE.SphereGeometry(100, 25, 25);
var cover = new THREE. MeshNormalMaterial();
var avatar = new THREE.Mesh(body, cover);
marker.add(avatar);

  // HAND HAND HAND HAND HAND HAND HAND HAND HAND HAND
var hand = new THREE.SphereGeometry(50, 25, 25);

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

var leftHand = new THREE.Mesh(hand, cover);
leftHand.position.set(150, 0, 0);
avatar.add(leftHand);
var foot = new THREE.SphereGeometry(50, 25, 25);

  // FOOD FOOD FOOD FOOD FOOD FOOD FOOD

var rightFood = new THREE.Mesh(foot, cover);
rightFood.position.set(-70, -130, 0);
avatar.add(rightFood);

var leftFood = new THREE.Mesh(foot, cover);
leftFood.position.set (70, -130, 0);
avatar.add(leftFood);

  //EYES EYES EYES EYES EYES EYES

var Eyes = new THREE.SphereGeometry(10);

var rightEye = new THREE.Mesh(Eyes, cover);
rightEye.position.set(-33, 10, 90);
avatar.add(rightEye);

var leftEye = new THREE.Mesh(Eyes, cover);
leftEye.position.set(33, 10, 90);
avatar.add(leftEye);


  // DETAILS

var Mouth = new THREE.TorusGeometry(10,2, 100, 25, 3.14);
var cover = new THREE.MeshNormalMaterial(flat);
var Mund = new THREE.Mesh(Mouth, cover);
Mund.position.set(0, 0, 100);
Mund.rotation.set(0, 0, 3.14);
avatar.add(Mund);

  // Zylinder Zylinder Zylinder Zylinder Zylinder Zylinder
  
  var Zylinder = new THREE.CylinderGeometry(80, 70, 110, 50);
  var cover = new THREE.MeshNormalMaterial(flat);
  var Hut = new THREE.Mesh(Zylinder, cover);
  avatar.add(Hut);
  Hut.position.set(0, 120, 0);
  
  var SeiteZylinder = new THREE.CylinderGeometry(100, 100, 10, 50);
  var cover = new THREE.MeshNormalMaterial(flat);
  var Hut2 = new THREE.Mesh(SeiteZylinder, cover);
  avatar.add(Hut2);
  Hut2.position.set(0, 75, 0);
  
  
  marker.add(camera);
  // BÄUME
  
  function makeTreeAt(x, z) {
var trunk = new THREE.Mesh(
  new THREE.CylinderGeometry(50, 50, 200),
  new THREE.MeshBasicMaterial({color: 'sienna'})
  );
  var top = new THREE.Mesh(
    new THREE.SphereGeometry(150),
    new THREE.MeshBasicMaterial({color: 'forestgreen'})
    );
    top.position.y = 175;
    trunk.add(top);
    trunk.position.set(x, -75, z);
    scene.add(trunk);
  }
makeTreeAt(500, 0);
makeTreeAt(-500, 0);
makeTreeAt(750, -1000);
makeTreeAt(-750, -1000);

  // ANIMATION ANIMATION ANIMATION ANIMATION ANIMATION

var clock = new THREE.Clock();
var isCartwheeling = false;
var isFlipping = false;
var isMovingRight = false;
var isMovingLeft = false;
var isMovingForward = false;
var isMovingBack = false;

function animate() {
requestAnimationFrame(animate);
walk();
  acrobatics();
renderer.render(scene, camera);
  }
  animate();
  
  function walk() {
if (!isWalking()) return;

var speed = 10;
var size = 100;
var time = clock.getElapsedTime();
var position = Math.sin(speed * time) * size;
rightHand.position.z = position;
leftHand.position.z = -position;
leftFood.position.z = position;
rightFood.position.z = -position;
  }
  function isWalking() {
if (isMovingRight) return true;
if (isMovingLeft) return true;
if (isMovingForward) return true;
if (isMovingBack) return true;
return false;
  }
  
  function acrobatics() { 
  if (isCartwheeling) {
avatar.rotation.z = avatar.rotation.z + 0.05;
}
if (isFlipping) {
  avatar.rotation.x = avatar.rotation.x + 0.05;
}
  }

document.addEventListener('keydown', sendKeyDown);
function sendKeyDown(event) {
  var code = event.code;
  if (code == 'KeyA') {
marker.position.x = marker.position.x - 5;
isMovingLeft = true;
  }
  if (code == 'KeyD') {
marker.position.x = marker.position.x + 5;
isMovingLeft = true;
  }
  if (code == 'KeyW') {
marker.position.z = marker.position.z + 5;
isMovingLeft = true;
  }
  if (code == 'KeyS') {
marker.position.z = marker.position.z - 5;
isMovingLeft = true;
  }
  if (code == 'KeyC') isCartwheeling = !isCartwheeling;
  if (code == 'KeyF') isFlipping = !isFlipping;
}
document.addEventListener('keyup', sendKeyUp);
function sendKeyUp(event) {
  var code = event.code;
  if (code == 'KeyA') isMovingLeft = false;
  if (code == 'KeyD') isMovingRight = false;
  if (code == 'KeyS') isMovingBack = false;
  if (code == 'KeyW ') isMovingForward = false;
}

  // Now, show what the camera sees on the screen:
 
renderer.render(scene, camera);
  
</script>

I hope you can find the problem or anything I did wrong.
Also thank you for this forum its really nice!
Have a great day!

#4

Have a look in the sendKeyDown() function. If the code value is 'KeyA', then the isMovingLeft variable is set. What variable gets set when the code value is 'KeyD'? 'KeyW'? This kind of bug would probably be easier to find if the variable names were in German.

Once you have that figured out, I think there is another small problem in sendKeyUp(). It should be quick to find because the 4 lines of code are not quite aligned.

Hope those hints help!

-Chris