Possible to recreate the labeled geometry example on an animated mesh? - javascript

I'm interested in if it would be possible to reproduce the Labeled Geometry three.js example on an animated asset, and if so, how?
I want to attach labels to an animated 3D model but they do not move along with the asset (even if I parent them to it) I'm guessing because the animation performs a mesh deformation itself.
Is there a performant way to have, say, the sprite's position reference that of a specific vertex in the animated mesh buffer? Something that would not require me to manually update the sprite's position whenever the mesh's animation progresses. Ideally I would like to parent the sprite to a particular face or vertex on the mesh, but as far as I know there is no way to do this.
Thanks in advance for any help!

Related

ThreeJS CSG with Object3d

I have some issue with threejs. I have a hard object3d which contains sphere, cylinder, circles. These geometric shapes form a complex object. I add this object to scene and and next i add the same but smaller object to the scene.
I can rotate first object, but when a small object goes beyond the borders of a large one, I need to clip it like overflow: hidden in html :-).
I found library "three-csg-ts
" but this library works only with geometry. I tryed use it, It's not correct for me. Because i need rotate this object before i put it on scene.
Maybe somebody can help me?

Make on object partially transparent using three.js

I'm experimenting with three.js. Based on several tutorials I've created a small script that loads an object from obj file, puts a texture on it and provides some interactive features like camera control and collision detection when the cursor moves over the object on screen.
I know how i can change the transparency of the whole object, but now I'm looking for a way to make the loaded object partially transparent depending on the cursors position. If the ray of the cursor intersects the object, all triangles nearby the collision point should get a higher transparency so that i can see other objects inside or behind this object. Is there a way to do this? Anybody knows a tutorial which shows a solution for the implementation with three.js?
For any help or approach I would be grateful.
Its possible to write a custom vertex shader for that, where each vertex has a transparent attribute, and with mouse movements, find the intersection face, and modify face's vertex transparent value.
http://jsfiddle.net/meirm/58w9cfb0/
in this example i wrote very simple shader with attribute opacity per pixel, then in the intersection testing i change the opacity for intersected face's vertices
attribute float opacity;
...
attributes.opacity.value[intersects[0].face.a] = 0.5;
attributes.opacity.value[intersects[0].face.a] = 0.5;
attributes.opacity.value[intersects[0].face.a] = 0.5;

How do I render objects as 'icons' in three.js?

Say I have a nice spaceship rendered in my scene. I then zoom out and the ship becomes smaller. This is all quite simple to achieve. Now at some point I want to replace the spaceship object with a simple triangle representing the ship. At this stage the icon for the ship should be rendered instead of the ship. Obviously the triangle should move based on the ship's movement and my camera movements. The triangle should not change orientation, so even if I rotate the camera or have the ship roll the triangle should stay the same orientation. So on a canvas this would be very simple to do. I would just take the x and y components of the 3d object and draw my triangle at the coordinates. My problem is that I do not know how to draw on the WebGL canvas directly? Is it possible? If not do anybody have any pointers to strategies to get this done? I would be happy if I could get nudged in the right direction :) Thanks in advance.
Update : What I eventually decided to do was to use the orthographic camera overlay approach suggested below and in a couple of other places.
Use Sprite object for icon. Then place icon right between spaceship and camera in a specific distance from the camera (using Raycaster or just calculation).
Use of orthographic overlay as mentioned by #WestLangley is also possible. Since you would have to calculate ship's position relative to your canvas in this case, maybe you could even create pure HTML overlay using DIV and place your icon in it as IMG object.

Including an image with Three.js

I'm actually trying to include a .jpg image into my 3D scene. All solutions i have found consisted in apply those images on meshes as texture : but then the scene does not look like well. Indeed, we can see the mesh border whether it be a plane or sphere... I just want to see the image. Does exist it another solution ?
On my application, i want to rotate an airplane around the earth, and the problem is about including this airplane.
Thanks for your help :)
Perhaps the class THREE.Sprite will accomplish the effect you want. THREE.Sprite can display an image, and can use either screen coordinates (e.g. canvas coordinates) or it can be part of your 3D scene, but a sprite image is always facing the camera. If you want the image to rotate, you do need to use it as a texture on a mesh. Whatever you decide to do in the end, I've posted a bunch of tutorial-style examples at http://stemkoski.github.io/Three.js/ that may help. Good luck!

Background with three.js

Can anybody help me with three.js?
I need to draw background, something, like a THREE.Sprite, but it neet to be UNDER any 3d object, that will draw later. I have a camera, that can be move only on Z axis.
I tryed to use:
cube mapping shader - PROBLEM: artefacts with shadow planes, it's unstable draw
THREE.Sprite that dublicate camera moving - PROBLEM: artefacts with shadow plane - it have a edge highlighting OR drawing only other spirtes without objects.
HTML DOM Background - PROBLEM: big and ugly aliasing in models.
What can I try more? Thanks!
You could maybe try drawing in several passes, i.e. making a first render of the background scene to a buffer, and then a second one over the first "buffer". Maybe using the buffer as background (painting it in 2D with an orthographic projection, and disabling depth buffer writes in that pass).
I haven't tried it myself with three.js, but that's how I'd do that with "traditional" OpenGL.
If you want a "3d" background i.e. something that will follow the rotation of your camera, but not react to the movement (be infinitely far), then the only way to do it is with a cubemap.
The other solution is a environment dome - a fully 3d object.
If you want a static background, then you should be able todo just a html background, i'm not sure why this would fail and what 'aliasing in models' you are talking about.

Categories