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.
Related
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?
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.
I am making my first steps using JavaScript and playing with Three.js too.
I am learning how to export and load a Blender animation to Three.js and to make it I am using this example from the Three.js website: http://threejs.org/examples/#webgl_morphtargets_horse
I made a Blender animation (http://s000.tinyupload.com/?file_id=07429365581548704592) and when I export it an I load it to Three.js using the same code it doesn't run.
Do you know why I can't see the animation? I don't know if it is a limitation of the exporter or if it is a problem of my animation.
Thank you
Having spent many hours trying to get Blender animations working with the current release of three.js it is my conclusion that it is functionally if not completely impossible.
I posted a question here about this awhile back. I ended up having to answer my own question. I cover the convolutions you have to go through to get one of the examples (the simplest) working from the .blend file supplied with three.js itself.
The official examples and documentation recommend using ObjectLoader to load exports from Blender, but this doesn't work at all with the current three.js animation system. The new animation stuff uses skinned meshes, and if you look at the ObjectLoader source (src/loaders/ObjectLoader.js) you'll see it doesn't have any logic which uses THREE.SkinnedMesh. The new animation mixer, THREE.AnimationMixer, is not covered in the official three.js documentation.
Further, the Blender exporter is, depending on how you look at it, either very flaky or just plain broken. I go into greater detail about this in the question I linked above, but for example the exporter changes the state of the model: you have to go into pose mode, select all your bones, Alt-G and Alt-R to reset them to rest mode, then select the mesh and go into object mode before you do an export, and the export will transform all the bones back, so if you just export and then immediately export again, for example, you'll get inconsistent results.
From all of this I conclude that importing Blender animations into three.js is effectively if not completely broken, so if you're working on a project for immediate implementation you need to either change your pipeline to not use Blender or change the render end to not use three.js.
I have background on Canvas 2D context, but i want to perform a 3D animation like this one, is Three.js library the best choice to do such animation? Can you point me to some useful tutorial or documentation that may help. Thanx in advance.
That's one of the most common choices.
As WebGL enables OpenGL without the need for libraries, you might also do it with just Vanilla JS but that would be harder as WebGL doens't offer much more refinement over the raw and crude OpenGL.
Apart three.js, you could also try GLGE or PhiloGL but as Three.js is the most popular I would recommend to go for it if you have no specific requirement.
Looks like the demo you linked to is using a canvas library called Clay.js. Not one that I've personally heard about until now. For 3d in canvas the most popular one I know of it Three.js as you already mentioned. It has the benefit of supporting webGL as well (browser based openGL variant).
Three.js has limited documentation and some examples but outside of some books you may buy there isn't a lot of hand holding. You basically need to dive in and start coding. Here are some online resources that may help you get started (not necessarily all focused on THREE.js):
http://aerotwist.com/tutorials/getting-started-with-three-js/
http://learningthreejs.com/
http://learningwebgl.com/blog/
To make it easier to work with THREE.js Jérôme Etienne created a project called tQuery which you can think of kinda like jQuery. A wrapper to make it easier to get your hands dirty. Here's a video where he shows how to create a webGL game in 10 minutes.