javascript - 鼠标 - 平面上的 x 和 y 但为什么呢？

Question

我会有一个像threejs.org/examples/#webgl_interactive_voxelpainter 这样的网格，然后当我点击一个点时，我可以做我想做的每一件事。我只是无法完成它：/

我的变量

var onmouseclick;

var planex = 16000;
var planey = 16000;
var rasterx = 100;
var rastery = 100;
var waterGeometry;
var planeMaterials;
var watermaterial;
var waterplane;
var mouse;

然后是我为mapp建造飞机的功能

buildmapp = function () {
    //waterunderground  
    waterGeometry = new THREE.PlaneGeometry(planex, planey, rasterx, rastery);
    planeMaterials = [
        new THREE.MeshLambertMaterial({
            map: new THREE.TextureLoader().load('ocean.jpg'),
            side: THREE.DoubleSide,
            wireframe: false
        }),
        new THREE.MeshLambertMaterial({
            map: new THREE.TextureLoader().load('ocean.jpg'),
            side: THREE.DoubleSide,
            wireframe: false
        }),
        new THREE.MeshLambertMaterial({
            map: new THREE.TextureLoader().load('ocean.jpg'),
            side: THREE.DoubleSide,
            wireframe: false
        }),
        new THREE.MeshLambertMaterial({
            map: new THREE.TextureLoader().load('ocean.jpg'),
            side: THREE.DoubleSide,
            wireframe: false
        }),
    ];
    watermaterial = new THREE.MeshFaceMaterial(planeMaterials);
    waterplane = new THREE.Mesh(waterGeometry, watermaterial);
    waterplane.position.set(0, 0, 0);
    waterplane.rotation.set(0, 0, 0);
    scene.add(waterplane);
}

然后是我的鼠标点击功能。这里的坐标应该来自鼠标 - plane.x 或 y。只有我找不到有关如何操作的任何指导。：/

//
onmouseclick = function () {
    mouse = new THREE.Vector3();
    window.document.addEventListener('click', function (e) {
        mouse.x = ((e.clientX / window.innerWidth) * 2 - 1);
        mouse.y = (e.clientY / window.innerHeight) * 2 - 1;
        console.log(mouse.x, mouse.y, 'clicklockation', );
        // mouse - x and y from the plane but why ? 
    });
}

//gameprocess
update = function () {};
render = function () {
    renderer.clear();
    renderer.render(scene, camera);
};
GameLoop = function () {
    render();
    update();
    steuerung_tastatur_camera();
    onmouseclick();
    requestAnimationFrame(GameLoop);
};
//first build all object
buildobj();

有人可以帮助我或给我一个指导或方法来了解我需要查看的内容吗？

标签： javascriptthree.js