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.
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?
This website has an excellent animated map showing the migration patterns of wildebeest in the Serengeti. Unfortunately, they animated their map using Flash.
I wanted to know whether there were alternatives for doing something similar, perhaps with Javascript. I found a plugin called Two.js however the documentation isn't great and it seems to be a bit overkill for what I need.
Does anyone know of any good resources or examples they could kindly link me to?
I think you have two options:
Using HTML5 canvas and animate your objects using window.requestAnimationFrame();
Animate the dom, here you could use GSAP or Web Animation API.
With HTML5 canvas you work with raster image (pixels) instead using the DOM you could animate any HTML elements including also SVG which is vector.
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'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.
Is there a JavaScript library that models 3D polyhedra using the canvas tag or SVG? Say I wanted to produce renderings of the Platonic solids, how would I best achieve this? FWIW, I'm only concerned with WebKit-based web browsers such as Safari and Chrome.
I've seen this cool demo of how to render 3D triangles, but how might I extend it to polyhedra with an arbitrary number of sides?
Take a look at this library: SVG-VML-3D
It uses SVG and falls back to VML on MSIE.
They do have a demo with platonic solids. I don't have a Webkit-browser handy, but presume it should work there as well.
Not a direct answer to your question, but seeing as you mentioned WebKit-only I thought I'd point out the new 3D CSS Transform support which was added to webkit pretty recently. This allows you to do what you want without using any Javascript. I've not seen an example of 3D polyhedra, but there are examples of cubes etc out there - for example here.
There's a slightly more complex demo here which has a ring of rectangles. For a real taste of what you could do (although this does use Javascript for animation) - see the Snow Stack demo.
Most 3D libraries generalize triangles. If you want a polygon with more than 3 sides, you subdivide it into triangles and draw those triangles. If you're interested in just the platonic solids, then you're going to have a pretty easy time, because you can easily get a triangluation of each face by first averaging the vertices of each face, and then using that center and two adjacent vertices of the face to give you a triangularization.