Three.js - Showing/Hiding part of an object - javascript

I'm looking to create a 3D character using Three.js, with the character having different faces for different textures and also having different items (E.g. holding a sword or a dagger).
Is it possible to use one 3D object and show/hide different parts of that object using three.js?
For example, the object could have a dagger and a sword, but the user only sees the dagger in one scenario, or the sword in another scenario?
Or would I need to use different 3D objects and load them all into the same canvas?
Thanks in advance!

create a custom shader and add custom attribute to your geometry - every vertex will have a attribute with which you can hide(discard) every fragment it creates
there is a complete example here
http://threejs.org/examples/#webgl_buffergeometry_selective_draw

Related

Add Text/Image to the 3D cube/model rendered in Canvas using Three.js at runtime

I want to allow users to add text/images to the 3D model (anywhere they want) rendered on UI using canvas. They can move the text object and can update its dimension. It is kind of little interactive, so users can customize it.
Just wanted to understand if we can do it using three.js, or that feature will be part of the Model image only created from the blender. I tried it and was able to render the image and can access all its mesh objects. But I am not getting how to start on this adding text/image to model or three.js at runtime.
e.g. We can add customized text/image to it. And move it at any place:
https://dsign4you.com/3d/
There are many different ways to do text in THREE.js. A bunch of them are explained here:
https://threejs.org/docs/?q=textgeometry#manual/en/introduction/Creating-text
Option 3 in the list is to build it into the 3D model, but there are several other ways you can do this.

instancing vs bufferGeometry vs interleavedBuffer

I need to draw thousands of points & lines witch have position, size and color attributes and they're position is dynamic (interactive in dragging).
I was using buffer Geometry until now but now I had found two more things
instancing
interleaved buffer
I want to know what are these and how they work? What are advantages and disadvantages of them? Are they better for my case or simple buffer Geometry is best for me?
Can you give me a full comparison between these three?
Interleaving means that instead of creating multiple VBO to contain your data, you create one, and mix your data. Instead of having one buffer with v1,v1,v1,v2,v2,v2... and another with c1,c1,c1,c2,c2,c2...., you have one with v1,v1,v1,c1,c1,c1,v2,v2,v2,c2,c2,c2... with different pointers.
I'm not sure what the upside of this and am hoping that someone with more experience can answer this better. I'm not sure what happens if you want to mix types, say less precision for texture coordinates. Not sure if this would even be good practice.
On the downside, if you have to loop over this and update positions for example, but not the colors, that loop may be slightly more complicated then if it was just lined up.
Instancing is when you use one attribute across many geometry instances.
One type would be, say a cube, v1,v1,v1,v2,v2,v2....v24,24,24, 24 vertices describing a cube with sharp edges in one attribute. You can have another one with 24 normals, and another one with indecis. If you wanted to position this somewhere, you would use a uniform, and do some operation with it on the position attribute.
If you want to make 16683 cubes each with an individual position, you can issue a draw call with the same cube bound (attributes), but with the position uniform changed each time.
You can make another, instance attribute, pos1,pos1,pos1.....pos16683,pos16683,pos16683 with 16683 positions for that many instances of the cube. When you issue an instanced drawcall with these attributes bound, you can draw all 16683 instances of the cube within that one call. Instead of using a position uniform, you would have another attribute.
In case of your points this does not make sense since they are mapped 1:1 to the attribute. Meaning, you assign the position of one point, inside of that attribute and there is no more need to transform it with some kind of a uniform. With instancing, you can turn your point into something more complex, say a cube.

Three.js Mesh or Geometry content

I'm new to Three.js; Is there a way to get separate objects (elements/shells) from a Mesh or Geometry object?
If there's no native way to do that, how could I implement a method for separating faces that are not connected to an ensemble and then detaching them so they form there own Mesh object?
Background: I'm loading a 3d model and would like to be able to unify this model using ThreeBSP, I need to separate the objects before applying the boolean operations.
Thank you
Dig into the Geometry object. It has an array of faces. I don't think there is a native way to check to see which ones are contiguous.
Shooting from the hip, "contagious" in this case means faces that share points with something something that shares points with something that shares points etc. So pick a face. Store it's defining points, find any faces that also use those points, store there points, find all the face that share any of the expanded points etc. Check out the "Flood Fill" function for some direction how to use recursion, as well as how to do the bookkeeping needed to avoid duplicates from keeping you searching in a loop forever.
Good Luck

How to add 2 or more 3D objects to the HTML 5 canvas?

I'm new to Three.js and currently trying to develop a web-based 3d object viewer/editor.
I referred to thingiview.js and able develop functions to view,rotate,and zoom in & out. And I added a drag and droppable function to the canvas. Currently, only ".stl" (lowercase) file type works for this function.
My intention is to add another .stl file to add on the canvas and display. I have thought if it is possible to
- make an array
- store the dropped items(.stl) files to the array
- display all the available items from the array on the canvas
I'm not very advanced in JavaScript language and still learning to improve while developing this function. Please advise if I am on the right track or if there is any possible ways to achieve this. Or, possibly if there is any resources I could read up for more information.
Thank you in advance.
You say you are using Three.js. I think in three you could do things like:
mesh = new THREE.Mesh(sphere, material);
scene.add( mesh );
This will basically only create a sphere and put into scene tho, but you do the same with loaders. scene.add(whatever) to display in scene. To make it easier to access objects later for position change and other, you can push them into a array like so:
var objectArray;
(inside loader)
scene.add( mesh );
objectArray.push(mesh);
Then you can loop the array later to check for instances and do positioning and such.
Hope this helps you a bit.

Three.js geometry types and possibilities of 3d elements

I need to know what types of geometry is possible with three.js.
My requirements are
Quad element |2d
Tria Element |2d
Hexa element |3d
Tetra element |3d
Can i make 3d elements in three.js ? what are my options.
I need 3d elements for engineering purposes and I need to use webgl for my project.
Open Three.js up in a code editor, Find 'parseGeometries'. This will list out all the possible geometric primitives you can use with Three.js. Find each string in the switch case statement to see the arguments a primitive can take.
You can also merge geometry. Visit http://learningthreejs.com/blog/2011/10/05/performance-merging-geometry/ for more information.

Categories