small medium large xlarge

Dubstepcat_300_pragsmall
19 Jun 2016, 01:17
Fin Lumsden (35 posts)

I’ve tried repeatedly to see the problem in my code but i can’t find it. I think it may be that something is undefined. this code has caused me a load of confusion and in a picture on the next page it shows a picture of a plane. Here’s the code I’ve done:

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/physi.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script src="http://gamingJS.com/Scoreboard.js"></script>
<script>
  // Physics settings
  Physijs.scripts.ammo = 'http://gamingJS.com/ammo.js';
  Physijs.scripts.worker = 'http://gamingJS.com/physijs_worker.js';

  // This is where stuff in our game will happen:
  var scene = new Physijs.Scene({ fixedTimeStep: 2 / 60 });
  scene.setGravity(new THREE.Vector3( 0, -20, 0 ));

  // This is what sees the stuff:
  var width = window.innerWidth,
      height = window.innerHeight,
      aspect_ratio = width / height;
  var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
var camera = new THREE.OrthographicCamera(
 -width/2, width/2, height/2, -height/2, 1, 10000
);

  camera.position.set(250, 250, 250);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  scene.add(camera);

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

  // ******** START CODING ON THE NEXT LINE ********
addSunlight(scene);
var scoreboard = addScoreboard();
var river = addRiver(scene);
function addRiver(scene) {
  var ground = makeGround(500);
  addWater(ground, 500);
  addLid(ground, 500);
  scene.add(ground);
  return ground;
}
function makeGround(size) {
  var faces = 100;
  var shape = new THREE.PlaneGeometry(size, size, faces, faces);
  
  var cover = Physijs.createMaterial(
    new THREE.MeshPhongMaterial({
      emissive: new THREE.Colour(0x339933), //a little green
      specular: new THREE.Colour(0x333333) //dark grey / not shiny
    }),
   1, //hard to move across aka high friction
   0.1 //not bouncy
   );
   
   var ground = new Physijs.HeightfieldMesh(
     shape, cover, 0
     );
     ground.rotation.set(-Math.PI/2, 0.2, Math.PI/2);
     ground.receiveShadow = true;
     ground.castShadow = true;
     
     return ground;
}
function addWater(ground, size) {
}
function addLid(ground, size) {
}
function addScoreboard() {
  var scoreboard = new Scoreboard();
  scoreboard.score(0);
  scoreboard.timer();
  scoreboard.help(
    'left and right arrow keys to rotate your boat; ' +
    'spacebar to move forward.'
    );
    return scoreboard;
}
function addSunlight(scene) {
  var sunlight = new THREE.DirectionalLight();
  sunlight.intensity = 0.5;
  sunlight.castShadow = true;
  sunlight.position.set(250, 250, 250);
  sunlight.shadowCameraNear = 250;
  sunlight.shadowCameraFar = 600;
  sunlight.shadowCameraLeft = -200;
  sunlight.shadowCameraRight = 200;
  sunlight.shadowCameraTop = 200;
  sunlight.shadowCameraBottom = -200;
  sunlight.shadowMapWidth = 4096;
  sunlight.shadowMapHeight = 4096;
  scene.add(sunlight);
}


  // Animate motion in the game
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();

  // Run physics
  function gameStep() {
    scene.simulate();
    // Update physics 60 times a second so that motion is smooth
    setTimeout(gameStep, 1000/60);
  }
  gameStep();
</script>
Chris_strom_headshot_200_pragsmall
19 Jun 2016, 02:29
Chris Strom (265 posts)

Check the JavaScript console :)

Chapter 2 tells you how to open (2.2) and use the console (2.5). It is a JavaScript programmer’s best friend and it is trying to tell you what’s wrong. Let it :D

BTW your code is nearly perfect – you’re doing great getting this far. If you still need help after checking the JavaScript console, post back here. I’m more than happy to help and/or give some more hints.

Keep it up!

-Chris

Dubstepcat_300_pragsmall
19 Jun 2016, 14:36
Fin Lumsden (35 posts)

Oh. It’s trying to read the

THREE.Colour()

, as a constructor. That sort of helps although now I’m going to try and find where the mistake is. Thanks!

Chris_strom_headshot_200_pragsmall
19 Jun 2016, 15:47
Chris Strom (265 posts)

Yup!

You’ve got the most important part, so I’ll let you know the rest: it’s Color, not Colour. Spelling tends to be the US spelling in programming (even if the person making the code isn’t from the US). That can be annoying, but you get used to it after a while.

Like I said, you’ve got it perfect – not even a typo, just a spelling convention – so nice work! Let me know if you run into anything else.

-Chris

Dubstepcat_300_pragsmall
19 Jun 2016, 16:47
Fin Lumsden (35 posts)

Thanks so much! I know British spelling. I’ll modify it immediately

Dubstepcat_300_pragsmall
20 Jun 2016, 00:47
Fin Lumsden (35 posts)

Thanks for the previous help, although now I am having problems as I can’t see the boat. I messed around with the camera rotation and position but couldn’t do anything - did I miss something out?

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/physi.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script src="http://gamingJS.com/Scoreboard.js"></script>
<script>
  // Physics settings
  Physijs.scripts.ammo = 'http://gamingJS.com/ammo.js';
  Physijs.scripts.worker = 'http://gamingJS.com/physijs_worker.js';

  // This is where stuff in our game will happen:
  var scene = new Physijs.Scene({ fixedTimeStep: 2 / 60 });
  scene.setGravity(new THREE.Vector3( 0, -20, 0 ));

  // 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 = 200;
camera.position.y = 100;
camera.rotation.y = 0;
camera.rotation.x = 0;
scene.add(camera);

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  // ******** START CODING ON THE NEXT LINE ********
addSunlight(scene);
var scoreboard = addScoreboard();
var river = addRiver(scene);
var raft = addRaft(scene);
startGame(raft, river, scoreboard);
function startGame(raft, river, scoreboard) {
  var start = river.river_points[100];
  raft.__dirtyPosition = true;
  raft.position.set(start.y, start.z + 100, 0);
  raft.setLinearVelocity(new THREE.Vector3());
  scoreboard.resetTimer();
  scoreboard.score(0);
  updateCamera();
}
function updateCamera() {
  camera.position.set(
    raft.position.x + 75,
    raft.position.y + 40,
    raft.position.z
    );
}
function addRaft(scene) {
  var mesh = new Physijs.ConvexMesh(
    new THREE.TorusGeometry(2, 0.5, 8, 20),
    new THREE.MeshPhongMaterial({
      emissive: 0xcc2222,
      specular: 0xeeeeee
    }),
    0.1,
    0.01
    );
    mesh.rotation.x = -Math.PI/2;
    mesh.castShadow = true;
    scene.add(mesh);
    mesh.setAngularFactor(new THREE.Vector3(0, 0, 0));
    var rudder = new THREE.Mesh(
      new THREE.SphereGeometry(0.5),
      new THREE.MeshBasicMaterial({color: 0x000099})
      );
      rudder.position.set(3, 0, 0);
      mesh.add(rudder);
      return mesh;
}
function addRiver(scene) {
  var ground = makeGround(500);
  addWater(ground, 500);
  addLid(ground, 500);
  scene.add(ground);
  return ground;
}
function makeGround(size) {
  var faces = 100;
  var shape = new THREE.PlaneGeometry(size, size, faces, faces);
  var river_points = digRiver(shape, faces + 1);
  var cover = Physijs.createMaterial(
    new THREE.MeshPhongMaterial({
      emissive: new THREE.Color(0x339933), //a little green
      specular: new THREE.Color(0x333333) //dark grey
    }),
   1, //hard to move across aka high friction
   0.1 //not bouncy
   );
   var ground = new Physijs.HeightfieldMesh(
     shape, cover, 0
     );
     ground.rotation.set(-Math.PI/2, 0.2, Math.PI/2);
     ground.receiveShadow = true;
     ground.castShadow = true;
     ground.river_points = river_points;
     return ground;
}
function digRiver(shape, size) {
  var center_points = [];
  for (var row=0; row<size; row++) {
    var center = Math.sin(4*Math.PI*row/size);
    center = center * 0.1 * size;
    center = Math.floor(center + size/2);
    center = row*size + center;
    for (var distance=0; distance<12; distance++) {
      shape.vertices[center + distance].z = -5 * (12 - distance);
      shape.vertices[center - distance].z = -5 * (12 - distance);
    }
    center_points.push(shape.vertices[center]);
  }
  shape.computeFaceNormals();
  shape.computeVertexNormals();
  return center_points;
}
function addWater(ground, size) {
  var water = new Physijs.ConvexMesh(
    new THREE.CubeGeometry(1.4*size, 1.4*size, 10),
    Physijs.createMaterial(
      new THREE.MeshBasicMaterial({color: 0x0000bb}),
      0, //no friction (slippery)
      0.01 // not very bouncy at all
      ),
      0 //never move
      );
      water.position.z = -20;
      water.receiveShadow = true;
      ground.add(water);
}
function addLid(ground, size) {
  var lid = new Physijs.ConvexMesh(
    new THREE.CubeGeometry(size, size, 1),
    new THREE.MeshBasicMaterial({visible:false})
    );
}
function addScoreboard() {
  var scoreboard = new Scoreboard();
  scoreboard.score(0);
  scoreboard.timer();
  scoreboard.help(
    'left and right arrow keys to rotate your boat; ' +
    'spacebar to move forward.'
    );
    return scoreboard;
}
function addSunlight(scene) {
  var sunlight = new THREE.DirectionalLight();
  sunlight.intensity = 0.5;
  sunlight.castShadow = true;
  sunlight.position.set(250, 250, 250);
  sunlight.shadowCameraNear = 250;
  sunlight.shadowCameraFar = 600;
  sunlight.shadowCameraLeft = -200;
  sunlight.shadowCameraRight = 200;
  sunlight.shadowCameraTop = 200;
  sunlight.shadowCameraBottom = -200;
  sunlight.shadowMapWidth = 4096;
  sunlight.shadowMapHeight = 4096;
  scene.add(sunlight);
}


  // Animate motion in the game
  function animate() {
    requestAnimationFrame(animate);
    updateCamera();
    renderer.render(scene, camera);
  }
  animate();

  // Run physics
  function gameStep() {
    scene.simulate();
    // Update physics 60 times a second so that motion is smooth
    setTimeout(gameStep, 1000/60);
  }
  gameStep();
  document.addEventListener('keydown', function(event) {
    var code = event.keyCode;
    if (code == 38) pushRaft();       //up key
    if (code == 37) rotateRaft(-1); //left
    if (code == 39) rotateRaft(1); //right
    if (code == 82) startGame(raft, river, scoreboard);
    // R (reset)
  });
  function pushRaft() {
    var angle = raft.rotation.z;
    raft.applyCentralForce(
      new THREE.Vector3(
        50*Math.cos(angle),
        0,
        -50*Math.sin(angle)
        )
        );
  }
  function rotateRaft(direction) {
    raft._dirtyRotation = true;
    raft.rotation.z = raft.rotation.z + direction * Math.PI/10;
  }
</script>

Sorry, I know that it isn’t crucial, although it seems annoying, and I think you’d agree.

Dubstepcat_300_pragsmall
20 Jun 2016, 01:06
Fin Lumsden (35 posts)

SORRY!!!! I just realized it was the

camera.lookAt(...)

That I’d missed. Once again, SORRY!

Dubstepcat_300_pragsmall
20 Jun 2016, 23:22
Fin Lumsden (35 posts)

Now I’m sadly only having one problem - the turning. Here’s the code I’ve got

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/physi.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script src="http://gamingJS.com/Scoreboard.js"></script>
<script>
  // Physics settings
  Physijs.scripts.ammo = 'http://gamingJS.com/ammo.js';
  Physijs.scripts.worker = 'http://gamingJS.com/physijs_worker.js';

  // This is where stuff in our game will happen:
  var scene = new Physijs.Scene({ fixedTimeStep: 2 / 60 });
  scene.setGravity(new THREE.Vector3( 0, -100, 0 ));

  // 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 = 100;
