small medium large xlarge

Generic-user-small
10 Feb 2018, 14:41
Benjamin (4 posts)

Hello, I’ve got a problem with chapter 8.

var marker = new THREE.Object3D;
scene.add(marker);

This is right below the line “START CODING AFTER THIS LINE” And the console says “avatar is not defined”

If I put in a var avatar, this happens

var clock = new THREE.Clock(true);
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
walk();
turn();
acrobatics();
renderer.render(scene, camera);
}

The console freaks completely out and the error is

renderer.render(scene, camera);

I don’t know how to fix this. Maybe I typed something wrong. (If this is the case, could you please send me the source code) Thank you!

Chris_strom_headshot_200_pragsmall
10 Feb 2018, 15:43
Chris Strom (278 posts)

Please copy and paste all of the code, not just these parts. I’d just be guessing what the problem otherwise. Don’t worry, we’ll figure out the problem :)

Generic-user-small
10 Feb 2018, 16:26
Benjamin (4 posts)

Because of laziness, I haven’t included all of the trees.

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/Tween.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<body></body><script>
  // This is where stuff in our game will happen:
  var scene = new THREE.Scene();

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

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********
var marker = new THREE.Object3D;
scene.add(marker);
var cover = new THREE.MeshNormalMaterial();
var body = new THREE.SphereGeometry(100);
marker.add(avatar);
var hand = new THREE.SphereGeometry(50);
var right_hand = new THREE.Mesh(hand, cover);
right_hand.position.set(-150, 0, 0);
avatar.add(right_hand);
var left_hand = new THREE.Mesh(hand, cover);
left_hand.position.set(150, 0, 0);
avatar.add(left_hand);
var foot = new THREE.SphereGeometry(50);
var right_foot = new THREE.Mesh(foot, cover);
right_foot.position.set(-75, -125, 0);
avatar.add(right_foot);
var left_foot = new THREE.Mesh(foot, cover);
left_foot.position.set(75, -125, 0);
avatar.add(left_foot);
marker.add(camera);
makeTreeAt(500, 0);
function makeTreeAt(x, z) {
  var trunk = new THREE.Mesh(
    new THREE.CylinderGeometry(50, 50, 200),
    new THREE.MeshBasicMaterial({color: 0XA0522D}));
  var top = new THREE.Mesh(
    new THREE.SphereGeometry(150),
    new THREE.MeshBasicMaterial({color: 0x228B22}));
  top.position.y = 175;
  trunk.add(top);
  trunk.position.set(x, -75, z);
  scene.add(trunk);
}

var clock = new THREE.Clock(true);
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
walk();
turn();
acrobatics();
renderer.render(scene, camera);
}

animate();

function walk() {
if (!isWalking()) return;
var position = Math.sin(clock.getElapsedTime()*5) *50;
right_hand.position.z = position;
left_hand.position.z = -position;
right_foot.position.z = -position;
left_foot.position.z = position;
}
function turn() {
var direction = 0;
if (is_moving_forward) direction = Math.PI;
if (is_moving_back) direction = 0;
if (is_moving_right) direction = Math.PI/2;
if (is_moving_left) direction = -Math.PI/2;

spinAvatar(direction);
}
function spinAvatar(direction) {
new TWEEN.
Tween({y: avatar.rotation.y}).
to({y: direction}, 100).
onUpdate(function () {
avatar.rotation.y = this.y;

}).
start();
}
var is_cartwheeling = false;
var is_flipping = false;
function acrobatics() {
if (is_cartwheeling) {
avatar.rotation.z = avatar.rotation.z + 0.05;
}
if (is_flipping) {
avatar.rotation.x = avatar.rotation.x + 0.05;
}
}
var is_moving_left, is_moving_right, is_moving_forward, is_moving_back;
function isWalking() {
if (is_moving_right) return true;
if (is_moving_left) return true;
if (is_moving_forward) return true;
if (is_moving_back) return true;
return false;
}
document.addEventListener('keydown', function(event) {
var code = event.keyCode;
if (code == 37) {
marker.position.x = marker.position.x-5;
is_moving_left = true;
}
if (code == 38) {
marker.position.z = marker.position.z-5;
is_moving_forward = true;
}
if (code == 39) {
marker.position.x = marker.position.x+5;
is_moving_right = true;
}
if (code == 40) {
marker.position.z = marker.position.z+5;
is_moving_back = true;
}
if (code == 67) is_cartwheeling = !is_cartwheeling;
if (code == 70) is_flipping = !is_flipping;
})
document.addEventListener('keyup', function(event) {
var code = event.keyCode;
if (code == 37) {
console.log("not left anymore");
is_moving_left = false;
}
if (code == 38) is_moving_forward = false;
if (code == 39) is_moving_right = false;
if (code == 40) is_moving_back = false;
});
    // Now, show what the camera sees on the screen:
  renderer.render(scene, camera);
</script>
Chris_strom_headshot_200_pragsmall
10 Feb 2018, 19:51
Chris Strom (278 posts)

Thanks!

It looks like one line of code was accidentally deleted. Aside from that, I think everything is perfect :)

Just below the START CODING line, the code creates the marker and adds it to the scene. Then it creates the cover and the body of the avatar just like it should. But, it’s missing the line the creates the mesh – the combination of the cover and body.

To fix, add a line that defines the avatar as shown (after the body and before adding the avatar to the marker):

.

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

.

After that, everything should reappear. If not, or if you have any other questions, just post them here :)

-Chris

Generic-user-small
10 Feb 2018, 20:20
Benjamin (4 posts)

OMG thank you so much! But I still have one question! The character doesn’t go very fluid. Will he go more fluidly in later chapters?

Chris_strom_headshot_200_pragsmall
10 Feb 2018, 20:58
Chris Strom (278 posts)

The motion is pretty much as smooth as it’s going to get here. The motion of the hands and feet should be fairly smooth because of the walk() function. The turning motion should be smooth because of the Tween code that we just added. If either of those is not fluid, double check the code.

Some of this might be caused by too many other thing running on your computer. You might try restarting the computer and opening just the browser to see if that helps.

If the movement of the avatar past the tree is still not fluid, then it’s most likely a slow repeat rate on your keyboard. Googling for “keyboard repeat rate on windows” or “keyboard repeat rate on mac” will help you improve that.

If that still doesn’t help, let me know.

-Chris

Generic-user-small
11 Feb 2018, 11:05
Benjamin (4 posts)

Thank you so much for everything. Now, it’s a lot better. It was the repeat rate.

You must be logged in to comment