What I need is simple actually, it is 3 arrows for each axis to be shown on the object, so that when I drag any of them the object will change its position accordingly. This is widely used in 3d modeling application such as 3dsMax or Maya. I know you can create it from scratch, but doesn't ThreeJS have something ready or isn't there any ready solution?
I looked it up for a while and it seems this topic is not popular among ThreeJS community. Has anybody come across such thing?
Related
I'm investigating the possibility to be able to render 3D objects in a web application. Imagine I have a 3D cube looking something like the left in the figure below.
I then want a slider that sets a threshold value of what to be rendered. Let's say the value was to be set to 1.2. Then I would want only the red parts of the cube to be visible, like to the right in the figure. I also (of course) want to be able to rotate the object freely.
In the figure the cube consists of points in a grid, but I would like a nice looking model out of it instead, like an isosurface.
Is this possible to achieve in an online application via React or something alike? I've read a bit about Three.js but I have only seen usages of pre-made models.
So in short, what I'm asking is if it is possible to go from points -> model -> view, ideally without having to reload the page.
Take a look at this project, it's made with Three.js, on its site you will find more detailed information, but I would recommend creating the model in a 3D program like Blender and then playing with the textures and geometries to achieve the desired effect.
Also check out OrbitControls, a very simple tool to explore your 3D scene
I did this project that responds to the microphone, it's a bit messy but you can play with it and find other projects on my github
I'm planning on creating an interactive 3d application in js. My question is whether or not babylon.js or three.js supports interactivity? Can't seem to find any information on this, and the documentation doesn't help much either.
Note; by interactivity, I mean for the user to be able to draw elements on a given 3d scene.
I can't speak for babylon.js as I've never used it, but I do have some experience with three.js.
If by "draw elements" you mean creating or manipulating shapes/geometries on the fly based on user-input, then the following examples should prove that its definitely possible.
For instance, on the three.js docs page, there is a control-panel used for manipulating a CylinderGeometry() object in the top-right corner of the live-example.
An example of "drawing" from cursor-input using raycasting can be found on thee.js's examples page as well as another example where objects within the scene are draggable.
To be honest, the interactivity of your app is only limited by you.
how to rotate a 3D object in Three.js for all three axises by using mouse and zoom in and out also should work. I don't want to move my camera here. By using mouse, I should be able to watch all the sides of the object. Since I'm new to three.js, if you can give me code example or any class name it will be great. thank you.
it might be more helpful if you provided code that better describes what you've tried and where you would like to end up.
In the meantime I can refer you to this example found on three.js's dedicated examples page that uses standard javascript mouse-events to rotate a TextGeometry about its y-axis.
You can apply the same principles to any Geometry or event that you like.
You may also find it helpful to go through the Three.js documentation. It has an easy-to-follow "Getting Started" section that introduces all the basics followed by a "References" section that explains each of the framework's main components with examples on how to use them properly.
I'm very new to three.js, so please forgive me if my question has already been answered some place else or is obvious.
What I'm trying to do is the following: I have data from a motion capture system. This data consists of frames where each frame has the Cartesian coordinates of multiple markers. I'd like to visualise this data using three.js in a web browser.
So far so good. My initial thought was to simply use geometric primitives for each marker and connect some markers to create a sort of 3D "stickman". However, I found out that three.js has a concept called Skeleton, which consists of a set of Bones. That seems precisely like what I want. However, I do not have any sort of "skin" that I would like to use (e.g. a SkinnedMesh).
My question therefore is two-fold: 1) Should I even use Skeleton for my intentions or is the primitive approach described earlier the way to go and 2) if I'm to use the Skeleton stuff, how do I present it in a scene without using any skin?
Any help here is greatly appreciated!
To answer my own question: The easiest solution that I found was simply using spheres for the markers and connecting them with lines. This has some shortcomings (e.g. lines do not scale with the zoom level), but overall it works quite well.
If you are interested in doing the same, I've put together a simple demo, which is also available on Github.
I came across many demos regarding skinning in Three.js however I cannot understand that does the model that we import, itself should be animating one like, it is already made animating in modeling software and you just import the dummy model and manipulate it ?
If you look at this exmaple: http://threejs.org/examples/webgl_morphnormals.html
Does the model here flamingo.js, already made animating and then exported to js format and the javascript is just playing through the frames?
Please can any one elaborate me the concept here, i am brand new to all this 3D world and WebGl stuffs I just can't figure out how can I animate any model that is imported in js format.
Basically you want your model animated before exporting. There is not really a wrong or a right way about doing this.
Probably the easiest way is through Morph Target Animation. The other method is called skinning, an example of which you can find here.
Most of the 3-D software supports exporting for both formats. If you are not sure that your model is properly exported just check the three js examples.
For instance here is what a morphs animated model looks like: animated horse.
In my personal example I've animated the model through pure javascript rotation and move effects.