camera.position.y = 100;
camera.rotation.y = 0;
camera.rotation.x = 0;
scene.add(camera);

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  // ******** START CODING ON THE NEXT LINE ********
addSunlight(scene);
var scoreboard = addScoreboard();
var river = addRiver(scene);
var raft = addRaft(scene);
var paused;
startGame(raft, river, scoreboard);
function startGame(raft, river, scoreboard) {
  var start = river.river_points[100];
  raft.__dirtyPosition = true;
  raft.position.set(start.y, start.z + 100, 0);
  raft.setLinearVelocity(new THREE.Vector3());
  scoreboard.resetTimer();
  scoreboard.score(0);
  updateCamera();
  camera.lookAt(new THREE.Vector3(start.y, 0, 0));
  paused = false;
}
function updateCamera() {
  camera.position.set(
    raft.position.x + 75,
    raft.position.y + 40,
    raft.position.z
    );
}
function addRaft(scene) {
  var mesh = new Physijs.ConvexMesh(
    new THREE.TorusGeometry(2, 0.2, 8, 20),
    new THREE.MeshPhongMaterial({
      emissive: 0xcc2222,
      specular: 0xeeeeee
    }),
    0.1,
    0.01
    );
    mesh.rotation.x = -Math.PI/2;
    mesh.castShadow = true;
    scene.add(mesh);
    mesh.setAngularFactor(new THREE.Vector3(0, 0, 0));
    var rudder = new THREE.Mesh(
      new THREE.SphereGeometry(0.5),
      new THREE.MeshBasicMaterial({color: 0x000099})
      );
      rudder.position.set(3, 0, 0);
      mesh.add(rudder);
      return mesh;
}
function addRiver(scene) {
  var ground = makeGround(500);
  addWater(ground, 500);
  addLid(ground, 500);
  scene.add(ground);
  return ground;
}
function makeGround(size) {
  var faces = 100;
  var shape = new THREE.PlaneGeometry(size, size, faces, faces);
  var river_points = digRiver(shape, faces + 1);
  var cover = Physijs.createMaterial(
    new THREE.MeshPhongMaterial({
      emissive: new THREE.Color(0x339933), //a little green
      specular: new THREE.Color(0x333333) //dark grey
    }),
   1, //hard to move across aka high friction
   0.1 //not bouncy
   );
   var ground = new Physijs.HeightfieldMesh(
     shape, cover, 0
     );
     ground.rotation.set(-Math.PI/2, 0.2, Math.PI/2);
     ground.receiveShadow = true;
     ground.castShadow = true;
     ground.river_points = river_points;
     return ground;
}
function digRiver(shape, size) {
  var center_points = [];
  for (var row=0; row<size; row++) {
    var center = Math.sin(4*Math.PI*row/size);
    center = center * 0.1 * size;
    center = Math.floor(center + size/2);
    center = row*size + center;
    for (var distance=0; distance<12; distance++) {
      shape.vertices[center + distance].z = -5 * (12 - distance);
      shape.vertices[center - distance].z = -5 * (12 - distance);
    }
    center_points.push(shape.vertices[center]);
  }
  shape.computeFaceNormals();
  shape.computeVertexNormals();
  return center_points;
}
function addWater(ground, size) {
  var water = new Physijs.ConvexMesh(
    new THREE.CubeGeometry(1.4*size, 1.4*size, 10),
    Physijs.createMaterial(
      new THREE.MeshBasicMaterial({color: 0x0000bb}),
      0, //no friction (slippery)
      0.01 // not very bouncy at all
      ),
      0 //never move
      );
      water.position.z = -20;
      water.receiveShadow = true;
      ground.add(water);
}
function addLid(ground, size) {
  var lid = new Physijs.ConvexMesh(
    new THREE.CubeGeometry(size, size, 1),
    new THREE.MeshBasicMaterial({visible:false})
    );
}
function addScoreboard() {
  var scoreboard = new Scoreboard();
  scoreboard.score(0);
  scoreboard.timer();
  scoreboard.help(
    'left and right arrow keys to rotate your boat; ' +
    'spacebar to move forward.'
    );
    return scoreboard;
}
function addSunlight(scene) {
  var sunlight = new THREE.DirectionalLight();
  sunlight.intensity = 0.5;
  sunlight.castShadow = true;
  sunlight.position.set(250, 250, 250);
  sunlight.shadowCameraNear = 250;
  sunlight.shadowCameraFar = 600;
  sunlight.shadowCameraLeft = -200;
  sunlight.shadowCameraRight = 200;
  sunlight.shadowCameraTop = 200;
  sunlight.shadowCameraBottom = -200;
  sunlight.shadowMapWidth = 4096;
  sunlight.shadowMapHeight = 4096;
  scene.add(sunlight);
}


  // Animate motion in the game
  function animate() {
    requestAnimationFrame(animate);
    if(paused) return;
    updateCamera();
    renderer.render(scene, camera);
  }
  animate();

  // Run physics
  function gameStep() {
    // Update physics 60 times a second so that motion is smooth
    setTimeout(gameStep, 1000/60);
    if(paused) return;
    checkForGameOver();
    scene.simulate();
  }
  function checkForGameOver() {
    if(raft.position.x < 250) return;
    paused = true;
    scoreboard.stopTimer();
    scoreboard.message("You made it, well done!");
  }
  gameStep();
  var rot = 0;
  document.addEventListener('keydown', function(event) {
    var code = event.keyCode;
    if (code == 38) pushRaft();       //up key
    if (code == 37) rot = rot-0.5; rotateRaft(rot); //left
    if (code == 39)  rot = rot+0.5; rotateRaft(rot); //right
    if (code == 82) startGame(raft, river, scoreboard);
    // R (reset)
  });
  function pushRaft() {
    var angle = raft.rotation.z;
    raft.applyCentralForce(
      new THREE.Vector3(
        200*Math.cos(angle),
        0,
        -200*Math.sin(angle)
        )
        );
  }
  function rotateRaft(direction) {
    raft._dirtyRotation = true;
    raft.rotation.z = raft.rotation.z + direction * Math.PI/10;
  }
</script>
Chris_strom_headshot_200_pragsmall
21 Jun 2016, 04:00
Chris Strom (265 posts)

The main problem that you’re running into here is that raft.__dirtyRotation needs two underscores before dirtyRotation, not one. We ran into the same thing back in the cave puzzle game.

It’s an easy mistake to make, unfortunately, and, as you found out, not a simple one to track down. I think we’ve all made the same mistake and the best advice I can give to fix that kind of thing in the future is to notice that, no matter how you move the raft, it always resets back to the same position – that’s usually the physics engine preventing you from making a non-realistic movement, which is when… __dirty position or rotation is needed. Or just ask and hope someone else made the same mistake :D

The code isn’t quite there even with __dirtyRotation. The rotation won’t look quite right until the left and right keys in the keydown event listener match what’s in the book at the end of 20.4

That aside, this is a major project and you’ve got everything else looking great, so keep it up!

-Chris

Dubstepcat_300_pragsmall
21 Jun 2016, 21:44
Fin Lumsden (35 posts)

This is slightly different, but ICE is broken and I’m not sure what’s wrong. i searched the code and there was nothing.

