Interactive 3d in the shape of js frameworks - javascript

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.

Related

jsPlumb and Fabric.js integration

I have built a web application in fabric.js where the user adds and draws several graphical elements over an originally blank canvas. My application has arrived to the point in which some of these graphical elements need to be interactively connected (i.e. connected by the user using the mouse). I am trying to design the best way to include these connections in the canvas since, due to aesthetic considerations, drawing lines with fabric might not be best solution for this.
I have run into jsPlumb and found several examples of connections between div and other dom elements. My specific question is: Is it possible to use the jsPlumb functionalities within the objects that fabric.js draws in the canvas. If so, does anyone have an example of this? In case this integration between jsPlumb and fabric.js is not possible, what would be the best way to achieve this?
Many thanks to all in advance.
IMHO, this integration doesn't make much sense.
Everything that fabricjs provides can be done using `jsPlumb', of course animation would require a bit of coding, but it's fairly possible.
Another reason is fabricjs deals with canvas, whereas jsPlumb deals with DOM elements, their integration would be more pain, than coding the actual requirement entirely in jsPlumb.

Drawing a model from different viewpoints on HTML5 <canvas>

Well this is for a project I chose to do for my computer graphics class - drawing a grand piano that can be viewed from different angles.
I haven't yet begun the work, and I just completed lynda.com course on HTML5:Graphics and Animation with Canvas. I can see how one could make a cube, or a ball, those sorts of simple figures. But I don't know how I should proceed on my project. Defining each small surface one by one, sure will be very tedious. Should I learn some more? WebGL or something else? Or is the 'tedious' way an 'okay' way? What would you suggest?
"The different angles" implies that you want to model and render a three dimensional object.
Here is one recipe to success:
Design your model (grand piano) in any open source and free modelling application, like Blender
Then, learn basics of Three.js or similar WebGL framework which simplifies the complex process of rendering a 3D scene
Export your model from Blender and import it to your Three.js JavaScript.
It is possible to render objects to <canvas> on Three.js without WebGL, but using WebGL backend simplies the process a lot and I highly recommend sticking with WebGL.
Here are is one of Three.js examples showing some modeled cars from different angles (cameras).
HTML5 Canvas API is mostly useful for 2D graphics and does not suit for your purpose very well, as you have noticed with its limitations.
Use WebGL, Three.js aims to be very accessible. www.udacity.com have a course on 3d graphics that uses Three.js that is very good for beginning.
Real-time 3D graphics is basically about creating a 2d image that re-creates that effect of a 3d perspective and can be updated in real-time.
Going about this in a brute force way won't teach you anything about how this effect is achieved.

How to make 3D animation with Canvas

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.

How to move camera in webgl?

I started to learn webgl, but it's very hard, so I dont know a lot of things. How do I move the camera in the 3D space and how do I set, where to focus?
WebGL is quite low level and doesn't support cameras as such. If you want to see details please refer to this tutorial which is a part of a big tutorial series you might find helpful.
I would recommend you to have a look at three.js which is a lighweight 3D engine built on top of WebGL. See this HTML presentation for a nice introduction into this library.

What is the best approach to producing graphical charts in a browser?

I've started a new open source project aimed at providing a quality project management experience. To do this, I need access to a set of chart tools (Flash is off the table), and very specifically one that includes a Gantt chart. I've done my homework and shopped around the web and I've more or less come to the conclusion that what I want doesn't exist, at least not for free. So chances are I'm going to have to write this from scratch.
If I was going to create a Gantt chart with which people could interact with (which I'm assuming means having excellent DOM support), then what technology would I use? Should I go with SVG? Or HTML5 Canvas? Something else? Your suggestions are much appreciated.
Also, a requirement would be that whatever library I use needs to be actively supported in the community (i.e. no dead projects).
I would not think there would be many free options as this is a niche-need.
JS Option:
http://www.jsgantt.com/
http://code.google.com/p/flot/
Promising Perl modules:
http://cpansearch.perl.org/src/DARNOLD/DBD-Chart-0.82/dbdchart.html
http://search.cpan.org/~awestholm/Project-Gantt-1.03/Gantt.pm
Update:
There's been amazing advancements in terms of interactive/web charts in the past few years. Shortly before your question was asked, D3.js was created, which has become a generally accepted library, which uses SVG to implement visualizations. Here's a basic example and a more advanced implementation using D3. Note; Gantt charting is still in its infancy; D3 will most likely revisit it in the future.
The argument of Canvas vs SVG is one that has been considered many times. You should read this article by Microsoft; How to Choose Between Canvas and SVG for your Site. Basically, if you have many elements you have to display, Canvas will perform much better. If accessibility is a priority, SVG is better.
In terms of working with Canvas vs SVG, canvas feels more fluid and it is certainly more capable with WebGL, but SVG is more transportable. They both have their merits.
If you're going to make your own, I'd recommend the SVG library Raphaël, which allows you to draw things using SVG fairly easily. It's also simple to make mouse event handlers and other things, which you could use to make it interactive.
I haven't had much experience creating interactive graphics with canvas, but my instinct is that it would be hard to handle mouse events since you don't have "elements" to add event listeners to.

Categories