How to make text rotate and fade with the object like this: http://3d.cl3ver.com/1cuXr?tryitlocation=3
The website uses HTML elements to visualize the labels. You achieve a similar effect by combining THREE.WebGLRenderer with THREE.CSS2DRenderer like demonstrated in the following example:
https://threejs.org/examples/webgl_loader_pdb
As you can see, the labels are positioned correctly according to the molecules transformation. The opacity of the labels is not changed in this demo. However, you can achieve this by modulating the CSS opacity property similar to the website. You have to compute the opacity value per label according to certain conditions for example its distance to the camera.
2 Likes
Thank you so much
Hello, I would like to ask, where do you judge that the text label should be hidden
WebGL and HTML/CSS elements do not share a common depth buffer. So there is no easy way to determine whether an instance of CSS2DObject is behind a WebGL rendered 3D object or not.
OK, thank you. So when there are too many tags in css2dobject, it will not flow smoothly when rotating the model, right
Is it not necessary to judge by ray, but to judge by the angle of normal
Yes, a good approximate option is to use the normal angle of a point on the model - when it’s facing away from the camera, you can make the label transparent.
The non concave convex model can be judged by the included angle, but the internal label of the concave convex model can also be seen on the outside. How to judge the included angle and the label inside will be hidden outside
The trick above is useful because it’s much easier than implementing perfect occlusion detection, and much faster, but still looks pretty good. You can usually choose label placements that avoid its limitations.
But if you need a more expensive and accurate method of showing/hiding labels, I would probably start by raycasting (with THREE.Raycaster) to the center of the label.
Thank you very much for your answer. The display and hiding performance of labels with rays is not very good. For example, there is a model of a bowl. I create a label in the bowl. When I rotate to the side of the bowl, the label can’t be hidden by judging with the normal angle
The normal trick wouldn’t be worth mentioning if a perfect solution were both easy to build and fast. 
You can always make raycasting faster by testing against low-poly geometry (e.g. after decimating the original in Blender). A model of a bowl doesn’t need many triangles to provide a pretty good occlusion test.
The only other options I can think of would probably be a fair bit more complicated, like building a spatial index or sampling the depth buffer.
Because I’m a novice, I may not understand the bowl model you mentioned. It doesn’t need many triangles to provide a good occlusion test. Similar to this model, it’s convenient to ask what kind of test you said,
At first glance, that model looks like it has a high polygon count, which would make raycasting slow. If you want to make raycasting faster, you could create a second (lower-poly) version of the model in Blender and load them both, using the low-poly version to raycast and the high-poly version to render.
If the inner sample is written, will it load very slowly, or will it cause the model to jam when it rotates
There’s no inherent reason that having a very low-poly collision mesh should cause loading or framerate to drop. If you’re having trouble getting your app to work you may need to share a demo to reproduce and debug the issue.