Curve from THREE.Line has wrong bounding box

#1

Hey, im drawing a quarter of a circle with THREE.Line. The curve together with some planes all gathered in a THREE.Object3D represent a 2D door (CAD like). The door is selective, but the hitbox is not correct after adding the curve. Im drawing the boundingbox with BoxHelper and when clicking outside but close to the boundingbox, it gets still selected.

Here is a pic. I marked the “real” and wrong boundingbox
55

Code:

    let cGeo = new THREE.Geometry()

    let x: number, z: number
    let origin = new THREE.Vector3(-this.ctrl.w / 2, this.snappedTo.ctrl.h + .1, 0)
    
    for( let i = 0; i <= Math.PI / 2; i+=.1) {

        x = origin.x + this.ctrl.w * Math.cos(i)
        z = origin.z + this.ctrl.w * Math.sin(i)

        cGeo.vertices.push(new THREE.Vector3(x, origin.y, z))

    }

    cGeo.computeBoundingBox()
    cGeo.computeBoundingSphere()
    cGeo.computeVertexNormals()
    cGeo.computeFaceNormals()

    cGeo.verticesNeedUpdate = true

    let curve = new THREE.Line(cGeo, mat.clone())
    this.plane.add(curve)

When raycasting for drag’n’drop, the intersection object is always the curve mesh. Selection should only possible in the orange rectangle
Thanks

#2

Please demonstrate this issue with an isolated live example. It’s not possible to see from your code section what’s going wrong.

Not directly related to your question but have you considered to represent your doors as sprites? I would say this is a much more simple and reliable approach than procedurally generating geometries. At least I would design my stuff in Blender and then just import it.

#3

Thanks, I had that in mind too, but wasnt sure because when scaling the model, the line will get thicker, no? Ill give that a try and make a model

#4

If you render WebGL line primitives, they always have the width of 1px.

#5

Here’s demo. When clicking and intersecting, the intersect will be logged and a sphere will be drawn at intersect.point position.

I made a bezier curve in blender, added a material and converted it to a mesh (Object->ConvertTo->Mesh from Curve/Meta/Surf/Text). When exporting to gltf and importing to threejs, it is missing a geometry and is therefor not working. What am I doing wrong?

#6

The intersection test is wrong since the scene is defined in a small scale. Hence, you have to set Raycaster.linePrecision to a small value like 0.01. The default value is 1.

Demo: https://jsfiddle.net/nu2dp1xm/

Consider Raycaster.linePrecision as some sort of tolerance value. Lines and points are normally infinitely small so you need to define when the ray is close enough to a primitive.

1 Like