如何在threejs中为Vector3使用direction.set

Question

在下面的代码中，我创建了一个plane、wall 和一个character。 想设置vector3()的方向。

我做错了什么？当我按键盘的左键或右键时，我不断收到这个：

未捕获的类型错误：无法读取未定义的属性“集”

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

关于您的代码 mainGround 是一个 THREE.Mesh。

如果您跟随documentation，网格将没有位置。也许您想将位置更改为其他内容...

Answer 2

在您的'keydown' 事件回调中，您可以：

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

但characterDirection 在您的示例代码中是a THREE.Vector3 instance，并且此类没有名为direction 的属性。

您可能打算直接将characterDirection 设置为the set method from the class：

characterDirection.set(dx,dy,dz);

这将导致 Vector3 实例保存这些值。