<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","errorBeacon":"bam.nr-data.net","licenseKey":"4460760967","applicationID":"438659","transactionName":"cQ5YEkJeCFpTQEsWXEEVRUlRQjtbV0APAlxFDw==","queueTime":0,"applicationTime":7,"agent":""}</script>
<script type="text/javascript">window.NREUM||(NREUM={}),__nr_require=function(e,n,t){function r(t){if(!n[t]){var o=n[t]={exports:{}};e[t][0].call(o.exports,function(n){var o=e[t][1][n];return r(o||n)},o,o.exports)}return n[t].exports}if("function"==typeof __nr_require)return __nr_require;for(var o=0;o<t.length;o++)r(t[o]);return r}({1:[function(e,n,t){function r(e,n){return function(){o(e,[(new Date).getTime()].concat(a(arguments)),null,n)}}var o=e("handle"),i=e(2),a=e(3);"undefined"==typeof window.newrelic&&(newrelic=NREUM);var c=["setPageViewName","setCustomAttribute","finished","addToTrace","inlineHit"],u=["addPageAction"],f="api-";i(c,function(e,n){newrelic[n]=r(f+n,"api")}),i(u,function(e,n){newrelic[n]=r(f+n)}),n.exports=newrelic,newrelic.noticeError=function(e){"string"==typeof e&&(e=new Error(e)),o("err",[e,(new Date).getTime()])}},{}],2:[function(e,n,t){function r(e,n){var t=[],r="",i=0;for(r in e)o.call(e,r)&&(t[i]=n(r,e[r]),i+=1);return t}var o=Object.prototype.hasOwnProperty;n.exports=r},{}],3:[function(e,n,t){function r(e,n,t){n||(n=0),"undefined"==typeof t&&(t=e?e.length:0);for(var r=-1,o=t-n||0,i=Array(0>o?0:o);++r<o;)i[r]=e[n+r];return i}n.exports=r},{}],ee:[function(e,n,t){function r(){}function o(e){function n(e){return e&&e instanceof r?e:e?c(e,a,i):i()}function t(t,r,o){e&&e(t,r,o);for(var i=n(o),a=l(t),c=a.length,u=0;c>u;u++)a[u].apply(i,r);var s=f[m[t]];return s&&s.push([w,t,r,i]),i}function p(e,n){g[e]=l(e).concat(n)}function l(e){return g[e]||[]}function d(e){return s[e]=s[e]||o(t)}function v(e,n){u(e,function(e,t){n=n||"feature",m[t]=n,n in f||(f[n]=[])})}var g={},m={},w={on:p,emit:t,get:d,listeners:l,context:n,buffer:v};return w}function i(){return new r}var a="nr@context",c=e("gos"),u=e(2),f={},s={},p=n.exports=o();p.backlog=f},{}],gos:[function(e,n,t){function r(e,n,t){if(o.call(e,n))return e[n];var r=t();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(e,n,{value:r,writable:!0,enumerable:!1}),r}catch(i){}return e[n]=r,r}var o=Object.prototype.hasOwnProperty;n.exports=r},{}],handle:[function(e,n,t){function r(e,n,t,r){o.buffer([e],r),o.emit(e,n,t)}var o=e("ee").get("handle");n.exports=r,r.ee=o},{}],id:[function(e,n,t){function r(e){var n=typeof e;return!e||"object"!==n&&"function"!==n?-1:e===window?0:a(e,i,function(){return o++})}var o=1,i="nr@id",a=e("gos");n.exports=r},{}],loader:[function(e,n,t){function r(){if(!b++){var e=y.info=NREUM.info,n=s.getElementsByTagName("script")[0];if(e&&e.licenseKey&&e.applicationID&&n){u(m,function(n,t){e[n]||(e[n]=t)});var t="https"===g.split(":")[0]||e.sslForHttp;y.proto=t?"https://":"http://",c("mark",["onload",a()],null,"api");var r=s.createElement("script");r.src=y.proto+e.agent,n.parentNode.insertBefore(r,n)}}}function o(){"complete"===s.readyState&&i()}function i(){c("mark",["domContent",a()],null,"api")}function a(){return(new Date).getTime()}var c=e("handle"),u=e(2),f=window,s=f.document,p="addEventListener",l="attachEvent",d=f.XMLHttpRequest,v=d&&d.prototype;NREUM.o={ST:setTimeout,CT:clearTimeout,XHR:d,REQ:f.Request,EV:f.Event,PR:f.Promise,MO:f.MutationObserver},e(1);var g=""+location,m={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",agent:"js-agent.newrelic.com/nr-952.min.js"},w=d&&v&&v[p]&&!/CriOS/.test(navigator.userAgent),y=n.exports={offset:a(),origin:g,features:{},xhrWrappable:w};s[p]?(s[p]("DOMContentLoaded",i,!1),f[p]("load",r,!1)):(s[l]("onreadystatechange",o),f[l]("onload",r)),c("mark",["firstbyte",a()],null,"api");var b=0},{}]},{},["loader"]);</script><body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/physi.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script src="http://gamingJS.com/Scoreboard.js"></script>
<script>
  // Physics settings
  Physijs.scripts.ammo = 'http://gamingJS.com/ammo.js';
  Physijs.scripts.worker = 'http://gamingJS.com/physijs_worker.js';

  // This is where stuff in our game will happen:
  var scene = new Physijs.Scene({ fixedTimeStep: 2 / 60 });
  scene.setGravity(new THREE.Vector3( 0, -100, 0 ));

  // 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 = 100;
camera.position.y = 100;
camera.rotation.y = 0;
camera.rotation.x = 0;
scene.add(camera);

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  // ******** START CODING ON THE NEXT LINE ********
addSunlight(scene);
var scoreboard = addScoreboard();
var river = addRiver(scene);
var raft = addRaft(scene);
var paused;
startGame(raft, river, scoreboard);
function startGame(raft, river, scoreboard) {
  var start = river.river_points[100];
  raft.__dirtyPosition = true;
  raft.position.set(start.y, start.z + 100, 0);
  raft.setLinearVelocity(new THREE.Vector3());
  scoreboard.resetTimer();
  scoreboard.score(0);
  updateCamera();
  camera.lookAt(new THREE.Vector3(start.y, 0, 0));
  paused = false;
}
function updateCamera() {
  camera.position.set(
    raft.position.x + 75,
    raft.position.y + 40,
    raft.position.z
    );
}
function addRaft(scene) {
  var mesh = new Physijs.ConvexMesh(
    new THREE.TorusGeometry(2, 0.2, 8, 20),
    new THREE.MeshPhongMaterial({
      emissive: 0xcc2222,
      specular: 0xeeeeee
    }),
    0.1,
    0.01
    );
    mesh.rotation.x = -Math.PI/2;
    mesh.castShadow = true;
    scene.add(mesh);
    mesh.setAngularFactor(new THREE.Vector3(0, 0, 0));
    var rudder = new THREE.Mesh(
      new THREE.SphereGeometry(0.5),
      new THREE.MeshBasicMaterial({color: 0x000099})
      );
      rudder.position.set(3, 0, 0);
      mesh.add(rudder);
      return mesh;
}
function addRiver(scene) {
  var ground = makeGround(500);
  addRiver(ground, 500);
  addLid(ground, 500);
  scene.add(ground);
  return ground;
}
function makeGround(size) {
  var faces = 100;
  var shape = new THREE.PlaneGeometry(size, size, faces, faces);
  var river_points = digRiver(shape, faces + 1);
  var cover = Physijs.createMaterial(
    new THREE.MeshPhongMaterial({
      emissive: new THREE.Color(0x339933), //a little green
      specular: new THREE.Color(0x333333) //dark grey
    }),
   1, //hard to move across aka high friction
   0.1 //not bouncy
   );
   var ground = new Physijs.HeightfieldMesh(
     shape, cover, 0
     );
     ground.rotation.set(-Math.PI/2, 0.2, Math.PI/2);
     ground.receiveShadow = true;
     ground.castShadow = true;
     ground.river_points = river_points;
     return ground;
}
function digRiver(shape, size) {
  var center_points = [];
  for (var row=0; row<size; row++) {
    var center = Math.sin(3*Math.PI*row/size);
    center = center * 0.1 * size;
    center = Math.floor(center + size/2);
    center = row*size + center;
    for (var distance=0; distance<12; distance++) {
      shape.vertices[center + distance].z = -5 * (12 - distance);
      shape.vertices[center - distance].z = -5 * (12 - distance);
    }
    center_points.push(shape.vertices[center]);
  }
  shape.computeFaceNormals();
  shape.computeVertexNormals();
  return center_points;
}
function addLid(ground, size) {
  var lid = new Physijs.ConvexMesh(
    new THREE.CubeGeometry(size, size, 1),
    new THREE.MeshBasicMaterial({visible:false})
    );
}
function addScoreboard() {
  var scoreboard = new Scoreboard();
  scoreboard.score(0);
  scoreboard.timer();
  scoreboard.help(
    'left and right arrow keys to rotate your boat; ' +
    'spacebar to move forward.'
    );
    return scoreboard;
}
function addSunlight(scene) {
  var sunlight = new THREE.DirectionalLight();
  sunlight.intensity = 0.5;
  sunlight.castShadow = true;
  sunlight.position.set(250, 250, 250);
  sunlight.shadowCameraNear = 250;
  sunlight.shadowCameraFar = 600;
  sunlight.shadowCameraLeft = -200;
  sunlight.shadowCameraRight = 200;
  sunlight.shadowCameraTop = 200;
  sunlight.shadowCameraBottom = -200;
  sunlight.shadowMapWidth = 4096;
  sunlight.shadowMapHeight = 4096;
  scene.add(sunlight);
}


  // Animate motion in the game
  function animate() {
    requestAnimationFrame(animate);
    if(paused) return;
    updateCamera();
    renderer.render(scene, camera);
  }
  animate();

  // Run physics
  function gameStep() {
    // Update physics 60 times a second so that motion is smooth
    setTimeout(gameStep, 1000/60);
    if(paused) return;
    checkForGameOver();
    scene.simulate();
  }
  function checkForGameOver() {
    if(raft.position.x < 250) return;
    paused = true;
    scoreboard.stopTimer();
    scoreboard.message("You made it, well done!");
  }
  gameStep();
  document.addEventListener('keydown', function(event) {
    var code = event.keyCode;
    if (code == 38) pushRaft();       //up key
    if (code == 37) rotateRaft(-1); //left
    if (code == 39) rotateRaft(1); //right
    if (code == 82) startGame(raft, river, scoreboard);
    // R (reset)
  });
  function pushRaft() {
    var angle = raft.rotation.z;
    raft.applyCentralForce(
      new THREE.Vector3(
        20*Math.cos(angle),
        0,
        -20*Math.sin(angle)
        )
        );
  }
  function rotateRaft(direction) {
    raft.__dirtyRotation = true;
    raft.rotation.z = raft.rotation.z + direction * Math.PI/10;
  }
</script>

Thanks for the help on dirty rotation.

Chris_strom_headshot_200_pragsmall
22 Jun 2016, 03:38
Chris Strom (265 posts)

There’s really only one problem in that code. It’ll require a little more effort than usual to fix, but it’s not too much. First, you’re going to have to use ICE’s edit-only mode. See section 2.6 in the book for that.

Once in edit-only mode, you can fix main problem, which is that the addRiver() function calls the addRiver() function:

function addRiver(scene) {
  var ground = makeGround(500);
  addRiver(ground, 500);
  addLid(ground, 500);
  scene.add(ground);
  return ground;
}

.

If you’ll double check the book, you’ll see that the third line is supposed to be addWater(), not addRiver(). Once you have that fixed in edit-only mode, you can switch back to regular mode and continue fixing things.

Next up, you need to add the function addRiver() definition – either the empty definition early in the chapter or the complete definition.

Once you have those two things fixed, you should be back in good shape. The rest of this reply may help explain the problem caused by that bit of code, but feel free to read it later if you just want to get your code working as quickly as possible :)

Tracking this down is not easy. In edit-only mode, I commented out different things, switched back to regular mode, then if the problem was still there, I went back to edit-only mode to change what was commented out. It takes some time to do that, but eventually, you find the problem.

As for why calling addRiver() from within the addRiver() function was causing a problem… it was calling the function without taking a break, not letting the browser do anything else. It even prevented ICE from doing anything! We do the call the function from within itself a bunch – both animate() and gameStep() in this project both call themselves. The difference is that both take a break before calling themselves. The animate() function does the requestAnimationFrame(), which tells the browser that it should do whatever it needs to before animating the next frame. The gameStep() function uses setTimeout() to wait a few milliseconds before calling itself. In both cases, the browser could animate the game and let ICE update code during those breaks. but without a break in addRiver() the browser couldn’t do anything else but keep calling addRiver().

Hopefully that helps explain things and gets you back on track. You’re nearly there – good luck!

-Chris

Chris_strom_headshot_200_pragsmall
24 Jun 2016, 00:38
Chris Strom (265 posts)

I’m happy to answer any more questions you might have. I’m sure you’d like to figure things out on your own, but if you get stuck or frustrated, don’t worry about bothering me. I really do like answering questions – especially from new programmers working hard to learn this stuff!

Really :D

-Chris

Dubstepcat_300_pragsmall
26 Jun 2016, 00:03
Fin Lumsden (35 posts)

I have two questions - what is the ammo thing that you get from the source near the top:

Physijs.scripts.ammo = 'http://gamingJS.com/ammo.js';

And question two - how do you add more complex texture (such as images) to 3D objects?(that was my main question)

Chris_strom_headshot_200_pragsmall
26 Jun 2016, 03:38
Chris Strom (265 posts)

Good questions both :)

The ammo.js stuff is a little weird. It’s a physics engine just like PhysiJS is a physics engine. Ammo.js is the physics engine PhysiJS is built on top of. The ammo.js physics engine is a more general purpose physics engine that was converted from other programming languages to run in JavaScript. PhysiJS builds on that and also works well with Three.js, which does all of the 3D rendering.

The line at the top tells PhysiJS to use ammo.js instead of other physics engines which work, but not as well as ammo.js. Like I said, it’s all a little weird, but hopefully that explains it a little.

As for the second question, yup, we did that in the Purple Fruit Monster game. The key is the THREE.ImageUtils code in that chapter. We used it to load fruit and monster crayon drawings direct from gamingjs.com, but THREE.ImageUtils can load images from elsewhere on the internet – either from your own web server or a public site.

If you’re looking to explore that, stick with 2d shapes like the Purple Fruit Monster Game or simple blocks like Minecraft. More complex shapes are a pain to image map.

Hope that answers your questions!

-Chris

Dubstepcat_300_pragsmall
26 Jun 2016, 14:41
Fin Lumsden (35 posts)

Thanks! I’ll try that now and soon I’m planning to attempt a simple legend of zelda type thing - VERY SIMPLE COMPARED TO THE REAL THING. Thanks again for the help!

Dubstepcat_300_pragsmall
01 Jul 2016, 01:29
Fin Lumsden (35 posts)

Sorry ‘bout this, but I was testing with a simple piece of code to move an avatar (it was modified from fruit hunt), and with my <p> ~~~ keydown ~~~ <p> sensor thing, the WASD wasn’t turning back to facing forwards. here’s my code

<body></body>
<script src="http://gamingJS.com/Tween.js"></script>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<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 not_allowed=[];
  var marker =new THREE.Object3D();
  scene.add (marker);
  var cover= new
  THREE.MeshNormalMaterial(0x0099cc);
  var body=new 
  THREE.SphereGeometry(100);
  
  var avatar=new
  THREE.Mesh(body, cover);
  marker.add(avatar);
  
  // add right hand 
  var hand=new
  THREE.SphereGeometry(50);
  var right_hand =new
  THREE.Mesh(hand,cover);
  right_hand.position.set(-140, -20, 0);
  avatar.add(right_hand);
  
  // add left hand 
  var left_hand=new
  THREE.Mesh(hand,cover);
  left_hand.position.set(140, -20, 0);
  avatar.add(left_hand);
  
 // add right foot
  var right_foot=new
  THREE.Mesh(hand,cover);
  right_foot.position.set(80,-120, 0);
  avatar.add(right_foot);
  
// add left foot
  var left_foot=new 
  THREE.Mesh(hand,cover);
  left_foot.position.set(-80,-120, 0);
  avatar.add(left_foot);
  
//Add camera to marker
  marker.add(camera);

//make trees
  makeTreeAt( 500, 0); 
  makeTreeAt(-500, 0);
  makeTreeAt( 750, -1000);
  makeTreeAt(-750, -1000);
//make buildings
  makeBuildingAt(1250, 1250);
  
 function makeBuildingAt(x, z) {
   var block = new
    THREE.Mesh( new THREE.CubeGeometry(300),
    new
    THREE.MeshBasicMaterial({color:0x228B22})
    );
    var top=new 
    THREE.Mesh(new THREE.PlaneGeometry(150),
    new
    THREE.MeshBasicMaterial({color:0x228B22}));
    
    top.position.y=175;
    
    block.add(top);
    var boundary=new THREE.Mesh(new THREE.CubeGeometry(300),new THREE.MeshNormalMaterial());
    boundary.position.y= -100;
    boundary.rotation.x= -Math.PI/2;
    block.add(boundary);
    not_allowed.push(boundary);
    console.log('not_allowed.length' + not_allowed.length.toString());
    block.position.set(x, -75, z);
    scene.add(block);
 }
    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);
    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);
    not_allowed.push(boundary);
    console.log('not_allowed.length' + not_allowed.length.toString());
    trunk.position.set(x, -75, z);
    scene.add(trunk);
  }
  
  // Now, show what the camera sees on the screen:
  var clock=new 
  THREE.Clock(true);
  
  function animate() {
    requestAnimationFrame(animate);
    walk();
    TWEEN.update();
    turn();
    acrobatics();
    renderer.render(scene, camera);
  }
  animate();
    //Avatar walking
    function walk() {
    if (!isWalking()) return;  
    var position=
    Math.sin(clock.getElapsedTime()*5)*50;
    
    right_hand.position.z=position;
    left_hand.position.z=-position;
    left_foot.position.z=-position;
    right_foot.position.z=position;
    console.log('hands are moving');
    if (detectCollisions===true){
      console.log('hands have stopped moving');
      isWalking=false;
    }
    
  }
  //later I might want to add Math.PI to this function
  function turn() {
    var direction=0;
    if (is_moving_forward) marker.rotation.z=0,marker.rotation.x=0, direction=0;
    if (is_moving_back ) marker.rotation.z=0,marker.rotation.x=0,direction=Math.PI;
    if (is_moving_right) marker.rotation.z=0,marker.rotation.x=0,direction= -Math.PI/2;
    if (is_moving_left) marker.rotation.z=0,marker.rotation.x=0,direction= Math.PI/2;
    spinAvatar(direction);
    
  }
  
  function spinAvatar(direction) {
  new TWEEN.
  Tween({y: marker.rotation.y}).
  to({y: direction}, 1000).
  onUpdate (function () {marker.rotation.y=this.y;}).
  start();
  }
  
  var is_cartwheeling=false;
   var is_flipping=false;
   
   function acrobatics() {
  if (is_cartwheeling){
    marker.rotation.z=
    marker.rotation.z + 0.1;
    }
    if (is_flipping){
    marker.rotation.x=
    marker.rotation.x+0.1;
    }}

 // listen for keypress events 
 var is_moving_right,
     is_moving_left,
     is_moving_forward,
     is_moving_back,
     is_cartwheeling,
     is_flipping;
     
 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;
   if (is_cartwheeling)return true;
   if (is_flipping)return true;
   return false;
   }
 document.addEventListener('keydown',
 function(event) {
 
  var code=event.keyCode;
  console.log('Pressed' + code);
  
  if (code==37||code==65)
  {
   console.log('going left');
   marker.position.x=
   marker.position.x-10;
    is_moving_left=true;
   }
 
  if(code==38||code==87)
  {
    console.log('going forwards');
    marker.position.z=
    marker.position.z-10;
    is_moving_forward=true;
    
  }
  
  if(code==39||code==68)
  {
    console.log('going right');
    marker.position.x=
    marker.position.x+10;
    is_moving_right=true;
  }
  
  if(code==40||code==83)
  {
    console.debug('going backwards');
    marker.position.z= 
    marker.position.z+10;
    is_moving_back=true;
   
  }
  
  if(code==67) is_cartwheeling= !is_cartwheeling;
 
  if (code==70) is_flipping= !is_flipping;
 
   if (detectCollisions())
   {
     console.log('Into detect collisions');
     console.log('marker_x:' + marker.position.x.toString());
     console.log('marker_y:' + marker.position.y.toString());
      if (is_moving_left)
      {
        console.log('we are moving left...so move the marker 5 points right...');
        marker.position.x=marker.position.x+10;
      }
      
      if (is_moving_right)
      {
        console.log('we are moving right...so move the marker 5 points left...');
        marker.position.x=marker.position.x-10;
      }
        
      
      if (is_moving_forward)
      {
        console.log('we are moving forward...so move the marker 5 points back...');      
        marker.position.z=marker.position.z+10;
      }
      
      if (is_moving_back)
      {
        console.log('we are moving back...so move the marker 5 points forward...');  
        marker.position.z=marker.position.z-10;
      }
        
   }
 });
 
 
 
 document.addEventListener('keyup',
 function(event) {
   var coder=event.keyCode;
   if(coder==37&&coder==65) is_moving_left =false;
   if (coder==38&&coder==87) is_moving_forward= false;
   if (coder==39&&coder==68)is_moving_right= false;
   if (coder==40&&coder==83)is_moving_back= false;
   if (coder==67)is_cartwheeling= false;
   if (coder==70)is_flipping= false;
 });
 
 function detectCollisions() {
   console.log('Into detect collisions');
   var vector = new THREE.Vector3(0, -1, 0);
   var ray = new THREE.Ray(marker.position,vector);
   var intersects= ray.intersectObjects(not_allowed);
   console.log('intersects' + intersects.length.toString());
   if (intersects.length > 0) 
   {
     console.log('We ave got a collision..');
     return true; 
   }
   else
   {
     console.log('No collision so keep moving...');
     return false;
   }
 }
 if (detectCollisions()) {
    isWalking=false;
 }
 
