This is my basic THREE.js code that I'm using to implement my Torus and Sphere game. I'm at the point of collision detection between the sphere and torus.
As stated, it has the error message Uncaught TypeError:
Cannot read property 'position' of undefined.
@ lines 130 - this.mesh.position.z += this.rate;//this.rate;
& @ line 523 - obstacles[i].Update();
Why is this.mesh incorrect? Also, why isn't my for loop looping my clouds?
//var scene = new THREE.Scene(); // Create the scene and a camera to view it`enter code here`
//element.style.background-color;
// fogColor = new THREE.Color(0xCCCCCC); //Create colour of fog
// scene.background = fogColor;
// scene.fog = new THREE.Fog(fogColor, 0.25,30);
// Specify the portion of the scene visiable at any time (in degrees)
//var fieldOfView = 75;
// https://stackoverflow.com/questions/16177056/changing-three-js-background-to-transparent-or-other-color/31636198
var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0x87cefa ); //adding color to sky
//var renderer = new THREE.WebGLRenderer({ alpha: true });
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.5, 50 );
// var listener = new THREE.AudioListener();
// camera.add( listener );
// var sound = new THREE.Audio( listener );
// var audioLoader = new THREE.AudioLoader();
// audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
// sound.setBuffer( buffer );
// sound.setLoop( true );
// sound.setVolume( 0.5 );
// sound.play();
// });
var objects = [];
var obstacles = [];
var renderer = new THREE.WebGLRenderer();
var directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
directionalLight.position.set( 0, 1, 0 ); //default; light shining from top
directionalLight.castShadow = true; // default false
var ambientLight = new THREE.AmbientLight( 0x404040 );
directionalLight.shadow.camera.top = 10;
directionalLight.shadow.bottom = 10;
directionalLight.shadow.left = -10;
directionalLight.shadow.right = 10;
directionalLight.shadow.mapSize.width = 512; // default
directionalLight.shadow.mapSize.height = 512; // default
directionalLight.shadow.camera.near = 0.5; // default
directionalLight.shadow.camera.far = 500; // default
scene.add( ambientLight, directionalLight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
var planeGeometry = new THREE.PlaneGeometry( 30, 500 );
var planeMaterial = new THREE.MeshNormalMaterial();
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
//var planeGeometry = new THREE.PlaneGeometry(0.05, 200, 320, 500);
plane.castShadow = false;
plane.receiveShadow = true;
scene.add( plane );
plane.rotation.x = -3.14159 * 0.5;
scene.add(plane);
plane.position.x = 0;
plane.position.y = 30;
plane.position.z = 0;
camera.position.z = 15;
camera.position.y = 0;
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
class Entity {
constructor() {
}
Update() {
}
Reset() {
}
}
class Ring1 extends Entity{
Constructor() {
// super();
this.collidable = true;
this.size = 5;
this.geometry = new THREE.TorusBufferGeometry( 2, 0.5, 10, 100 );
this.material = new THREE.MeshLambertMaterial( {color: 0xffff00} );
this.mesh = new THREE.Mesh( this.geometry, this.material );
this.mesh.castShadow = true;
this.mesh.receiveShadow = true;
this.mesh.position.x = 10;
this.mesh.position.y = 20;
this.mesh.position.z = -50;
//
// this.originalz = z;
// this.rate = rate;
this.speed = 0.2;
scene.add(this.mesh);
}
Update() {
super.Update();
// console.log("oops");
this.mesh.position.z += this.rate;//this.rate;
if(this.mesh.position.z > 0.5){
this.mesh.position.z = this.originalz;
this.speed += 0.015; // speeds up torus each refresh of position
// }
}
}
Reset(){
super.Reset();
}
}
for (i =0; i <3; i++){
var Donuts = new Ring1();
obstacles.push(Donuts);
}
var obstacleList = [];
var myTorus = new Ring1(-10, 1, -160, -1);
var myTorus1 = new Ring1(-5, 1, -30, -1);
var myTorus2 = new Ring1(0, 1, -90, -1);
var myTorus3 = new Ring1(0, 1, -120, -1);
var myTorus4 = new Ring1(10, 1, -60, -1);
obstacleList.push(myTorus1, myTorus2, myTorus3, myTorus4, myTorus );
class Obstacle extends Entity {
Constructor(x,y,z, rate) {
//super();
this.size = 5; // Must call super constructor in derived class before accessing 'this' or returning from derived constructor
this.collidable = true;
this.geometry = new THREE.TorusBufferGeometry( 2, 0.5, 10, 100 );
this.material = new THREE.MeshLambertMaterial( {color: 0xFF0000} );
this.ring = new THREE.Mesh( this.geometry, this.material );
this.ring.castShadow = true;
this.ring.receiveShadow = true;
this.ring.position.x = x;
this.ring.position.y = y;
this.ring.position.z = z;
this.origionalz = z;// this.rate = rate;
this.speed = 0.2;
scene.add(this.ring);
}
Update() {
this.ring.position.z += this.speed;//this.rate;
if(this.ring.position.z > 0.3){ //if torus reaches 0.3 of z axis then return t origional position
this.ring.position.z = this.origionalz;
this.speed += 0.025; // speeds up torus each refresh of position
//super.update();
}
}
Reset(){
super.reset();
}
}
var obstacleList2 = [];
var Villian = new Obstacle(-10, 1, -160, -1);
var Villian2 = new Obstacle(-5, 1, -260, -1);
var Villian3 = new Obstacle(0, 1, -60, -1);
var Villian4 = new Obstacle(5, 1, -200, -1);
var Villian5 = new Obstacle(10, 1, -300, -1);
obstacleList2.push(Villian, Villian2, Villian3, Villian4, Villian5);
class Service{ //like the idea of manager - they set tasks but dont do them personally
Constructor(){
}
Update(){
}
};
function onDocumentKeyDown(event) {
var keyCode = event.keyCode;
keyboard.keys[keyCode]=true;
};
function onDocumentKeyUp(event) {
var keyCode = event.keyCode;
keyboard.keys[keyCode]=false;
};
class KeyboardService extends Service{ // declliration of keyboard serive
Constructor(){
// super();
document.addEventListener("keydown", onDocumentKeyDown, false);
document.addEventListener("keyup", onDocumentKeyUp, false);
this.keys=[];
}
Update(){
}
IsKeydown(keyCode){
return this.keys[keyCode];
}
DocumentKeyDOwn(event){
var keyCode = event.keycode;
keyboard.keys[keyCode] = true;
}
DocumentKeyUp(event){
var keyCode = event.keyCode;
keybaord.key[keycode] = false;
}
};
var keyboard = new KeyboardService();
class Clouds extends Entity {
Constructor(x,y,z, rate) {
// super();
//this.geometry = new THREE.SphereGeometry( 2, 22, 52, -20);
//this.material = new THREE.MeshPhongMaterial( {color: 0xffffff} );
//this.mesh = new THREE.Mesh( this.geometry, this.material );
this.material = new THREE.MeshLambert({color:0xffffff});
this.geometry = new THREE.Geometry();
this.cloud1 = new THREE.SphereGeometry(7,3,2); //indiviual cloud
this.cloud1.translate(-9,0,0);
this.geometry.merge(this.cloud1)
this.cloud2 = new THREE.SphereGeometry(9,3,2);
this.cloud2.translate(0,0,0);
this.geometry.merge(this.cloud2)
this.cloud3 = new THREE.SphereGeometry(7,3,2);
this.cloud3.translate(9,0,0);
this.geometry.merge(this.cloud3)
this.cloud = new THREE.Mesh(this.geometry,this.material);
this.cloud.position.x = 10;
this.cloud.position.y = 20;
this.cloud.position.z = -20; //whole cloud meshed group positions
//PUT GET RANDOM
//this.mesh.position.x = x
//this.mesh.position.y = y
//this.mesh.position.z = z
// this.mesh.castShadow = true;
// this.mesh.receiveShadow = true;
scene.add(this.cloud);
}
Update() {
this.mesh.position.z += this.speed;//this.rate;
if(this.mesh.position.z > 0.3){ //if torus reaches 0.3 of z axis then return t origional position
this.mesh.position.z = this.origionalz;
this.speed += 0.015; // speeds up torus each refresh of position
document.getElementById('hud_distance').innerHTML = (this.mesh.position.z/1000).toFixed(2) + " km";
super.update();
}
}
Reset(){
super.reset();
}
}
//for (i = 0; i < 3; i++){ //UNCOMMENT & ADD GET RADNOM TO LINE 300
//var clouds = new Clouds
// objects.push(cloud)
//}
//var obstacleList3 = [];
//var cloud = new Cloud(-20, 10, -10, -1);
//var cloud1 = new Cloud(-22, 12, -10, -1);
//var cloud2 = new Cloud(-20, 10, -17, -1);
//var cloud3 = new Cloud(-22, 12, -19, -1);
//var cloud9 = new Cloud(-19, 12, -21, -1);
//var cloud4 = new Cloud(18, 10, -10, -1);
//var cloud5 = new Cloud(22, 12, -10, -1);
//var cloud6 = new Cloud(20, 10, -19, -1);
//var cloud7 = new Cloud(22, 12, -21, -1);
//var cloud8 = new Cloud(19, 12, -21, -1);
//var cloud10 = new Cloud(24, 10, -12, -1);
//var cloud11 = new Cloud(24, 10, -10, -1);
//cloud = new Cloud(-20, 10, -20, -1);
//var cloud11 = new Cloud(-22, 12, -20, -1);
//var cloud12 = new Cloud(-20, 10, -27, -1);
//var cloud13 = new Cloud(-22, 12, -29, -1);
//var cloud19 = new Cloud(-19, 12, -31, -1);
//var cloud14 = new Cloud(18, 10, -20, -1);
//var cloud15 = new Cloud(22, 12, -20, -1);
//var cloud16 = new Cloud(20, 10, -29, -1);
//var cloud17 = new Cloud(22, 12, -31, -1);
//var cloud18 = new Cloud(19, 12, -31, -1);
//var cloud20 = new Cloud(24, 10, -22, -1);
//obstacleList3.push(cloud, cloud1, cloud2, cloud3, cloud4, cloud5, cloud6, cloud7, cloud8, cloud9, cloud10, cloud11, cloud12, cloud13, cloud14, cloud15, cloud16, cloud17, cloud18, cloud19, cloud20);
class Sphere extends Entity{
constructor(x,y,z, rate) {
console.log("SPHERE CONS");
super();
this.collidable = false;
this.geometry1 = new THREE.SphereGeometry( 1, 22, 52, 0);
this.material1 = new THREE.MeshPhongMaterial( {color: 0xffff00} );
this.mesh = new THREE.Mesh( this.geometry1, this.material1 );
this.mesh.position.x = x
this.mesh.position.y = y
this.mesh.position.z = z
this.mesh.castShadow = true;
this.mesh.receiveShadow = true;
this.speed = rate;
this.speed = 0.0;
//this.origionalz = z;
scene.add(this.mesh);
}
update() {
// console.log("ball");
// console.log(this.mesh.position.x);
// console.log(this.mesh.position.y);
// console.log(this.mesh.position.z);
if (keyboard.IsKeydown(38) == true) {
this.mesh.position.y += 0.25;
}
if (keyboard.IsKeydown(40) == true) {
this.mesh.position.y -= 0.25;
}
if (keyboard.IsKeydown(37) == true) {
this.mesh.position.x -= 0.25;
}
if (keyboard.IsKeydown(39) == true) {
this.mesh.position.x += 0.25;
}
if (keyboard.IsKeydown(32) == true) {
this.mesh.position.x = 0;
this.mesh.position.y = 0;
this.mesh.position.z = 0;
}
if ( this.CollidedWithObstacle())
{
console.log(" ----- CRASH ---- ");
}
// {
// var keyCode = event.keyCode;
// if ( keyCode == 87 ) { //up
// sphere.position.y += 0.5;}
// else if (keyCode == 83) { //down
// sphere.position.y -= 0.5;
// } else if (keyCode == 65) { //left
// sphere.position.x -= 0.5;
// } else if (keyCode == 68) { // right
// sphere.position.x += 0.5;
// } else if (keyCode == 32) { //space = return to centre
// sphere.position.x = 0.0;
// sphere.position.y = 0.0;
// sphere.position.z = 0.0;
// }
this.mesh.position.z += this.speed;//this.rate;
if(this.mesh.position.z > 0.3){ //if sphere reaches 0.3 of z axis then return to origional position
this.mesh.position.z = this.origionalz;
// this.speed += 0.015; // speeds up sphere each refresh of position
}
if ( this.CollidedWithObstacle()){
console.log("BANG");
//this.sheild --- BANG---
}
}
Move(){
}
DistanceTo(x,z) {
let dist = Math.abs ( Math.sqrt(
(( this.mesh.position.x - x)* (this.mesh.position.x - x ))+
((this.mesh.position.z - z)* (this.mesh.position.z - z ))));
return dist;
}
IsCollidedWith(that){
let collidedWith = (this.size + that.size) > this.DistanceTo(that.mesh.position.x, that.mesh.position.z);
return collidedWith;
}
CollidedWithObstacle (){
for(var n=0; n<obstacles.length; n++){
if (obstacles[n].collidable == true){
if (this.IsCollidedWith(obstacles[n])==true){
return true;
}
}
}
return false;
}
Reset(){
}
}
var obstacleList4 = [];
var ball = new Sphere( 0, 0, 0, -0.01);
//var ball1 = new sphere( 3, 22, 52, -20);
obstacleList4.push(ball);
var cloud = new Clouds;
var avatar = new Sphere;
var rings = new Ring1;
var animate = function () {
requestAnimationFrame( animate );
renderer.render(scene, camera);
for (let i = 0; i < obstacleList.length; i++){
obstacleList[i].update();
}
for (let i = 0; i < obstacleList2.length; i++){
obstacleList2[i].update();
}
for (let i = 0; i < obstacleList3.length; i++){
obstacleList3[i].update();
}
for (let i = 0; i < obstacleList4.length; i++){
obstacleList4[i].update();
}
cloud.Update(); //constantly pushing update
avatar.Update();
rings.Update();
}
for (let i = 0; i < obstacles.length; i++){
obstacles[i].Update();
}
for (let i = 0; i <objects.lenght; i++){
objects[i].update();
}
animate();
