I’m trying to create a sort-of exploring game, my last post was about random trees. I am now trying to make them with boundaries, and this code has made me rage and cry and throw stuff. Please help me!
`// There is a problem, you need to fix!
Thanks for any help
Heya! You’re an official programmer now – crying multiple times over code makes it official. But believe me, getting code to work makes it all worth while.
It looks like your code didn’t make it into the forum here. So please re-post when you get a chance. If copying and pasting isn’t working, you can use the Share feature in 3DE and paste the link in here. Re-read forum posting help if you’re having problems.
Are you trying to add boundaries to each of the trees so that your code can detect if an avatar is about to run into a tree? The stuff that we added in chapter 10 should get you on the right track. Don’t forget that the full code for that chapter is in the appendix, starting on page 284.
Don’t worry, we’ll get it working.
-Chris
Whoops, the code didn’t go through.
// There is a problem, you need to fix!
Thanks for any help 
<html>
<body>
<p>
<script src="/three.js"></script>
<script src="/tween.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;
// 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 marker = new THREE.Object3D();
scene.add(marker)
//var cover = new THREE.MeshNormalMaterial(flat);
var body = new THREE.SphereGeometry(100);
var cover = new THREE.MeshNormalMaterial();
var avatar = new THREE.Mesh(body, cover)
marker.add(avatar);
var hand = new THREE.SphereGeometry(50);
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)
var rightFoot = new THREE.Mesh(foot, cover);
rightFoot.position.set(-75, -125, 0);
avatar.add(rightFoot);
var leftFoot = new THREE.Mesh(foot, cover);
leftFoot.position.set(75, -125, 0);
avatar.add(leftFoot);
marker.add(camera);
var notAllowed = [];
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);
var boundary = new THREE.Mesh(
new THREE.CircleGeometry(300),
new THREE.MeshNormalMaterial()
);
boundary.position.y = -100;
boundary.rotation.x = -Math.PI/2;
trunk.add(boundary);
notAllowed.push(boundary);
trunk.position.set(x, -75, z);
scene.add(trunk);
}
for (var i=0; i<1000; i++) {
var x = 10000 - (20000 * Math.random());
var z = 7500 - (20000 * Math.random());
makeTreeAt(x, z);
}
// Now, animate what the camera sees on the screen:
var clock = new THREE.Clock();
var isCartwheeling = false;
var isFlipping = false;
var isMovingRight = false;
var isMovingLesf = false;
var isMovingForward = false;
var isMovingBack = false;
var direction;
var lastDirection;
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
turn();
walk();
acrobatics();
renderer.render(scene, camera);
}
animate();
function turn() {
if (isMovingRight) direction = Math.PI/2;
if (isMovingLeft) direction = -Math.PI/2;
if(isMovingForward) direction = Math.PI;
if (isMovingBack) direction = 0;
if (!isWalking()) direction = 0;
if (direction == lastDirection) return;
lastDirection = direction;
var tween = new TWEEN.Tween(avatar.rotation);
tween.to({y: direction}, 500);
tween.start();
}
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;
rightFoot.position.z = -position;
leftFoot.position.z = position;
}
function isWalking() {
if (isMovingRight) return true;
if (isMovingLeft) return true;
if (isMovingForward) return true;
if (isMovingBack) return true;
return false;
}
function acrobatoics() {
if(isCartwheeling) {
avatar.rotation.z = avatar.rotation.z + 0.05;
}
if (isFlipping){
avatar.rotation.x = avatar.rotation.x + 0.05;
}
}
function isColliding() {
var vector = new THREE.Vector3(0, -1, 0);
var raycaster = new THREE.Raycaster(marker.position, vector);
var intersects = raycaster.intersectObjects(notAllowed);
if (intersects.length > 0) return true;
return false;
}
document.addEventListener('keydown', sendKeyDown);
function sendKeyDown(event) {
var code = event.code;
if (code == 'ArrowLeft') {
marker.position.x = marker.position.x - 5;
isMovingLeft = true;
}
if (code == 'ArrowRight') {
marker.psition.x = marker.position.x + 5;
isMovingRight = true;
}
if (code == 'ArrowUp') {
marker.position.z = marker.position.z - 5;
isMovingForward = true;
}
if (code == 'ArrowDown') {
marker.position.z = marker.position.z + 5;
isMovingBack = true;
}
if (code == 'KeyC') isCartwheeling = !isCartwheeling
if (code == 'KeyF') isFlipping = !isFlipping
if (isColliding()) {
if (isMovingLeft) marker.position.x = marker.position.x + 5;
if (isMovingRight) marker.position.x = marker.position.x - 5;
if (isMovingForward) marker.position.z = marker.position.z + 5;
if (isMovingBack) marker.position.z = marker.position.z - 5;
}
}
document.addEventListener('keyup', sendKeyUp);
function sendKeyUp(event) {
var code = event.code;
if (code == 'ArrowLeft') isMovingLeft = false;
if (code == 'ArrowRight') isMovingRight = false;
if (code == 'ArrowUp') isMovingForward = false;
if (code == 'ArrowDown') isMovingBack = false;
}
</script>
</p>
</body>
OKAY THERE WEEE GOOOOOOOOOO
OK! You’re actually really, really close here.
One bit of advice is to start small. In this case, cut back on the trees from 1,000 to 10, then bump them up from there once everything else is working.
Another bit of advice is to go back and re-read chapter 2 about debugging. Using the tools described in there – especially the JavaScript console – I think you could figure out nearly all of this. It’s totally cool to ask when you run into problems! But it’s all sorts of fun when you can solve these mysteries on your own 
If you check the JavaScript console, you’ll find a bunch of errors that isMovingLeft is not defined. That’s because there is a little typo near line 120:
var clock = new THREE.Clock();
var isCartwheeling = false;
var isFlipping = false;
var isMovingRight = false;
var isMovingLesf = false;
var isMovingForward = false;
var isMovingBack = false;
Change isMovingLesf to isMovingLeft and that error should go away.
There is another small type with the acrobatics() function on line 172. It creates a function names function acrobatoics() instead of function acrobatics().
Also, inside the walk() function near line 150, the “get” in clock.getElapsedTime() should start with a lowercase g – right now it is clock.GetElapsedTime() (capital G), which would cause an error.
Once you fix those minor typos, the code should work. If not, or if you have any questions – don’t hesitate to ask!
-Chris
P.S. There might be one more typo in there when the avatar moves left or right. Can you find it? 