</script>
Chris_strom_headshot_200_pragsmall
01 Jul 2016, 03:34
Chris Strom (265 posts)

No worries! I think your spinAvatar() function is the source of the trouble. You might want to quickly re-read chapter 8 for the details, but the main idea is that spinAvatar() should spin the avatar, not the marker. So that function should look like:

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

.

Again, if you want to better understand what you were seeing the other way, a quick re-read of chapter 8 should help.

Another note, I think your keyup listener should be using “ors” instead of “ands”. That is the conditional checks for stopping moving left should be:

   if (coder==37 || coder==65) is_moving_left =false;

.

That is, you want to stop moving left if the left arrow key is released or the “a” key is released. Currently, it’s coder==37&&coder==65, which is only true if the “a” key and the left arrow key are released simultaneously.

Hope that helps. Let me know if you run into anything else :)

-Chris

Dubstepcat_300_pragsmall
01 Jul 2016, 18:43
Fin Lumsden (35 posts)

Uh… Well because it was modified, I wanted the avatar to spin like that, although he doesn’t spin back. Also, if it’s left arrow and a, then it resets when neither is being pressed, but if it’s an or statement, it will reset if neither are pressed, meaning that whilst I move, the rotation will be wrong. Thanks for trying

Chris_strom_headshot_200_pragsmall
02 Jul 2016, 18:39
Chris Strom (265 posts)

I may be misunderstanding what you’re trying to do (so please excuse me is this is unhelpful), but I think you really want the ORs in the keyup listener:

 document.addEventListener('keyup',
 function(event) {
   var coder=event.keyCode;
   if (coder==37 || coder==65) is_moving_left =false;
   if (coder==38 || coder==87) is_moving_forward= false;
   if (coder==39 || coder==68)is_moving_right= false;
   if (coder==40 || coder==83)is_moving_back= false;
   if (coder==67)is_cartwheeling= false;
   if (coder==70)is_flipping= false;
 });

.

The keyup listener function is waiting for a single key to be released. If the key that is released (that goes up) is the left arrow or the “a” key, then the above would set is_moving_left to false.

Checking for coder==37&&coder==65 will never happen. This is checking for the coder variable to be equal to both 37 and 65 at the same time – it can only be equal to one thing at a time. Hopefully I’m explaining that well and it make sense.

If I change the keyup listener to the above code, then the avatar moves in the correct direction with the arrow keys and WASD. It also spins back to face forward when the key being held down is released. I think that’s what you’re trying to accomplish, but again, if I am misunderstanding your aim here, let me know and I’ll be happy to try again :)

-Chris

Dubstepcat_300_pragsmall
03 Jul 2016, 13:31
Fin Lumsden (35 posts)

Sorry for the confusion. I never thought about the fact that it was a variable until now. Thanks, and one last thing - for a smooth turn - but not only towards North, South, East or West - should I have a variable, which is multiplied by two to make the # that Math.PI is divided by, and on the move forwards function, you tell it to change marker.position.z by 10/(the variable). I hope that is right, if it is then would I do the same for the marker.position.x, except this time I do the variable that is divided - 1 etc.

Hopefully that isn’t too confusing for you.

Chris_strom_headshot_200_pragsmall
03 Jul 2016, 19:55
Chris Strom (265 posts)

Yup, I’m confused :)

One way or another, I’d suggest to just experiment with the numbers to see what works best. But if you’re having trouble figuring out the best approach, can you provide a little more detail what you’re trying to accomplish? The Tween code should already make turning smooth, so I’m guessing you’re looking for something else. Faster? Should the camera and avatar rotate at different speeds? Something else?

Sorry to answer your question with some of my own, but happy to help where I can!

-Chris

Dubstepcat_300_pragsmall
04 Jul 2016, 19:47
Fin Lumsden (35 posts)

What I’m asking is whether there is a way for the avatar to turn at unusual angles. Sorry for the confusion :)

Chris_strom_headshot_200_pragsmall
05 Jul 2016, 00:19
Chris Strom (265 posts)

It’s possible, but what key would you press to move forward and to the right? I think you’re talking about WAXD keys, which would mean that you’d no longer let players use the arrow keys. Right?

If the E key is front-right movement, you’d make that direction Math.PI/4. The Q key would be front-left movement, which you’d make 3*Math.PI/4 and so on around the keys.

Another approach is that A and D no longer move left and right, but instead rotate the avatar in small increments around the y-axis. Then, when the A or D key is released the avatar continues to face in the direction it faced when rotating stopped. At that point, W and S can move the avatar forward and back. Hopefully that makes sense?

I think WAXD is closer to what you’re talking about – hopefully that answers your question and give you an idea how to approach it. Let me know if you have any other questions :)

-Chris

Dubstepcat_300_pragsmall
09 Jul 2016, 00:36
Fin Lumsden (35 posts)

This is probably getting annoying, but how can you clear the text box used for log messaging?

Chris_strom_headshot_200_pragsmall
09 Jul 2016, 03:09
Chris Strom (265 posts)

I think you’re asking about the JavaScript console. If you meant something else, let me know. In the console, just under the “Console” tab, there’s a circle icon with a line through it. Click that to clear the console.

You can also do any of:

  • Right-click or Ctrl-click anywhere in the Console and choose Clear Console from the context menu that appears.
  • Enter the clear() Command Line API at the shell prompt.
  • Invoke console.clear() Console API from JavaScript.
  • Use the keyboard shortcut Cmd + K, ^ + L (Mac) Ctrl + L (Windows and Linux).

More info on the console is available at: https://developer.chrome.com/devtools/docs/console#clearing-the-console-history.

If you meant a different log, let me know and I’ll be happy to help :)

-Chris

Dubstepcat_300_pragsmall
09 Jul 2016, 13:26
Fin Lumsden (35 posts)

Well, what I meant was in the chapter Functions:Use and Use Again, where it was about log messaging, because in a game it would because it:

1.looks nicer than scoreboard messages 2.is able to display larger sections of text 3.can be in different colours

so what i was asking, is whether you can clear the log messaging box, meaning I don’t have to make the person scroll down the text box - do you see my point? Also on the recursion part of that section there is a small error where it says in the paragraph below the code that it has the function ~~~ hello! ~~~ , when it doesn’t actually call it hello!, in the section of code

Dubstepcat_300_pragsmall
09 Jul 2016, 13:33
Fin Lumsden (35 posts)

this is more to help you, but in the inspect element area of google, there is a colour picker which can help get colours for when coding - I always use it

Chris_strom_headshot_200_pragsmall
09 Jul 2016, 20:23
Chris Strom (265 posts)

Ah, I think you can say log.innerHTML = ''; to clear the message box. If that doesn’t work, I may need to see the code to see how best to do it.

Thanks for the tips – I’ll include them in my notes for the next edition!

-Chris

Dubstepcat_300_pragsmall
15 Jul 2016, 16:25
Fin Lumsden (35 posts)

