Plane for drag'n'drop cannot set invisible

Questions
1

Hey, I implemented drag controls very similiar to this in my project.
The drag controls have a plane for offset calculation. The plane is set to visible = false, which does not work for me. If the plane is set to invisible, the raycaster will not hit the plane.
A visible plane is not acceptable. How to set it invisible and still get hit by the raycaster? Any options for hitting invisible obj’s?

this.plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(500, 500, 8, 8), new THREE.MeshBasicMaterial({ color: 0xa39287, transparent: true, opacity: .2 }))
this.plane.name = 'dragplane'
this.plane.lookAt(this.camera.position)
// this.plane.visible = false
this.scene.add(this.plane)

public onMouseDown(event) {

    this.mouseDown = true

    this.mouse.x = (event.pageX / window.innerWidth) * 2 - 1
    this.mouse.y = -(event.pageY / window.innerHeight) * 2 + 1

    let vector = new THREE.Vector3(this.mouse.x, this.mouse.y, .5)
    vector.unproject(this.camera)

    this.mouseRaycaster.setFromCamera(this.mouse, this.camera)

    let intersects = this.mouseRaycaster.intersectObjects(this.objects, true)

    if(intersects.length > 0) {

        // Disable orbit
        this.orbit.enabled = false

        this.selected = intersects[0].object

        intersects = this.mouseRaycaster.intersectObject(this.plane)
        this.offset.copy(intersects[0].point).sub(this.selected.position)
        this.move.copy(this.selected.position)
    }
    else this.selected = null
}

public onMouseMove(event) {
    event.preventDefault()

    if(this.mouseDown) {

        this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1
        this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1

        let vector = new THREE.Vector3(this.mouse.x, this.mouse.y, .5)
        vector.unproject(this.camera)

        this.mouseRaycaster.setFromCamera(this.mouse, this.camera)
        
        let intersects
        // When selected, calc position
        if (this.selected) {

            intersects = this.mouseRaycaster.intersectObject(this.plane)

            this.move.copy(intersects[0].point.sub(this.offset))

            this.activity = Activity.MOVE

            this.control()
        }
        else {

            // Set selected
            let intersects = this.mouseRaycaster.intersectObjects(this.objects, true)

            if(intersects.length > 0) {
                
                this.plane.position.copy(intersects[0].object.position)
                this.plane.lookAt(SceneSetup.instance.orthCamera.position)
            }   
        }
        
    }
}
1 Like
2

Hi!
Instead of that plane mesh, you can use THREE.Plane().

Then, to find a point of intersection of raycaster’s ray and the plane, you can do something like this:

this.planeNormal = new THREE.Vector3(0, 0, 1);
this.plane = new THREE.Plane(this.planeNormal, 0);

this.mouseRaycaster.setFromCamera(this.mouse, this.camera);
this.mouseRaycaster.ray.intersectPlane(plane, this.move); // use this.move as the target for this method
2 Likes
4

@prisoner849 Is it possible to move it along the Y axis as well with this solution? Only X/Z works for me right now

5

Use an additional plane or set the existing one with necessery normal.