Create Trioka Text that move with Object3D in Threejs - javascript

My application consists few hundreds of threejs box mesh moving randomly, each with different attributes (e.g. box id etc.). I would like to create an attribute label/tag for each box, and have these labels move along with the box it is associated with.
I tried to have this done by creating a text mesh using Text() constructor in troika-three-text, and group the text mesh with one of the box instances. But an error appears saying text mesh is not an Object3D, thus cannot be called for 'group' function. Similar error received when I tried to move the text mesh with .position.x/y/z function. According to documentation, it seems Troika text mesh can only be repositioned by accessing anchorX and anchorY properties, but how about movement in Z axis? Appreciate if I could have advise on the steps required to associate troika 3d text to a moving 3D object in threejs.
Thank you.

Related

How can I copy one '3JS canvas' into 2 divs?

Imagine a simple singular geometry object scene being duplicated in 2 canvas's / div's.
Is this possible?
Any ideas would be appreciated please!
I am relatively new to 3JS and I am working on a project where I want to use 1 camera, 1 scene, and 1 renderer and I want to have 1 canvas shown in 2 different DIVS. Essentially, I have a 3d geometry model that I want to be displayed twice in two different divs. Such that I have the 3d model displayed at the top of the page, and the same 3d model shown again at the bottom of the page.
Is this possible? I've already tried creating a new canvas, scene, and renderer to copy functions, but that simply breaks both canvas's. I tried to make a canvas2 and I did not have any luck going down that route.
I also can not seem to find an answer to this problem anywhere on google.

Three.js - Is there any way to use a selection box with the Raycaster?

I have a GLTF scene where I've experimented with the example selection box (code) to select multiple meshes.
However, the results are inaccurate because it picks based on the centroid of each mesh and also gets meshes that are not visible by the camera (viewing one side of a house model selects all the walls in the direction of the box).
I've also experimented using the Raycaster, and it works great for picking with the mouse/pointer.
Is there any way to use a selection box or two Vector3 (starting and ending point of the box) with the Raycaster?
You can use a Raycaster to create a Frustum.
Create two Plane objects to represent your camera's near anf far planes.
Use the Raycaster to intersect your selection area's start/end points against the Plane objects.
Use the intersection points to define the Frustum.
Use Frustum.containsPoint and Frustum.intersectsObject to see if a particular object is within your selection area.

Is there a way to define a dynamic bounding box for the field of view?

Edit 2: I found what I was looking for here. The near and far planes compound the bounding box of the camera.
I have a Perspective Camera and multiple set of points (SphereGeometry) in the space and I want to define a bounding box according to what is visible in the field of view, so that I only need to load the points that are currently visible in the space according to the camera settings.
My problem when defining the bounding box is that I don't have a reference point between the camera position and what I'm currently looking at. For example, if the camera is at the position v1(20, 20, 20), and let's say the mid point of my set of points is set at v2(5, 5, 5). Then, I can define the initial point of my bounding box as this mid point v2(5, 5, 5) , and I could create a bounding box (square) with size (v1-v2)/2. But once I start moving the camera I lose this reference initial point, and I don't know how to obtain a distance parameter to define a proper bounding box of "what is currently visible".
Every time I move the camera I need to know the size of the bounding box and its position so that it represents as accurate as possible "what is currently visible" in the field of view.
One possible solution could be to translate the initial point v2(5, 5, 5) following every camera movement, is there any way to do this or something similar?
Edit:
So far I've been able to replicate #TheJim01 's code into my component, but I think this solution is not what I was looking for or I'm not able to understand it properly. I'm adding some images next to better explain what is going on.
In the next image I have a set of points of various colors, the 8 brown points represent each of the worldBoxCorners before performing a worldToLocal transformation. Which fits the whole space as it should.
Next, I render worldBoxCorners after the transformation. I do not understand how the bounding box is moved or how can I use it.
What I'm looking for is, for example if I zoom in into the space in the greener zone, to obtain a bounding box alike the last image.
The point is to only load the points that are within the field of view, but for that I need to define a bounding box. When I say loading the points, I mean that only the points that are visible should be loaded from the backend (not talking about rendering here).
This solution provides a perfect bounding box for the current loaded space. What I'm missing on is how to define a new bounding box for a given loaded space according to camera parameters change (zoom in/out or rotations).

How to add label to THREE.Mesh when a part of 3D Object is double clicked?

3D object is rendered using three.js.
Double click any part of the 3D object.
The objective is to display a label(2D label) near the part, describing the 3D Object part that is double-clicked by the user. The label should be displayed at the point where user double-clicked the part and always face the camera.
How to display the label like a callout(shape) or display an image, instead of the rounded rectangle as shown in three.js examples?
Can someone give a sample code ?

Can two jcanvas layer masks exist on the same canvas?

Is it possible to create two layer independent layer masks on the same canvas? I've tried, without much success. I suspect it's due to masks affecting layer indexes.
I've highlighted this by enabling masking on mouseover (see here). If you mouseover a layer mask, the other layer masks disappears. If you draw the layer with mask:true as a property only one layer mask will appear. You might be thinking "why not make a separate canvas for each layer mask?" I can't because I intend on using $("canvas").getCanvasImage(); to render the canvas as a composite jpeg (which would be difficult with two canvases).
The end goal would be a canvas split vertically into two panes. Each pane would be filled with an draggable image. Users would move the image in the pane to "crop" it and then render the result as a composite image. This example comes close, but dragging the green box under the right pane creates a deadspace in that pane.
Thanks for you assistance.
Yes, it's now possible with jCanvas. Just be sure to call the restoreCanvas() method whenever you wish to restore a mask, like so:
$("canvas").restoreCanvas({
layer: true
});
Here's an example I made which uses two masks to split the canvas into two panes.

Categories