I am visualizing a graph using Three.js and for each node of the graph I add a label using TextGeometry. It is a pretty small graph but when I add text my application gets really slow. What should I do about it?
TextGeometry is more suitable for cases when you are really interested in rendering the text in 3D. It will create complex geometry that will surely slow your app down specially when there is a lot of text or you use CanvasRenderer.
For labels, it is generally better to use 2D labels, which are way faster to render. There are many different approaches to this. These can go on top of the Three.js rendering canvas, on a separate canvas, or even normal HTML nodes positioned using CSS properties. Alternatively, you can dynamically create small canvases of your label texts, and use them as sprite textures always facing camera - this might be the easiest way as the labels would be part of the 3D scene as your other objects. For a separate layer approach, you need to use unprojectVector or such to figure out screen XY coordinates to match your 3D scene positions.
See these SO posts for example:
- Dynamically create 2D text in three.js
- Canvas and SpriteMaterial
- How do I add a tag/label to appear on top of several objects so that the tag always faces the camera when the user clicks the object?
Related
I'm creating a 3D model editor application using THREE.js where you can load a CAD model and have it display on the screen. You can pan, zoom, rotate the camera anywhere around in the scene to view the CAD model from any angle.
I want to add support to be able to draw an arbitrary rectangle on the screen (marquee select box) and anything inside this box I'd like to become selected.
What is a good algorithm to use for this operation?
My first thought was to take every loaded CAD part (that can be selected), and project its bounding box onto the screen. Then test each of these projected bounding boxes to the selection box drawn on the screen for matches. This should work, however I'm worried it would be very slow for large CAD models with 1000's of selectable parts.
Is there a better way to do marquee selections in 3D? Can raycasting somehow be used to speed up the selections?
Without knowing more details about your cad models it'll be a bit hard to give exactly relevant suggestions but I can suggest a few things I might try.
Use Hierarchical Bounding Boxes
If you have a multi-level tree of meshes you can generate bounding boxes for the non-leaf nodes of the tree. This isn't supported directly in THREE but you can manually create and check against these objects before checking if the child objects are within the marquee.
If your tree isn't spatially organized very well or is very flat then you can build an oct-tree and traverse the oct-tree nodes before checking the meshes.
Of course these data structures have to be updated whenever meshes move in your CAD model.
Cache World Bounds
If you cache versions of the bounding boxes on all the meshes in world space then instead of projecting the bounds into screen space you can create a frustum from the marquee in world space and check the all the mesh bounds without having to do any transformation of those boxes.
Asynchronous Checking
Instead of gathering all the intersected bounds on a single frame you could gather them up over multiple frames if it is taking a long time.
Unfortunately I don't think raycasting can do a whole lot for you here.
Hopefully that helps!
I have many textured meshes so they must have different materials. It seems like there are only two ways to clip: globally, and per-material.
However, I want some visualizers to not be clipped (e.g. the plane I'm manipulating to define the clip planes), but all of the rest of the meshes are to be clipped. So I want to use global clipping, but to exempt the parts of the 3D UI (specific objects) from clipping. Is this possible?
I'm fairly certain that I can address this at the application level by separating the scenes so that i can issue the render of items i need clipped by using globally clipped functionality, and then clear out the clip planes and render a second scene containing UI elements prior to clearing the renderbuffers.
Using THREE.Shape, I can create holes, but rather than holes, I wish to define a clip mask.
I ONLY want to render the shape within a mask, similar to html's canvas/context .clip()
Is there a way to do this using holes or other method?
EDIT:
So, more background, I was using canvas to render segments, and imported them into three as planes.
The mouth was 1 canvas, and I was able to clip mask the teeth and tongue onto the black part.
See the whole movie at http://zsenji.com (rendered using the old canvas method)
Anyway, now I'm updating everything to use threejs and no more canvases rendered as planes.
I'm going to try three csg , which can hopefully intersect two geometries. https://stemkoski.github.io/Three.js/CSG.html
Then all I would have to do would be extrude the black of the mouth, and intersect it with the teeth/tongue. I will update
It worked.
I used very simple intersect, similar to https://github.com/chandlerprall/ThreeCSG/blob/master/examples.html
It's a little slow and there are still some other problems relating to overlapping paths, but for this issue, this was the fix.
All the different fills you see are three shapes
Is in any way possible to get intersection of a ray and an animated skin?
I'm trying to highlight animated characters and other objects in my game on mouse over, rather accurately.
I've set up an example of this with my current approach, so you can see the problem:
http://jsfiddle.net/Eskel/k44960Lp/1/
The model is rigged with a single bone and the bone animated to translate from side to side. Raytracing intersection turns it red. You can find the interaction in the middle, where I suppose it interacts with the static geometry.
I'm using Three.Raycaster
raycaster.intersectObject mesh
I am trying to render cylinders for a CAD-like project. As multiple of these will be nested in each other, I am looking to display them similar to this: http://mrwadeturner.pbworks.com/f/1305815353/FC_Cylinder_41702_lg.gif
i.e. I want the outline and the base and bottom circles traced out and the rest should be (semi-)transparent.
Note that this is different from using regular wireframe settings, because that will trace out every face of the sides of the cylinder. The other approach I found - rendering the object twice, once in color and slightly enlarged and once it "regular" version on top - unfortunately won't work either, since multiple cylinders will be nested.
I think this should be possible with custom vertex and fragment shaders, but I am not very proficient in using them. What would be the best way of achieving this effect?
Thanks a lot!
Sound like you just need to apply various textures to the same faces. Next you want to try to create custom texture that is going to be a simple transparent .png image with solid dashed border. Then you'll have to set side:THREE.FrontSide and side:THREE.BackSide to your textures and play around with depthTest.
Another approach is to use lines that you age going to create vertex-by-vertex. See this example for custom line implementation: Hilbert curve and Shapes generation
Hope that helps!