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.
Related
I am curious as to where to start to make something similar to HERE as I cannot find any information about it. It may be fairly simple and im sorry if it is.
What I am hoping to replicate is the colour grid that generates based on the colours and size of the lines. I am looking to replicate the functionality of the application whereby when the user selects a line and changes the width of that line and it will then calculate the image. I have been looking around but cannot find information about how to replicate it. I may be searching for the wrong thing as javascript is not my strongest language.
I know of a roundabout way to do it with svg but where would I start for javascript/jquery?
I know of a way to do it with svg but where would I start for javascript/jquery?
Well, SVG would involve javascript as well, wouldn't it? You're just looking for different ways to display an image. None is native the javascript, that is just a programming language, you'd have to consider which API to use:
There's nothing wrong with SVG! It even seems to be the easiest solution, maybe wrapping DOM code in some nice drawing library.
It has been demonstrated that such is possible with CSS3 background patterns, although I would consider this rather unusable
Use the <canvas> element! This would be the most genuine HTML5 approach, and even though the api is rather simple there exist mighty libraries.
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'm looking for a simple JavaScript library or framework to create interactive 2D animations in the browser. (Excuse the buzzword in the title, but I'm not set on any particular rendering technology like Canvas or SVG.)
This should make it simple to draw and animate arbitrary (though not very sophisticated) shapes on a canvas screen and allow users to select and move these shapes as objects (kind of like a very basic RTS game engine).
Ideally, the following features should be supported (directly or indirectly; I'd implement it myself if necessary):
panning
zooming
fisheye partial zooming
box selection (selecting multiple objects by drawing a box around them)
Not being familiar with such things yet, I find it tricky to research what's out there (e.g. regarding search terms). Also, I have no illusions about some magical package that doesn't require any effort on my part - indeed, I'd prefer simple and readable libraries so I can learn about the basics by reading the source.
If you like simple libraries, perhaps take a look at GameJS. It claims to be "a thin library on top of the HTML5 canvas element." It's a port of PyGame to JavaScript, which in my experience is a fairly nice abstraction layer that at the same time doesn't overdo it.
If that doesn't cut it, have a look at this list of JS game (and animation) engines.
You probably did make a search and found dozens of js game engines. I will just narrow it down for you. It is impossible to just spit out one single js game engine. Also, you might find some to be more appropriate than others based on the type of game you want to make. So here they are
LimeJS
Impact
Crafty
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.
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.