Thank you! I haven’t been on for several days, but now I’ve went back to using part of the fruit hunt code in an attempt to get a forest of pine trees, although there’s one problem - the ground. please could you tell me how to rotate it correctly, because after maybe half an hour of trying numbers I couldn’t get it :( Here is my code

<body></body>
<script src="http://gamingJS.com/Tween.js"></script>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>

<script>
var id = 0;
var speech = ["", ""];
  
   
  // 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);
  document.body.style.backgroundColor = "#2bd041";
  

  // ******** START CODING ON THE NEXT LINE ********
  code();
  function code() {
  var view=true;
  var is_moving_ne=0;
  var is_moving_se=0;
  var is_moving_nw=0;
  var is_moving_sw=0;
  var not_allowed=[];
  var marker =new THREE.Object3D();
  scene.add (marker);
  var cover= new
  THREE.MeshNormalMaterial(0x0099cc);
  var body=new 
  THREE.CubeGeometry(100, 125, 150);
  
  var avatar=new
  THREE.Mesh(body, cover);
  marker.add(avatar);
  
  // add right hand 
  var hand=new
  THREE.CubeGeometry(50, 60, 50);
  var right_shoulder =new
  THREE.Object3D();
  var right_hand =new
  THREE.Mesh(hand,cover);
  right_hand.position.set(-80, -10, 0);
  avatar.add(right_hand);
  
  // add left hand 
  var left_hand=new
  THREE.Mesh(hand,cover);
  left_hand.position.set(80, -10, 0);
  avatar.add(left_hand);
  
 // add right foot
  var right_foot=new
  THREE.Mesh(hand,cover);
  right_foot.position.set(35,-120, 0);
  avatar.add(right_foot);
  
// add left foot
  var left_foot=new 
  THREE.Mesh(hand,cover);
  left_foot.position.set(-35,-120, 0);
  avatar.add(left_foot);
  
//Add camera to marker
  marker.add(camera);

//make trees
  makeTreeAt( 500, 0); 
  makeTreeAt(-500, 0);
  makeTreeAt( 500, -1000);
  makeTreeAt(-500, -1000);
  makeTreeAt(1500, 0);
  makeTreeAt(-1500, 0);
  makeTreeAt(1500, -1000);
  makeTreeAt(-1500, -1000);
  makeTreeAt(500, -2000);
  makeTreeAt(-500, -2000);
  makeTreeAt(1500, -2000);
  makeTreeAt(-1500, -2000);
  makeTreeAt( 500, -2000); 
  makeTreeAt(-500, -2000);
  makeTreeAt( 500, -3000);
  makeTreeAt(-500, -3000);
  makeTreeAt(1500, -2000);
  makeTreeAt(-1500, -2000);
  makeTreeAt(1500, -3000);
  makeTreeAt(-1500, -3000);
  makeTreeAt(500, -4000);
  makeTreeAt(-500, -4000);
  makeTreeAt(1500, -4000);
  makeTreeAt(-1500, -4000);
  addGround();
  
  function addGround()
  {var ground = new
  THREE.Mesh(new THREE.CubeGeometry(4000, 4000, 3000, 400),
  new
  THREE.MeshBasicMaterial({color:0x22a92d})
  );
  ground.position.y = -175;
  ground.rotation.x = -Math.PI;
  ground.rotation.y = Math.PI;
  ground.rotation.z = 0;
  scene.add(ground);
  }
//make buildings
  makeBuildingAt(1250, 1250);
  
 function makeBuildingAt(x, z) {
   var block = new
    THREE.Mesh( new THREE.CubeGeometry(300),
    new
    THREE.MeshBasicMaterial({color:0x228B22})
    );
    var top=new 
    THREE.Mesh(new THREE.PlaneGeometry(150),
    new
    THREE.MeshBasicMaterial({color:0x228B22}));
    
    top.position.y=175;
    
    block.add(top);
    var boundary=new THREE.Mesh(new THREE.CubeGeometry(300),new THREE.MeshNormalMaterial());
    boundary.position.y= -100;
    boundary.rotation.x= -Math.PI/2;
    block.add(boundary);
    not_allowed.push(boundary);
    console.log('not_allowed.length' + not_allowed.length.toString());
    block.position.set(x, -75, z);
    scene.add(block);
 }
    function makeTreeAt(x, z) {
    var trunk = new
    THREE.Mesh( new THREE.CylinderGeometry(40 ,50, 210),
    new
    THREE.MeshBasicMaterial({color:0x4e3c13})
    );
    var top1=new 
    THREE.Mesh(new THREE.CylinderGeometry(1, 200, 1010),
    new
    THREE.MeshBasicMaterial({color:0x05400d}));
    
    top1.position.y=610;
    
    trunk.add(top1);
    if(Math.random>0.4) {
    var top2=new 
    THREE.Mesh(new THREE.CylinderGeometry(1, 200, 1010),
    new
    THREE.MeshBasicMaterial({color:0x05400d}));
    
    top2.position.y=610;
    
    trunk.add(top2);}
     var boundary=new THREE.Mesh(new THREE.CircleGeometry(300),new THREE.MeshBasicMaterial({color:0x2bd049 }));
    boundary.position.y= -100;
    boundary.rotation.x= -Math.PI/2;
    trunk.add(boundary);
    not_allowed.push(boundary);
    console.log('not_allowed.length' + not_allowed.length.toString());
    trunk.position.set(x, -75, z);
    var roots=new THREE.Mesh(new THREE.CircleGeometry(150),new THREE.MeshBasicMaterial({color:0x4e3c13}));
    trunk.add(roots);
    roots.rotation.x = -Math.PI/2;
    roots.position.y = -90;
   
    scene.add(trunk);
  }
  
  // Now, show what the camera sees on the screen:
  var clock=new 
  THREE.Clock(true);
  
  function animate() {
    requestAnimationFrame(animate);
    walk();
    TWEEN.update();
    turn();
    acrobatics();
    renderer.render(scene, camera);
  }
  animate();
    //Avatar walking
    function walk() {
    if (!isWalking()) return;  
    var position=
    Math.sin(clock.getElapsedTime()*5)*50;
    
    right_hand.position.z=position;
    left_hand.position.z=-position;
    left_foot.position.z=-position;
    right_foot.position.z=position;
    console.log('hands are moving');
    if (detectCollisions===true){
      console.log('hands have stopped moving');
      isWalking=false;
    }
    
  }
  //later I might want to add Math.PI to this function
  function turn() {
    var direction=0;
    if (is_moving_ne) marker.rotation.z=0,marker.rotation.x=0, direction=-Math.PI/4;
    if (is_moving_forward) marker.rotation.z=0,marker.rotation.x=0, direction=0;
    if (is_moving_back ) marker.rotation.z=0,marker.rotation.x=0,direction=Math.PI;
    if (is_moving_right) marker.rotation.z=0,marker.rotation.x=0,direction= -Math.PI/2;
    if (is_moving_left) marker.rotation.z=0,marker.rotation.x=0,direction= Math.PI/2;
    spinAvatar(direction);
    
  }
  
  function spinAvatar(direction) {
  new TWEEN.
  Tween({y: marker.rotation.y}).
  to({y: direction}, 1000).
  onUpdate (function () {marker.rotation.y=this.y;}).
  start();
  }
  
  var is_cartwheeling=false;
   var is_flipping=false;
   
   function acrobatics() {
  if (is_cartwheeling){
    marker.rotation.z=
    marker.rotation.z + 0.1;
    }
    if (is_flipping){
    marker.rotation.x=
    marker.rotation.x+0.1;
    }}

 // listen for keypress events 
 var is_moving_right,
     is_moving_left,
     is_moving_forward,
     is_moving_back,
     is_cartwheeling,
     is_flipping;
     
 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;
   if (is_cartwheeling)return true;
   if (is_flipping)return true;
   if (view){
     camera.position.z=avatar.position.z+500;
   }
   if (!view){
     camera.position.z=avatar.position.z+10;
   }
   return false;
   
   }
 document.addEventListener('keydown',
 function(event) {
 
  var code=event.keyCode;
  console.log('Pressed' + code);
  
  if (code==32)
  {new TWEEN
  .Tween({jump: 0})
  .to({jump: Math.PI}, 500)
  .onUpdate (function () {
    marker.position.y = 200* Math.sin(this.jump);
  });
  }
  
  if (code==16)
  {view=!view;
  }
  
  if (code==37||code==65)
  {
   console.log('going left');
   marker.position.x=
   marker.position.x-10;
    is_moving_left=true;
   }
 
  if(code==38||code==87)
  {
    console.log('going forwards');
    marker.position.z=
    marker.position.z-10;
    is_moving_forward=true;
    
  }
  
  if(code==39||code==68)
  {
    console.log('going right');
    marker.position.x=
    marker.position.x+10;
    is_moving_right=true;
  }
  
  if(code==40||code==83)
  {
    console.debug('going backwards');
    marker.position.z= 
    marker.position.z+10;
    is_moving_back=true;
   
  }
  if(code==69||code==33)
  {
    console.debug('going NE');
    marker.position.z= 
    marker.position.z-10;
    marker.position.x=marker.position.x+10;
    is_moving_ne=true;
   
  }
  if(code==69||code==33)
  {
    console.debug('going NW');
    marker.position.z= 
    marker.position.z-10;
    marker.position.x=marker.position.x+10;
    is_moving_ne=true;
   
  }
  if(code==67) is_cartwheeling= !is_cartwheeling;
 
  if (code==70) is_flipping= !is_flipping;
 
   if (detectCollisions())
   {
     console.log('Into detect collisions');
     console.log('marker_x:' + marker.position.x.toString());
     console.log('marker_y:' + marker.position.y.toString());
      if (is_moving_left)
      {
        console.log('we are moving left...so move the marker 5 points right...');
        marker.position.x=marker.position.x+10;
      }
      
      if (is_moving_right)
      {
        console.log('we are moving right...so move the marker 5 points left...');
        marker.position.x=marker.position.x-10;
      }
        
      
      if (is_moving_forward)
      {
        console.log('we are moving forward...so move the marker 5 points back...');      
        marker.position.z=marker.position.z+10;
      }
      
      if (is_moving_back)
      {
        console.log('we are moving back...so move the marker 5 points forward...');  
        marker.position.z=marker.position.z-10;
      }
        
   }
 });
 
 
 
 document.addEventListener('keyup',
 function(event) {
   var coder=event.keyCode;
   if(coder==69||coder==33) is_moving_ne= false;
   if(coder==37||coder==65) is_moving_left =false;
   if (coder==38||coder==87) is_moving_forward= false;
   if (coder==39||coder==68)is_moving_right= false;
   if (coder==40||coder==83)is_moving_back= false;
   if (coder==67)is_cartwheeling= false;
   if (coder==70)is_flipping= false;
 });
 
 function detectCollisions() {
   console.log('Into detect collisions');
   var vector = new THREE.Vector3(0, -1, 0);
   var ray = new THREE.Ray(marker.position,vector);
   var intersects= ray.intersectObjects(not_allowed);
   console.log('intersects' + intersects.length.toString());
   if (intersects.length > 0) 
   {
     console.log('We ave got a collision..');
     return true; 
   }
   else
   {
     console.log('No collision so keep moving...');
     return false;
   }
 }
 if (detectCollisions()) {
    isWalking=false;
 }
  }
</script>

PS the background is meant to be green and the code is meant to be in that function for when I add a title screen

Dubstepcat_300_pragsmall
15 Jul 2016, 16:26
Fin Lumsden (35 posts)

