Javascript 360 degrees panorama - javascript

Hi I'm looking for a way to create a panorama view with a 360 degrees photo. I need a solution to do create something like QTVR. There is a lot flash based software out there (I'm trying to avoid that) and also some javascript/prototype/jquery solutions. But none of the solutions I've found have the behaviour I'm looking for. I want to eanable users to look around (just horizontal). Furniture objects on the pictures should react on mouseover, so that I might have multiple "layers" to distort. Is there a way to manipulate images in pure javascript or with jquery so, that it looks like they where bent cylindrical? Or does anyone know good libraries that support that kind of image manipulation? Might webgl be a good solution? I don't really know how to start. Is there anyone who could give me a hint. I'm just looking for a direction. google didn't bring me usable results.

Check out three.js
http://mrdoob.github.com/three.js/examples/webgl_panorama_equirectangular.html
Also, you could possibly do some of the image manipulation via canvas.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
It might be easier (with canvas) to just have a fully processed panoramic image, and figure out which pixels represent your interactive object. Then listen for mouseovers on those pixels.

try out http://panorado.com/en/PanoradoJs.php
There you'll find an excellent HTML5/JS based Viewer.

There are lots of tool to do that. Have you tried www.vtility.net ? Im not sure if it had mouse over layering. But it was the only SEO friendly that I have found.

Related

A way to use images for 3D mockups using javascript

Im trying to experiment with product design using javascript, in which the user can select a shirt, mug, box, book for example, and insert a text and/or an image and move it or rotate it or scale it, then they can apply the changes, and a 3D mockup will be generated.
Is this possible using a Javascript library such as Three.js and/or jQuery, or will i need to actually use another technology other than JS, for example WebGL directly ?
I have not dabbled with javascript before as im usually a backend PHP developer, but this idea has caught my attention and i couldnt find enough resources online about it.
Yes this should definitely be doable with three.js
Worst case you can just manipulate a plane with a texture around the product, however I suspect a better way would be manipulating a texture. This would be quite easy if you don't want to manipulate the image in real-time on the 3d mockup, but likely also simple enough to do in real-time.

How can I do complex animations within JavaScript?

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

Geometric effect image manipulation

I'm trying to build a website allowing users to upload a photo of their face and then return a stylized output such as this example :
I'm not a graphics expert by any means so I'm not sure of the correct term to describe this image manipulation effect.
I have looked at a few JavaScript image libraries (Fabric, Pixastic) but they only seem to offer a fairly basic Pixelation effect which is not quite what I am looking for.
If anyone can point me in the right direction of a suitable JavaScript library I would be eternally grateful!
This would need to implement:
Delaunay triangulation
Voronoi diagram
These are relatively complex areas in the field of polygons and the combination (Voroni/Delaunay tesselation) represent a very specific usage (as the effect in the image). You can probably get away with just the triangulation though, but there are libraries out there that can help you with the basics and from there you may be able to apply it to images and the color values.
Here are a couple of projects to start you off:
https://github.com/ironwallaby/delaunay
https://code.google.com/p/javascript-voronoi/

a JavaScript library for drawing intractable shapes

I'm looking for a JavaScript library/framework I can use for drawing circles, rectangles, rulers and to be able to interact with them (rotate/resize) using both an API and the UI (so the user can do it as well).
I'm looking for an HTML5 compatible solution, SVG is not an option for me.
Happy with a jquery plugin, if there is anything like that.
I found Paper and it seems that it can draw all shapes and I guess that with some efforts I can do a ruler there, but I didn't find how to interact with the objects it draws.
Would be more than happy if anyone can give me any tip! :)
Thanks!
Kinetic is pretty solid and its open
http://kineticjs.com/
good tutourial site to get you started
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rect-tutorial/
EaselJS is more corporate...
http://www.createjs.com/#!/EaselJS

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.

Categories