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
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
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.
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?
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.
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.