this is my first post and I need an answer I didn't find anywhere else. Oh and btw I am not a professional programmer, actually more like a 3d graphic designer ;)
I would like to import json models with a simple animations ( just translation e rotation ) made in 3ds max.
I just found examples about skinned meshes and bone animations, but that's far from what I want.
I simply need three.js to load and play a keyframe animation when I press a button. Can someone help me find a solution?
Thanks everybody in advance, Andrea.
You can start with this example Import Collada to THREEJS
Press "View Source" and look at model path and Animations script usage.
You could try to replicate the animation using Tween.JS, which is a library that is used in one of Three.js examples.
If you're interested using this technique, there is also an in-depth tutorial combining the two.
Related
So now I can pretty much do almost whatever I want in 2 dimensional games/apps, using HTML Javascript Canvas.
Problem is now I want to make some 3D applications, but have NO IDEA where to start.
3D is completely new to me and I think regardless it seems like it will be very difficult for me to learn, but I want to try - I just don't know what to do now.
I've looked into three.js a bit, but it's chinese for me.
Thanks!
start learning from three.js
three.js
you can create mini to almost-enterprise quality of application with it. But here is a little issue, if you think about creating large games, where you need to put a lot of collisions , you can try babylon.js
they are for your coding aspect. Besides, you need to learn blender/3d studio max. try to get the basic philosophy of three basic operations (i suppose you already have..) rotation,translation,scaling.
try to edit the examples of three.js and see what it comes, trust me, it is not that tough that you are thinking.
After that, you can try shader (GLSL). you can find many shader examples in GLSL playground and shadertoy
Also this website is legendary for learning three.js
and try some others libraries like playcanvas,unity3d(webGL)
happy learning
so I'm wanting to have various sized triangle particles fly in from a random direction (all over the screen) and then assembles to spell the word "Zoid". I have been looking and three.js looks to be the API that I should use for this kinda stuff.
What three.js example should I be looking at?
I am not looking for someone to make this for me, I am only wanting the name of the technique/animation.
http://anime-js.com/ take a look at this seems like a pretty good framework for animated javascript
I have following problem:
I have modelled a small ninja in blender and added a rig and a few animations to it. Now I want to load it in three.js and play the animations. BUT, when I load my model and play the animations, it looks like my rig is totally messed up. I have spent hours to search for an solution but I couldn't find a proper answer yet.
After exporting several times with different export settings I made another test project where i simply animated a cube with 2 bones. When I loaded the test Cube, everything is correct so far.
I setted up a demo for you with a skeleton helper, so you can see whats going on. I know this may seems to be more a blender problem but maybe I am doing something wrong in the code. Since I am more experienced in blender than three.js i think this is most likely the origin of the problem.
demo: http://demo.martenzander.com/
Help is much appreciated!
cheers!
– marten
Okay, soo, after messing arround for some more hours and doing some research on google I found the solution for my problem.
ALWAYS bake Animations before exporting them for three.js!
Before exporting your model and BAKED Animation, jump to Frame 1 and reset your armature by selecting all bones and, holding ALT+R, ALT+G, ALT+S. This will reset your pose to rest position.
#nergal , I hope this is useful in your case!
I'm pretty new with blender but I had the same issues. Have you tried to detach the objects from the skeletal parts and then export it? That is, making the objects unparented to the armature.
That worked for me with the issues I experienced. Not sure if it's the exact same issue in your case.
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.
I want to make a demo using javascript and <canvas>, I was thinking of doing a little moving creature, seen from the top and swimming in a water environment.
Concept "art" :
Is there something I can use to start this project, or do I need to create everything from scratch ?
Here's one demo
http://code.almeros.com/code-examples/water-effect-canvas/
http://rumpetroll.com/ is open source and has the kind of movement you could probably modify to do as you wanted
I'm not sure what exactly do you intend to simulate (or whether I got the conceptual art :) ), but this might be a direction:
processing.js is not a physics engine, but rather a graphics library port to javascript (utilizing canvas) - http://processingjs.org/ .
However, you might find something in their demos that is similiar to what you are trying to create.
One of the original processing library examples has a nice fluid simulation using a particle system, and it runssuccessfully on processing.js - http://processing.org/learning/topics/fluid.html , however the framerate is very poor. You can try it yourself at http://processingjs.org/learning/ide - just copy&paste the code from the example (and prepare for your computer to crawl to a halt).
You can try to adjust the particle numbers (pnum), to improve speed, and play around with other variables.
Sorry I don't know of a library, but I did see a water physics in canvas demo recently:
http://hakim.se/experiments/html5/wave/03/
Maybe you can get some inspiration there...you might be able to accomplish it with a normal JS physics library like Box2DJS.
Just an idea, but you could search for a Java engine and then use GWT to compile it to Javascript.