I'm rendering a complex 3D mesh with Three.js (an iliac bone). Then I'm rendering some simple spheres along with this mesh to mark certain points on the surface (where muscles would attach):
The problem is, the mesh is quite thin in some areas, and the markers will stick out the back.
Assume that the marker coordinates are always closer to the front face of the mesh than the back face, and that the spheres always show more surface area / volume on the front of the mesh than on the back:
How could I hide the parts that extrude out the back without manually intervening for specific markers?
Edit: Here's a (naive?) way of how I might do it. I would like feedback on the feasibility of the idea, and (some pointers to writing) actual code to do it:
I'm not sure how to code any of those steps. Nor am I sure if this is even a sensible approach.
Draw hemispheres instead of full spheres. Use phiStart
and phiLength
parameters of the SphereGeometry constructor.
The centers of the spheres will still be on the surface of the bone (a vertex).
The orientation of one sphere will be given by the normal
calculated in the sphere origin.
Three.js already calculates the normals for a mesh in order to determine how light will bounce from the mesh. You can use the VertexNormalsHelper
to display normals for your mesh:
var bone = ...; // bone mesh
var scene = ...; //your THREE.Scene
scene.add(new THREE.VertexNormalsHelper(bone));
The source code for VertexNormalsHelper
can be found here: VertexNormalsHelper
You have to calculate the difference angles between the normal vector and oZ
axis so you obtain difX
and difY
. These are the ammounts you must rotate your sphere in the X
and Y
directions to make it perpendicular on the local surface of the bone.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.