Thank you! I haven’t been on for several days, but now I’ve went back to using part of the fruit hunt code in an attempt to get a forest of pine trees, although there’s one problem - the ground. please could you tell me how to rotate it correctly, because after maybe half an hour of trying numbers I couldn’t get it :( Here is my code

<body></body>
<script src="http://gamingJS.com/Tween.js"></script>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>

<script>
var id = 0;
var speech = ["", ""];
  
   
  // 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);
  document.body.style.backgroundColor = "#2bd041";
  

  // ******** START CODING ON THE NEXT LINE ********
  code();
  function code() {
  var view=true;
  var is_moving_ne=0;
  var is_moving_se=0;
  var is_moving_nw=0;
  var is_moving_sw=0;
  var not_allowed=[];
  var marker =new THREE.Object3D();
  scene.add (marker);
  var cover= new
  THREE.MeshNormalMaterial(0x0099cc);
  var body=new 
  THREE.CubeGeometry(100, 125, 150);
  
  var avatar=new
  THREE.Mesh(body, cover);
  marker.add(avatar);
  
  // add right hand 
  var hand=new
  THREE.CubeGeometry(50, 60, 50);
  var right_shoulder =new
  THREE.Object3D();
  var right_hand =new
  THREE.Mesh(hand,cover);
  right_hand.position.set(-80, -10, 0);
  avatar.add(right_hand);
  
  // add left hand 
  var left_hand=new
  THREE.Mesh(hand,cover);
  left_hand.position.set(80, -10, 0);
  avatar.add(left_hand);
  
 // add right foot
  var right_foot=new
  THREE.Mesh(hand,cover);
  right_foot.position.set(35,-120, 0);
  avatar.add(right_foot);
  
// add left foot
  var left_foot=new 
  THREE.Mesh(hand,cover);
  left_foot.position.set(-35,-120, 0);
  avatar.add(left_foot);
  
//Add camera to marker
  marker.add(camera);

//make trees
  makeTreeAt( 500, 0); 
  makeTreeAt(-500, 0);
  makeTreeAt( 500, -1000);
  makeTreeAt(-500, -1000);
  makeTreeAt(1500, 0);
  makeTreeAt(-1500, 0);
  makeTreeAt(1500, -1000);
  makeTreeAt(-1500, -1000);
  makeTreeAt(500, -2000);
  makeTreeAt(-500, -2000);
  makeTreeAt(1500, -2000);
  makeTreeAt(-1500, -2000);
  makeTreeAt( 500, -2000); 
  makeTreeAt(-500, -2000);
  makeTreeAt( 500, -3000);
  makeTreeAt(-500, -3000);
  makeTreeAt(1500, -2000);
  makeTreeAt(-1500, -2000);
  makeTreeAt(1500, -3000);
  makeTreeAt(-1500, -3000);
  makeTreeAt(500, -4000);
  makeTreeAt(-500, -4000);
  makeTreeAt(1500, -4000);
  makeTreeAt(-1500, -4000);
  addGround();
  
  function addGround()
  {var ground = new
  THREE.Mesh(new THREE.CubeGeometry(4000, 4000, 3000, 400),
  new
  THREE.MeshBasicMaterial({color:0x22a92d})
  );
  ground.position.y = -175;
  ground.rotation.x = -Math.PI;
  ground.rotation.y = Math.PI;
  ground.rotation.z = 0;
  scene.add(ground);
  }
    function makeTreeAt(x, z) {
    var trunk = new
    THREE.Mesh( new THREE.CylinderGeometry(40 ,50, 210),
    new
    THREE.MeshBasicMaterial({color:0x4e3c13})
    );
    var top1=new 
    THREE.Mesh(new THREE.CylinderGeometry(1, 200, 1010),
    new
    THREE.MeshBasicMaterial({color:0x05400d}));
    
    top1.position.y=610;
    
    trunk.add(top1);
    if(Math.random>0.4) {
    var top2=new 
    THREE.Mesh(new THREE.CylinderGeometry(1, 200, 1010),
    new
    THREE.MeshBasicMaterial({color:0x05400d}));
    
    top2.position.y=610;
    
    trunk.add(top2);}
     var boundary=new THREE.Mesh(new THREE.CircleGeometry(300),new THREE.MeshBasicMaterial({color:0x2bd049 }));
    boundary.position.y= -100;
    boundary.rotation.x= -Math.PI/2;
    trunk.add(boundary);
    not_allowed.push(boundary);
    console.log('not_allowed.length' + not_allowed.length.toString());
    trunk.position.set(x, -75, z);
    var roots=new THREE.Mesh(new THREE.CircleGeometry(150),new THREE.MeshBasicMaterial({color:0x4e3c13}));
    trunk.add(roots);
    roots.rotation.x = -Math.PI/2;
    roots.position.y = -90;
   
    scene.add(trunk);
  }
  
  // Now, show what the camera sees on the screen:
  var clock=new 
  THREE.Clock(true);
  
  function animate() {
    requestAnimationFrame(animate);
    walk();
    TWEEN.update();
    turn();
    acrobatics();
    renderer.render(scene, camera);
  }
  animate();
    //Avatar walking
    function walk() {
    if (!isWalking()) return;  
    var position=
    Math.sin(clock.getElapsedTime()*5)*50;
    
    right_hand.position.z=position;
    left_hand.position.z=-position;
    left_foot.position.z=-position;
    right_foot.position.z=position;
    console.log('hands are moving');
    if (detectCollisions===true){
      console.log('hands have stopped moving');
      isWalking=false;
    }
    
  }
  //later I might want to add Math.PI to this function
  function turn() {
    var direction=0;
    if (is_moving_ne) marker.rotation.z=0,marker.rotation.x=0, direction=-Math.PI/4;
    if (is_moving_forward) marker.rotation.z=0,marker.rotation.x=0, direction=0;
    if (is_moving_back ) marker.rotation.z=0,marker.rotation.x=0,direction=Math.PI;
    if (is_moving_right) marker.rotation.z=0,marker.rotation.x=0,direction= -Math.PI/2;
    if (is_moving_left) marker.rotation.z=0,marker.rotation.x=0,direction= Math.PI/2;
    spinAvatar(direction);
    
  }
  
  function spinAvatar(direction) {
  new TWEEN.
  Tween({y: marker.rotation.y}).
  to({y: direction}, 1000).
  onUpdate (function () {marker.rotation.y=this.y;}).
  start();
  }
  
  var is_cartwheeling=false;
   var is_flipping=false;
   
   function acrobatics() {
  if (is_cartwheeling){
    marker.rotation.z=
    marker.rotation.z + 0.1;
    }
    if (is_flipping){
    marker.rotation.x=
    marker.rotation.x+0.1;
    }}

 // listen for keypress events 
 var is_moving_right,
     is_moving_left,
     is_moving_forward,
     is_moving_back,
     is_cartwheeling,
     is_flipping;
     
 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;
   if (is_cartwheeling)return true;
   if (is_flipping)return true;
   if (view){
     camera.position.z=avatar.position.z+500;
   }
   if (!view){
     camera.position.z=avatar.position.z+10;
   }
   return false;
   
   }
 document.addEventListener('keydown',
 function(event) {
 
  var code=event.keyCode;
  console.log('Pressed' + code);
  
  if (code==32)
  {new TWEEN
  .Tween({jump: 0})
  .to({jump: Math.PI}, 500)
  .onUpdate (function () {
    marker.position.y = 200* Math.sin(this.jump);
  });
  }
  
  if (code==16)
  {view=!view;
  }
  
  if (code==37||code==65)
  {
   console.log('going left');
   marker.position.x=
   marker.position.x-10;
    is_moving_left=true;
   }
 
  if(code==38||code==87)
  {
    console.log('going forwards');
    marker.position.z=
    marker.position.z-10;
    is_moving_forward=true;
    
  }
  
  if(code==39||code==68)
  {
    console.log('going right');
    marker.position.x=
    marker.position.x+10;
    is_moving_right=true;
  }
  
  if(code==40||code==83)
  {
    console.debug('going backwards');
    marker.position.z= 
    marker.position.z+10;
    is_moving_back=true;
   
  }
  if(code==69||code==33)
  {
    console.debug('going NE');
    marker.position.z= 
    marker.position.z-10;
    marker.position.x=marker.position.x+10;
    is_moving_ne=true;
   
  }
  if(code==69||code==33)
  {
    console.debug('going NW');
    marker.position.z= 
    marker.position.z-10;
    marker.position.x=marker.position.x+10;
    is_moving_ne=true;
   
  }
  if(code==67) is_cartwheeling= !is_cartwheeling;
 
  if (code==70) is_flipping= !is_flipping;
 
   if (detectCollisions())
   {
     console.log('Into detect collisions');
     console.log('marker_x:' + marker.position.x.toString());
     console.log('marker_y:' + marker.position.y.toString());
      if (is_moving_left)
      {
        console.log('we are moving left...so move the marker 5 points right...');
        marker.position.x=marker.position.x+10;
      }
      
      if (is_moving_right)
      {
        console.log('we are moving right...so move the marker 5 points left...');
        marker.position.x=marker.position.x-10;
      }
        
      
      if (is_moving_forward)
      {
        console.log('we are moving forward...so move the marker 5 points back...');      
        marker.position.z=marker.position.z+10;
      }
      
      if (is_moving_back)
      {
        console.log('we are moving back...so move the marker 5 points forward...');  
        marker.position.z=marker.position.z-10;
      }
        
   }
 });
 
 
 
 document.addEventListener('keyup',
 function(event) {
   var coder=event.keyCode;
   if(coder==69||coder==33) is_moving_ne= false;
   if(coder==37||coder==65) is_moving_left =false;
   if (coder==38||coder==87) is_moving_forward= false;
   if (coder==39||coder==68)is_moving_right= false;
   if (coder==40||coder==83)is_moving_back= false;
   if (coder==67)is_cartwheeling= false;
   if (coder==70)is_flipping= false;
 });
 
 function detectCollisions() {
   console.log('Into detect collisions');
   var vector = new THREE.Vector3(0, -1, 0);
   var ray = new THREE.Ray(marker.position,vector);
   var intersects= ray.intersectObjects(not_allowed);
   console.log('intersects' + intersects.length.toString());
   if (intersects.length > 0) 
   {
     console.log('We ave got a collision..');
     return true; 
   }
   else
   {
     console.log('No collision so keep moving...');
     return false;
   }
 }
 if (detectCollisions()) {
    isWalking=false;
 }
  }
</script>

PS the background is meant to be green and the code is meant to be in that function for when I add a title screen

Chris_strom_headshot_200_pragsmall
18 Jul 2016, 00:34
Chris Strom (265 posts)

I don’t think you’re having trouble with rotation so much as you’re pushing the Canvas renderer beyond what it’s capable of doing. I’ll get to that in a second.

First, if you use a cube geometry for the ground, there’s no need to rotate. Make the x and z dimensions really large and the y height small — and you’re done.

In the book, we rotated a plane -Math.PI/2 around the x-axis. If you wanted to use a plane here, then you’d do the same rotation.

Now for the Canvas renderer. I think you’re probably seeing weird artifacts on the screen. Maybe the roots are “bleeding” through the ground. Maybe the ground doesn’t look like a cube. Maybe there are other things.

The Canvas render is good for exploring ideas (like we do in the first half of the book). But it’s not really cut out for involved games. And what you’re building is getting to be too sophisticated for the canvas render. There are too many trees with too many details (like the roots). It’s all pretty nifty, but the Canvas renderer just can’t keep up.

So… I think it’s time for you to start exploring the WebGL renderer like we do in chapter 12 and following. It’ll take a little more work to get the materials, colors and light right, but I think you can eventually get the game too look even cooler.

If you’d prefer to stick with the Canvas renderer, you’ll probably have to remove some of the details (like the tree roots) to allow the Canvas renderer to keep working.

Hope that helps – let me know if you have more questions!

-Chris

Dubstepcat_300_pragsmall
18 Jul 2016, 14:20
Fin Lumsden (35 posts)

I’ve tried that and experimented and this is what I think the problem is- the canvas renderer I’m using can’t render the area underneath the camera. Thanks for the help. I will try using the WebGL renderer!

Dubstepcat_300_pragsmall
19 Aug 2016, 22:10
Fin Lumsden (35 posts)

I haven’t been on here for a bit but now I have a question - can you set a render distance?

Chris_strom_headshot_200_pragsmall
20 Aug 2016, 00:07
Chris Strom (265 posts)

I’m not sure what you mean by render distance. If it’s the distance from the camera to the scene, then you can change the camera’s z position near the top of the code (small is close to the scene, large far away).

If that’s not what you meant, maybe re-read chapter 9 – it discusses cameras and renderers a little. And if that doesn’t answer your question, feel free to let me know! Just give a little more description and I’ll do my best to help :)

-Chris

Dubstepcat_300_pragsmall
25 Oct 2016, 21:41
Fin Lumsden (35 posts)

No, I just needed to change the number 10000 to something lower sorry!

Chris_strom_headshot_200_pragsmall
26 Oct 2016, 00:12
Chris Strom (265 posts)

Cool! Glad you got it working :)

Dubstepcat_300_pragsmall
06 Nov 2016, 17:25
Fin Lumsden (35 posts)

I have a very big problem that I can’t get around. Every time I try to get a local file into a game using audio tags or ` var audio = new Audio(“C:\blah.mp3”); audio.play(); ` , it will never work. I know this question isn’t part of the 3D programming but I can’t find it online so could you please help? Thanks!

Chris_strom_headshot_200_pragsmall
07 Nov 2016, 02:09
Chris Strom (265 posts)

Unfortunately, that won’t work. At least not from your machine.

Browsers can’t access files from your local machine when loading web pages from sites on the internet (like gamingjs.com). I would guess that you’d see some sort of security notification in the JavaScript console to that effect.

