In the code below, I have defined a plane, wall, and a character. Now, I am trying to set the direction using vector3().
However, I seem to be encountering an issue. Whenever I press the left or right arrow key on the keyboard, I keep receiving the following error message:
Uncaught TypeError: Cannot read property 'set' of undefined
window.addEventListener('DOMContentLoaded',function(){
var scene, camera, renderer,
width = window.innerWidth,
height = window.innerHeight,
radians = .025,
wallHeight = 128,
mesh = new THREE.Object3D();
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0xfcfcfc);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
var groundG = new THREE.PlaneGeometry(500, 1024),
commomMaterial = new THREE.MeshLambertMaterial({
color:0xf5f5f5
}),
charcterMaterial = new THREE.MeshLambertMaterial({
color:0x7A43B6
}),
mainGround = new THREE.Mesh(groundG, commomMaterial);
mainGround.position.set(0,55,0);
mainGround.rotation.x = THREE.Math.degToRad(270);
var wall = [
new THREE.PlaneGeometry(groundG.parameters.height, wallHeight),
new THREE.PlaneGeometry(groundG.parameters.width, wallHeight),
new THREE.PlaneGeometry(groundG.parameters.height, wallHeight),
new THREE.PlaneGeometry(groundG.parameters.width, wallHeight),
];
mesh.add(mainGround);
var walls = []
for (var i = 0; i < wall.length; i++) {
walls[i] = new THREE.Mesh(wall[i],new THREE.MeshLambertMaterial({color:0xff0000}));
walls[i].position.y = wallHeight;
mesh.add(walls[i]);
}
walls[0].rotation.y = -Math.PI / 2;
walls[0].position.x = groundG.parameters.width / 2;
walls[1].rotation.y = Math.PI;
walls[1].position.z = groundG.parameters.height / 2;
walls[2].rotation.y = Math.PI / 2;
walls[2].position.x = -groundG.parameters.width / 2;
walls[3].position.z = -groundG.parameters.height / 2;
scene.add(mesh);
var characterMesh = new THREE.Object3D();
characterMesh.position.y = 88,
characterDirection = new THREE.Vector3(0, 0, 0);;
var headG = new THREE.SphereGeometry(32, 50, 50),
head = new THREE.Mesh(headG, charcterMaterial),
noseG = new THREE.SphereGeometry(4, 4, 4),
nose = new THREE.Mesh(noseG, charcterMaterial);
head.position.y = 0;
characterMesh.add(head);
nose.position.y = 0;
nose.position.z = 32;
characterMesh.add(nose);
scene.add(characterMesh);
var light = new THREE.PointLight();
light.position.set(50, 400, 0);
scene.add(light);
camera = new THREE.PerspectiveCamera(55, width/height, 0.1, 10000000);
camera.position.set(0,356 ,740);
camera.lookAt(mesh);
camera.lookAt(mainGround.position);
function render () {
renderer.render(scene, camera);
requestAnimationFrame(render);
}
document.addEventListener('keydown', function (e) {
var dx =0 , dy = 0, dz = 0;
switch(e.keyCode) {
case 37:
dx = 1;
break;
case 38:
break;
case 39:
dx = -1;
break;
case 40:
break;
}
characterDirection.direction.set(dx,dy,dz);
})
render();
});