I am trying to make a Newton's Cradle on three.js. I am wondering how would I make it so that the balls are able to be pulled and let go so that then they can hit the others and click back and forth?
that is a pretty huge undertaking and not something someone will give you detailed instructions for on this site :) This is probably the reason why your question is downvoted. It's not meant to demotivate you but simply that your question is way too broad. Here are some hints, and definitely come back with more detailed questions once you are on your way:
you need a physics-engine. Have a look at Physijs or cannon.js which
both work well with three.js.
you need some interactions in order to drag one of the balls. For this you will need to understand this demo
but that should be it. You'll need to learn how the physics-engine works, but it will handle all the complicated stuff for you :)
Related
I have a project due in a couple days. I have to do a simulation of what would happen during an asteroid impact on earth. I found this short video on youtube:
text
and it shows exactly what I want to do.
I tried doing it myself because the author did not do any tutorial or explain how they did it except for the fact that they used 'flip fluid addon' which I have. I watched countless tutorials but nothing seems to work because no one did it. Tutorials are all on how to do ocean/sea and how to make an object go through a liquid. I need to make it so an object falls into the liquid and the recreates the slap from the Youtube video. Could someone point me to the right direction? It's really important.
Thank you.
I am currently trying to dive into the topic of WebGL shaders with THREE.js. I would appreciate if someone could give me some starting points for the following scenario:
I would like to create a fluid-like material, which either interacts with the users mouse or «flows» on it's on.
a little like this
http://cake23.de/turing-fluid.html
I would like to pass a background image to it, which serves as a starting point in terms of which colors are shown in the «liquid sauce» and where they are at the beginning. so to say: I define the initial image which is then transformed by a self initiated liquid flowing and also by the users interaction.
How I would proceed, with my limited knowledge:
I create a plane with the wanted image as a texture.
On top (between the image and the camera) I create a new mesh (plane too?) and this mesh has some custom vertex and fragment shaders applied.
Those shaders should somehow take the color from behind (from the image) and then move those vertices around following some physical rules...
I realize that the given example above has unminified code, but still it is so much, that I can't really break it down to simpler terms, which I fully understand. So I would really appreciate if someone could give me some simpler concepts which serve as a starting point for me.
more pages addressing things like this:
http://www.ibiblio.org/e-notes/webgl/gpu/fluid.htm
https://29a.ch/sandbox/2012/fluidwebgl/
https://haxiomic.github.io/GPU-Fluid-Experiments/html5/
Well, anyway thanks for every link or reference, for every basic concept or anything you'd like to share.
Cheers
Edit:
Getting a similar result (visually) like this image would be great:
I'm trying to accomplish a similar thing. I am being surfing the web a lot. Looking for any hint I can use. so far, my conclusions are:
Try to support yourself using three.js
The magic are really in the shaders, mostly in the fragments shaders it could be a good thing start understanding how to write them and how they work. This link is a good start. shader tutorial
understand the dynamic (natural/real)behavior of fluid could be valuable. (equations)
maybe, this can help you a bit too. Raindrop simulation
If you have found something more around that, let me know.
I found this shaders already created. Maybe, any of them can help you without forcing you to learn a plenty of stuff. splash shaders
good luck
I am sorry if it's a duplicate, but most of questions ask an opposite thing: 3D from 2D or sometimes they ask for a tool '2D from 3D' or: what to choose 2D or 3D. My case is different, I don't want any software/tool(s), I have already chosen the dimensions and I want 2D from 3D. Also I would like to give it a try writing myself, that's why I don't want any software.
I do understand that it will be a long term project, especially for such an amateur as me, but I find it interesting, that's why I want to attempt this task.
I will probably take 3D objects from the Xcode's Scene Kit and I would like to write a code, which will convert them into 2D.
I don't know what to start from and what to read. So any help will be very much appreciated. Also if there are some code examples (no matter which language) it will be awesome, because it's good to see how to assemble things/code etc.
//Also, please, have a look at the tags. I am not quite sure whether I choose them correctly. I will add Swift just in case. Because in my case it will be Swift, actually. However, the question is sort of general, so some people who won't use Swift may probably find prospective answers useful as well.
First disclamer, I'm a complete n00b in terms of iOS programming, but have over 15 years of other OOP experience.
I've done extensive search thus far on what I'm trying to accomplish, but have not come up with definitive answer.
I'm trying to create effect of drawing straight lines (simular in effect to fruit ninja cuting motion) where it would draw a line between point a (beginTouch) and b (endTouch) regardless of the angle.
I was able to achieve it pretty easily with use of CAShapeLayer. It also very usefull as it supports some animation options that I would like to be able to apply on end result line.
But what I also need is an ability to emulate physics behavior with resulting line shape, such as bouncing, possibly deforming the line to emulate stretching, and apply some sort of destruction animation (fading/breaking appart).
I'm not sure if the CAShapeLayer is the best option to achieve this effect and if it is where do I look next on extending it or combining it with something else.
I know this is not a specific code example type of question, but expert oppinion is appreciate.
Cheers
Alex
I'm trying to find or create a working example of inverse kinematic posing in three.js. Ideally I would like to export human models from Makehuman via their Collada exporter, load them with THREE.ColladaLoader and set them into different poses in three.js programmatically or through some dat.GUI interface. A bit like an artist doll implementation - I don't need animation, but real-time feedback when tweaking the pose would be nice, and inverse kinematic style posing would be highly preferred.
I've been studying and searching information for days. This http://www.youtube.com/watch?v=6om9xy6rnc0 is very close, but I was unable to find any example code or downloads. The closest working example I've found is this: http://mrdoob.github.com/three.js/examples/webgl_animation_skinning.html However that appears to use predefined animation frames, which in turn appears to manipulate the bones in forward kinematics manner so that was not much help either.
I couldn't even find a model for testing, as I don't know what to look for when searching something with IK rigs/skinning/bones compatible with Three.js. Makehuman does seem to have plenty of rigging export options, I don't know if any of those are usable.
Is there a usable IK system in Three.js, and if so, are there any working examples, working human models, or any hints on which exact rigging system/workflow should study to accomplish this? If direct Collada support is not possible, creating the characters in Blender and exporting them is an option too..
EDIT: found this live demo http://www.akjava.com/demo/poseeditor/ but the code is totally unreadable.
I don’t feel competent enough to answer your question, but I’ll post three links which may put you on the right track.
wylieconlon/kinematics
– a great demo of 2D inverse kinematics animation. The code is totally readable.
https://www.khanacademy.org/computer-programming/inverse-kinematics/1191743453
– another demo, this time less flexible but more terse.
How to calculate inverse kinematics
– a rabbit hole of links. Just in case you’d want to dive right into the thing.
This seems promising.
Fullik : javascript fast iterative solver for Inverse Kinematics on three.js
is a conversion from java to Caliko 3D libs
Caliko library is an implementation of the FABRIK inverse kinematics (IK) algorithm
https://github.com/lo-th/fullik