Your best bet is to put the audio file somewhere in the Internet. Something like Dropbox (or similar) might be the easiest thing to try. You can upload your sound files to the Public folder in Dropbox. There are instructions on how to use the folder in Dropbox, but basically, in Dropbox, you’d right-click the sound file, select the “Copy public link” item and then you have a URL that you can paste into ICE.

I’m not sure if it matters, but that wouldn’t be completely private. Anyone can access the sound file, but they’d need to know the URL. So it’s not 100% private, but it’s still pretty close.

Hope that is of some help,

-Chris

Dubstepcat_300_pragsmall
19 Nov 2016, 17:38
Fin Lumsden (35 posts)

Thanks! What I tried was to copy the chrome browser in the command console and then add an extra line telling it that the chrome file is allowed to access local files and it still didn’t work. I will try that now.

Dubstepcat_300_pragsmall
17 Dec 2016, 15:04
Fin Lumsden (35 posts)

Hi! It’s me again. I have a question: How do you set where the camera rotates around when using orbit controls? Thanks!

Chris_strom_headshot_200_pragsmall
19 Dec 2016, 19:23
Chris Strom (265 posts)

Be careful with the orbit controls (and other controls). Those controls can be experimental (meaning they break easily) and aren’t well-documented.

That said, you should still definitely play around with them. They can be a lot of fun :)

The orbit controls “orbit” around the center of the screen (0,0,0) by default. If you want to orbit around a different location, you set the center property on the controls:

  var	controls = new THREE.OrbitControls( camera, renderer.domElement );
  //controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame)
  controls.enableDamping = true;
  controls.dampingFactor = 0.25;
  controls.enableZoom = false;

  controls.center = new THREE.Vector3(0,0,-200); 

.

That would orbit around a point behind the center. Definitely experiment with the numbers to get a better feel for how they work.

Let me know if you have any other questions and have fun with that stuff!

-Chris

Dubstepcat_300_pragsmall
29 Dec 2016, 23:32
Fin Lumsden (35 posts)

Thanks for the help earlier! I have been wondering how I could use a ray to intersect a physijs mesh and sense the collision. Do you know? I have been trying to incorporate a javascript library called gamepad.js into the cave puzzle project. The problem is that when I move the ‘mouse’ controlled by the Xbox remote, it can’t move the ramps. Any ideas? Thanks! -Fin

Chris_strom_headshot_200_pragsmall
03 Jan 2017, 20:22
Chris Strom (265 posts)

Sorry for the delayed reply here…

I have the feeling that the xbox is generating different events than what the Mouse.js from the cave puzzle is using. If you look at the source code for Mouse.js, you’ll see that it’s expecting “mousedown,” “mouseup,” and “mousemove” events to be triggered. That works well on computers with mice. Not so much on tablets or other devices without mice.

There are some examples of ray intersections with PhysiJS meshes in that source code, but it’s kinda ugly code – it may be a pain to try to muck with it.

Instead, you might try simulating mouse events with gamepad.js using something like: http://stackoverflow.com/questions/4158847/is-there-a-way-to-simulate-key-presses-or-a-click-with-javascript.

That sounds like a fun project! Sorry again for the delay in replying – hopefully you’ve been able to make some progress in the meantime.

-Chris

Dubstepcat_300_pragsmall
18 Mar 2017, 12:56
Fin Lumsden (35 posts)

I was thinking and Mouse.js has CUSTOM event listeners like ‘drag’ and I’ve been wondering if I could create my own counterparts that work for xbox remotes so are you aware of how it is done? Thanks!

Chris_strom_headshot_200_pragsmall
05 Apr 2017, 04:39
Chris Strom (265 posts)

I’ve tried digging into this, but haven’t had much luck. It definitely seems possible, but I am unsure how to translate gamepad interactions into typical browser things like “dragging” and “mouse clicks”.

This documentation from Microsoft seems promising: https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/dom/gamepad-api. But I don’t have much help to offer at this point.

Sorry!

-Chris

Dubstepcat_300_pragsmall
28 May 2017, 13:12
Fin Lumsden (35 posts)

Hi and thanks for the gamepad help!

This question is about actually getting code on the web. I am creating a website for a band but need help getting it on the web as a site. It also needs to be low/no cost. Can you help? Thanks in advance!

Chris_strom_headshot_200_pragsmall
30 May 2017, 03:22
Chris Strom (265 posts)

The last chapter talks through the specifics of getting HTML and JavaScript onto a page. The book uses Tumblr as the example, but the process will work pretty much anywhere.

If you’re looking for a place to create a site for no / low cost, just search for free website hosting. Things like weebly and wordpress should be fine. The free levels usually mean you can’t use your own domain and the hosting company will put their own ads on your site. If you pay, the ads get removed and you can use your own domain. The free level is usually a good deal – you can figure out how to make it all work (and see IF it’ll work) before paying anyhting. And sometimes the free stuff turns out to be just fine.

Hope that helps!

-Chris

Dubstepcat_300_pragsmall
03 Jun 2017, 12:36
Fin Lumsden (35 posts)

Thanks I’ll check some out now!

Dubstepcat_300_pragsmall
31 Jul 2017, 23:26
Fin Lumsden (35 posts)

Hi, I am not fully confident you will reply to this after the past few times (all of which I’ve deleted), but now I want to make a different game. At the moment it is only half an hour old so there are other bugs which need to be fixed. Anyway, here is the game and my problem is to do with physi.js (or three.js) not accepting something in a function of mine. Here is my code:

<body>
<canvas id="_one"></canvas>
<style>
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
@import url("https://fonts.googleapis.com/css?family=Gloria+Hallelujah");

</style>
</body>

<script src="http://gamingJS.com/ChromeFixes.js"></script>
<script src="http://gamingJS.com/Tween.js"></script>
<script>

  var audCred = new Audio();
  audCred.src="http://audio.ngfiles.com/747000/747953_TheFatRat---Fly-Away-feat-.mp3";
  var audGame = new Audio();
  audGame.src="http://audio.ngfiles.com/745000/745508_ColBreakz---HeartBeat.mp3";
  
  audCred.play();
  audCred.loop = true;
  var gamePlaying = false;
  _one.width=window.innerWidth;
  _one.height=window.innerHeight;
  var ren = {
    ctx: _one.getContext("2d"),
    fonts: ['Ubuntu Mono','Gloria Hallelujah'],
    Write: function(text,x,y,center,col,font,size){
      if(typeof size === "undefined"){
        size = 25;
      }
      if(center){
        ren.ctx.textAlign = 'center';
      }
      ren.ctx.fillStyle = col;
      ren.ctx.strokeStyle = col;
      ren.ctx.font = size + "px " + ren.fonts[font];
      ren.ctx.beginPath();
      ren.ctx.fillText(text, x, y);
      ren.ctx.closePath();
    },
    clearAll: function(){
      ren.ctx.clearRect(0,0,window.innerWidth,window.innerHeight);
    },
    Img: function(x,y,center,source,width,height){
      var im = new Image();
      im.src=source;
      if(center){
        x=x+width/2;
        y=y+height/2;
      }
      ren.ctx.drawImage(im,x,y,width,height);
    }
  };
  var opacity = [1,1,1,0];
  function animate(){
    if(!gamePlaying){
      requestAnimationFrame(animate);
    TWEEN.update();
    ren.clearAll();
    if(opacity[0]!=0){
      ren.Write("Dubstepcat_300's scripting",window.innerWidth/2,window.innerHeight/2,true,'rgba(255,255,255,'+opacity[0]+')',0,50);
    }else{
      if(opacity[1]==1){
        new TWEEN.
Tween({x: opacity[1]}).
to({x: 0}, 2500).
onUpdate(function () {
opacity[1] = this.x;
}).
start();
      }else{
        if(opacity[1]!=0){
          ren.Write("With help from some of Mr Doob's libraries",window.innerWidth/2,window.innerHeight/2,true,'rgba(255,255,255,'+opacity[1]+')',0,40)
        }else{
          if(opacity[2]==1){
        new TWEEN.
Tween({x: opacity[2]}).
to({x: 0}, 2500).
onUpdate(function () {
opacity[2] = this.x;
}).
start();
      }
      else{
        if(opacity[2]!=0){
          ren.Write("Music all from Newgrounds.com/audio",window.innerWidth/2,window.innerHeight/2,true,'rgba(255,255,255,'+opacity[2]+')',0,40)
        }else{
          if(opacity[3]==0){
        new TWEEN.
        Tween({x: opacity[3]}).
        to({x: 1}, 2500).
        onUpdate(function () {
        opacity[3] = this.x;
        }).
        start();
          
      }else{
        if(opacity[3]!=0){
          ren.Write("Trapped",window.innerWidth/2,window.innerHeight/6,true,'rgba(255,255,255,'+opacity[3]+')',0,40);
          ren.ctx.globalAlpha = opacity[3];
          ren.Img(window.innerWidth/2-640,window.innerHeight/2-360,true,'https://lh3.googleusercontent.com/dpKevhTdMMdMXNbhIyqfgUT9Tn8eHgm1s1lp7mHhbNyVix7ET4P6RLhVVDGGgRB93-1LTQDP7f38GaIaSjjTShXwDckqZuDpnmSjy0wKwdn_DWr8643bpFKu9rDcniMED5og3SIVqGpnrkjWI-0sVUjnzOwfVYrypk4t8kzC0fRaVyX8XseK0Pxdt5Jnh2wFISUht9vbqeP1PRB6a6y1a5ZgsgeGT8XZMQ-V_JDmXyftVVGKGpBTYj7JwUdf7kudIvBiwSrkXkOYpddDQga6TiqDIWN8qvwf5kLyWLMxufCzLA5Seqf8tAFVSCAZ1g8IG1BSblz5pT6dcPWXNDtWDJY97_G-Uz0mIilcIyTWvqXoHeArTN4MdBzHQ1xkIVirWNOaXsEFZzAV87--fb1x3HrxqedX-xoIAVlf9Uh5wKhIqZzqJqNget147wY4uLj-61yLP67MFCqdVlz1YWhduxSougFqHZIqWmEDsRnD0sK3oCHwAO1WogAl8eUy0TUAiLQLn76NmfiRyXIPEqSCf_ioQyK2icvAie9z63-9LVseX_-2PaKzVWj4KCXB9LoVbZD6T0qFV4C4IdWzwZ1SVAbuVj6luHFMtwuQMCe1j7pWqtd_5HSdDiPj=w879-h495-no',640,360);
          ren.Img(window.innerWidth/2-640,window.innerHeight/2-360,true,'https://lh3.googleusercontent.com/GkbqjQ2CqcYp7WhAmtxJ6zJrMigCVL4KAgTn7QsBueLGyvzHO-gDcVYS8RbV1Z7OMLrs7KDE-Hdt8aBbnYttHIzIcnw2tbmX9w0tz4mezQ_Ks4AzIZzPpe2XsqYbCxF6z2KFiJcGZ62En36a5xcXUTQ4h8YxyXk2lyrN2Oov7fn4SdUftaCIAZ76nSEgJs-t2yX4Bn9mTeLDSwqvMbDgsQRLcS3CANdjR2jFR82hQ-CuvE1EUAKiTiRDUrq13oBZt7947WgZVNKej4WzMjuSx8QKcWf4xo-UI7zHpHHDnWhqE3Yr7us79sM634E8QuyhT38dTnAdnNAmVbTHa1JrRXweeTUHIeP6z6WmGc57L3-S5oTkEukpa1MKRnKGohq6V-0J5zlxmE3REunsDkZcUmrAEYVSo8vdiQ9JBx069YS_PkWbJxXspsIwZFYu6MFQc9g8L3-qvdd5mBdX0Qcj06VFzOVN93tLVIM2e-3gmW8JHj0OKjCe6Ueqir2CWkV1TODerGCCx9EMFeDrqb-_1jAlI15thHmZHj5bIkPFEp72eDeXmTPpKaghZGM7GIsJQX7dPgum98CrBVXzwVgTX1r8khxOrqvPzFZEi0I7LbyUwpwif3fK=w477-h268-no',640,360);
          ren.Write("Press Space To Start",window.innerWidth/2,window.innerHeight/6*5,true,'rgba(255,255,255,'+opacity[3]+')',0,40);
        }
      }
      }
        }
      }
    }
    }
    }else{
      
    }
  }
  animate();

  new TWEEN.
