How to use direction.set in threejs for Vector3

Question

In my below code I have created a plane, wall, and a character. Want to set the direction of vector3().

What am I doing wrong? When I press the left or right key of keyboard I keep getting this:

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();
});

Answer 1

Regarding your code mainGround is a THREE.Mesh.

Mesh have no position if you follow the documentation. Maybe you want to change a position to something else...

Answer 2

In your 'keydown' event callback you do:

characterDirection.direction.set(dx,dy,dz);

But characterDirection is a THREE.Vector3 instance in your example code and this class has no property called direction.

You probably meant to set characterDirection directly with the set method from the class:

characterDirection.set(dx,dy,dz);

Which will result in the Vector3 instance holding those values.