Невидимая плоскость Three.js не работает с raycaster.intersectObject

Я пытаюсь создать перетаскиваемые объекты, как показано в этом примере: https://www.script-tutorials.com/demos/467/index.html

Объекты, которые следует перетаскивать, находятся в массиве objectMoverLines.

Я добавил самолет в свою сцену с помощью следующего кода:

plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(500, 500, 8, 8), new THREE.MeshBasicMaterial({color: 0x248f24, alphaTest: 0}));
plane.visible = false;
scene.add(plane);

Проблема возникает в функции onDocumentMouseDown. По какой-то причине, если для видимости плоскостей задано значение false (plane.visible = false), то в определенный момент intersectsobjmovers не будут заполняться. Однако, если для видимости самолета установлено значение true, он будет работать нормально (но, очевидно, это приведет к тому, что огромный самолет будет мешать всему):

function onDocumentMouseDown(event) {
    // Object position movers
    var vector = new THREE.Vector3(mouse.x, mouse.y, 1);
    vector.unproject(camera);

    raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
    var intersectsobjmovers = raycaster.intersectObjects(objectMoverLines);
    if (intersectsobjmovers.length > 0) {
        console.log('clicking an object mover');
        // Disable the controls
        controls.enabled = false;
        // Set the selection - first intersected object
        objmoverselection = intersectsobjmovers[0].object;
        // Calculate the offset
        var intersectsobjmovers = raycaster.intersectObject(plane);

        // At this point, intersectsobjmovers does not include any items, even though
        // it should (but it does work when plane.visible is set to true...)

        offset.copy(intersectsobjmovers[0].point).sub(plane.position);
    } else {
        controls.enabled = true;
    }
}

Кроме того, это то, что у меня сейчас есть в функции onDocumentMouseMove:

function onDocumentMouseMove(event) {
    event.preventDefault();

    mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;

    // Get 3D vector from 3D mouse position using 'unproject' function
    var vector = new THREE.Vector3(mouse.x, mouse.y, 1);
    vector.unproject(camera);

    // Set the raycaster position
    raycaster.set( camera.position, vector.sub( camera.position ).normalize() );

    if (objmoverselection) {
        // Check the position where the plane is intersected
        var intersectsobjmovers = raycaster.intersectObject(plane);
        // Reposition the object based on the intersection point with the plane
        objmoverselection.position.copy(intersectsobjmovers[0].point.sub(offset));
    } else {
        // Update position of the plane if need
        var intersectsobjmovers = raycaster.intersectObjects(objectMoverLines);
        if (intersectsobjmovers.length > 0) {
            // var lookAtVector = new THREE.Vector3(0,0, -1);
            // lookAtVector.applyQuaternion(camera.quaternion);
            plane.position.copy(intersectsobjmovers[0].object.position);
            plane.lookAt(camera.position);
        }
    }

    requestAnimationFrame( render );
}

person MrGarretto    schedule 20.01.2016    source источник


Ответы (1)


попробуй это:

plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(500, 500, 8, 8), 
   new THREE.MeshBasicMaterial( {
       color: 0x248f24, alphaTest: 0, visible: false
}));

scene.add(plane);
person Almaz Vildanov    schedule 20.01.2016
comment
О, понятно... Я должен установить видимость на false для материала, а не для сетки... Я должен был знать - person MrGarretto; 20.01.2016