Tween({
  y: opacity[0]
  }).
to({
  y: 0
  }, 2500).
onUpdate(function () {
opacity[0] = this.y;
}).
start();
document.addEventListener("keydown",function(e){
  if(opacity[3]==1&&e.keyCode==32){
    gamePlaying = true;
    audCred.pause();
    audGame.play();
    audGame.loop = true;
    _one.parentNode.removeChild(_one);
    rendering();
  }
});
</script>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/physi.js"></script>
<script>
// Physics settings
  Physijs.scripts.ammo = 'http://gamingJS.com/ammo.js';
  Physijs.scripts.worker = 'http://gamingJS.com/physijs_worker.js';

  // This is where stuff in our game will happen:
  var scene = new Physijs.Scene({ fixedTimeStep: 2 / 60 });
  scene.setGravity(new THREE.Vector3( 0, -100, 0 ));

  // This is what sees the stuff:
  var width = window.innerWidth,
      height = window.innerHeight,
      aspect_ratio = width / height;
  var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
  // var camera = new THREE.OrthographicCamera(
  //   -width/2, width/2, height/2, -height/2, 1, 10000
  // );

  camera.position.set(0, 10, 0);
  camera.rotation.set(0, 0, 0);
  scene.add(camera);

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  document.body.style.backgroundColor = '#000';
  function addWall(x,z,xwidth,zlength){
    var wallGeometry = new THREE.CubeGeometry(xwidth,100,zlength,xwidth/10,10,zlength/10);
    var wallMesh = new THREE.MeshBasicMaterial({color: '0x777', map: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUTExIWFRUXFxcYGBUXGBcXGBcXFRcXFxcXGBUYHSggGB0lHRcXITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0NDw0PDysZFRktKzc3KysrKy03Nzc3KystLTctLSsrKys3LS0rLSstKy0tLS0rKy0rLS0rKysrLSsrK//AABEIALcBEwMBIgACEQEDEQH/xAAZAAADAQEBAAAAAAAAAAAAAAABAgMABAX/xAArEAACAgIABQMDBQEBAAAAAAAAAQIRAyESMUFRYROB8HGRoQSxwdHx4RT/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/xAAWEQEBAQAAAAAAAAAAAAAAAAAAEQH/2gAMAwEAAhEDEQA/APV9OuSJuBnkXRi20wDKAsojp2iMmRTLF0THhjojt8joxeQieXCLDG++jrcROGgJSxDcFIdTXf54Anf9BSyRGWEuzSdIgksaC8L6DQmiUp011QE8n6STXMVYZLmzoecMXYUkMbJ5f07OmIX9AjiWNo04PmdyxkZ6AlHG+oU6Q0W+bYs5dKAeC0FEFPoO211FIaTOOa3ZeeV+ARimuYHKlbr5oq8JfFij0KSVIRa5vTNLGqLSfYk57pr3Kjn9N3b5Czgdi3pr2NSA5VDryf4Glg1z5nQkuxz5F8/kqOeWB9zF+PwEDr4PjHxWx68DQWgoQs3pjXo3FbAEYHXFcieHCdCgEJwHPNsvmJTWgEWO+aNfboPjtdTelfs+RFLJKqYssN1fLsX4BpYxEcz/AE3YV40dsUwemmIteb6e9F1FnR6AXDoSFc0UGD3ReMBXADIm8VjrE6K4sTq3RRxelsM4bOrLiJJCDneIZ47RZqxZRZIVyPGkGK5jcGxEq6MKOGNMrMljspVlQj5aISgyzSJQ+oFE9eTY3SNGXzpZJy6P7gWaXQjOOvwgxmxuYHK2+xirTMB6PopcgUVkt9QcJpCV2Q8UNCJpxAfHIecicATIGqw0BINABMvGOhILRbG+4EZBSt/sWyYwQgBNwf0ZRrRVoVgc9P28jKI0Zqx0gOZphTLuBOUPBBNhlJoafIS7AdQ/wE14FUrKRKOWV2GTbR0Sx9wY4kHFjg72XlgRaUPA0CwcmbBrkzm9Hs9nsTV8yCgkxBwPD4JrCuqO/J4IzA53j0BYU3/ZZJLfT8CrN0AEv09p7rpfYP8A59LS5b7X1LQXctWijjf6byY6uBmEGzCvkMsQFj8ugHgkHIuv3+zBX2G5/PwAsY/2FpF4PWyObkAIIZBjHQqVkFEh4xFgVQBBZmaihsnQRqx58kLFECRiyidFZRQs4AZb+dSeT6FoxVaFmuYHBkf1ER2OOiL8kBhGy3CLjXgqmULQeELCionkROjpRDmwEcgWNKOgTj2CueS8HPM6WrJSjTIOev4BbXQ6o4tWH0rGYJ+pyKRmNiwjzxlQOMwij9QAWtfQySokpoZS6hWloZz5BirFlBMB4y7f6LxcxYOuSY/TyAVrqPAkNhYD12NbQyC+pAYyuu5aJzUWg0AMrNQ7iagH4UYXhKxjqgjCuI/QSJRNwJPFv51OjhNwEUkIm5FlAzxK9lRzyi+4qVFnDsBRIqDfUPFQ+QmmihX3NxUBc2LwgGic/uWaEqrCFgaSHkT4exQykGxG/I/CAK+hje5gON2VhvVFI4wtUIrDzaoi0Fv/AAgaDLQhaOVzf3KY8tdAL+kGETeo+wuObYFKFaY78iTnXQCV72UUhJN7DC+xB1Y42how/AkZVyL41XMqFS3YzA2FLqArGhERS3ruOp2QFw7CxewuYtlFrEbJybDGXQUNNC8A/Ia+4HFkRFx2X/Urd9Dl4gqkWbiNjTTsakwA9g+pRqiVMqBLZKRXJAlKLAnJ8hlkrqJk3X1JZJ0RXR6hjk9Xz+xhSOuLM5b2zcRotdigpP5zC4tgntFIxpU/nuBzytFccU185h4Fzv57DSarXz3IGhFV4C4oEX5FlPYFMkgKXcTiMmBaFPdj8KsWKsegKKIYMRS5FYQCFoZLyGg0Bzt0VghuFXyDQAoVS2UZNxAMhuATGtlHIDSEbKWSyvwUSyzOaizf+E1IgaL8DMyXULKJybMaUkBUAs2I9lXGxEgIqIsolmwKAHK8BjolEwhUphaT6iSjRSMUFHHNBlm9yMo60+ugvGr/ANIKca5spGSIwwoolX0/YCkJe4JLywRXkLKNGA6h7kuL4i2Od9CC0FRdY9HLxbKcfkDcO9nVjRyQydyvHq79gjobEbJwk2M2AyY6RJWO2UaboSTJ5Xs0WQM5B4iMwxkBdSFeyN387Fq0BKVryRlLwXtkuLZQJRdE5JvRWUtM0UgI9B+LX0KUACaYyNVCqaKhZdwQY0ya8BRa8mBZgOeKF4t8w0xHvfYirwXuSnk/cpihq2OopW0tur8vS/oBMcG/CHxtci4vpBE73Q7kkaUEJIKrCaY8cbI42dMH8/kgosS6oHDspKZJTKgqFjJaDxaBJ9iAp0OicIMfIgG4l0FkSTA5AMb1CbeiMmRXTxglIknSJSm2wOqMinGcuOQ8WUWciYjl4NOT5hA4+aCvqIzNeQKtUFSEjPVMFlAkCUeoHLYyKFdCRiOxUA1GNRgjlYsl/Azya5GqyNDLkCLfsLL4hlECsMj6lL8koSFnN06150BVixXgT1da382UsBE9+DqUtHHB0zoUiBnIOOQtjJAPGRVSOeT7AUwOtz7GlI5fUoZzAs0qJNg4gsBHISeQeb8EK2QPjXlf0UT6k3EeO+b/AAAPUV/8C8y6fsZV2NJvqyhk31BC1zA1qg8gjSZPjDO2IgGkxOIEpeBWihlkH40RUTSQFpTIrILXQVIDoWbyYhxIIBjFJBvyR42FRbZVGauh+T2PCAM2PmECwWJEN8yKeEktILy0wKKqwS5gJKVvmdMTljzOiMgLQXkMXQkZar5+AOQRRtP+BJoyYbCskmvIqbYt7Gj9gLw2iiRzwk+gVmle4qvDbYRWcaObrzLTl9TmzSp2FVtiuXkn6uhVK2QdcV1NkiJCVDN2VA4vyaWnS5A4aEyOwCgSa7oQSQBTtjdBMbDKX4A3F1A5WKmaIG2b6DyRB9SiMp09swmTGm7aX2MIOxTKwYDBVIzQmaZjARktjMxgi2JE5oxgIrq+llk9GMRVMTGUgmARuyi0YwCJqx5y0EwQqtUXbCYCXFaJyVr2MYCcY9gJUYxFWTGjMxio0icn0ZjAJKQtWEwGj5BMJihVEPphMAWSaMYuIg6MYxof/9k='});
    var wall = new THREE.Mesh(wallGeometry,wallMesh);
    wall.position.set(x,50,z);
    scene.add(wall);
  }
  addWall(50,500,100,100);
  function rendering(){
    requestAnimationFrame(rendering);
    document.body.style.backgroundColor = '#3578ef';
    renderer.render(scene,camera);
  }
</script>

Also, you might want to switch off the volume as there is music playing. Thanks in advance (if you reply)

Chris_strom_headshot_200_pragsmall
17 Aug 2017, 02:39
Chris Strom (265 posts)

Apologies for the delays in replying. This forum is really meant for help with the book. I do try to help with other code as time permits, but time does not always permit.

With this one, I’m not entirely sure how the game is supposed to work. I pressed the spacebar several times and saw an error in the JavaScript console that “_one is not defined”. Looking through the code, I don’t see anywhere that _one is defined – as a variable or a function – so that seems like a problem. If that’s the error that you’re seeing, then you’ll have to create that in your code (before line 134).

If the problem that you’re seeing is something else, you’ll have to give me a little more information to go on. I need more information on how the game is supposed to work, steps to take to reproduce the error, and what the expected behavior of the code is. It doesn’t have to be really detailed or long, but the more info you can give, the better able I’ll be to help.

FWIW I did try with the last post, but couldn’t figure out the canvas code in the spare moments I had to look at it.

-Chris

Dubstepcat_300_pragsmall
24 Aug 2017, 12:30
Fin Lumsden (35 posts)

Oh very sorry I thought that you may be on holiday and by then my need for help wouldn’t be there anymore. Thank you for the feedback and i will go and check it now (the _one came from within the three.js library which I searched through to access the canvas so that you couldn’t scroll down).

It would work by being a title page on one canvas above the 3D rendering on another canvas meaning you could scroll down but in my latest version I’ve just changed the canvas’s ‘display’ styling to allow me to change the Z order and put one on top of the other. Then I delete the one on top to see the one below.

Thanks!!!

Dubstepcat_300_pragsmall
09 Sep 2017, 22:07
Fin Lumsden (35 posts)

Not JS related question but just a general problem with my browser i thought u might be able to help with. Here is the link to where i asked the question:’Browser Error Stack Overflow’. Thanks in advance :)

Dubstepcat_300_pragsmall
13 Sep 2017, 01:47
Fin Lumsden (35 posts)

Thanks for the help but I’d already done that along with a huge list of various other solutions so I think it is to do with my antivirus but that isn’t something I want to do much experimenting with and I think you can understand why. Thank you for the help anyway though!

Dubstepcat_300_pragsmall
19 Nov 2017, 16:14
Fin Lumsden (35 posts)

At this point I have mainly moved on to using c++ for the Unreal Engine but I have a question related to the course and code editor. How do you get the url for posting that anyone can see e.g. gamingjs.com/ice/Gyjbf6fkbw…

Thanks!

Chris_strom_headshot_200_pragsmall
19 Nov 2017, 17:48
Chris Strom (265 posts)

We are encoding the contents as Base64. We also compress the code, but that’s not strictly needed for the URL.

Base64 “encodes” strings (like the code) into a single line of text. This is sort of like encrypting data, except Base64 wants to make it very easy to get the data back out. Base64 is primarily meant for use where newlines and special characters might cause problems, like in the URL of a browser :)

-Chris

You must be logged in to comment