Is it possible to customize a 3D object (ex mobile phone) as present in https://www.youtube.com/watch?v=bAZR-IPxbag.Here as we are adding a 3D object and then customizing it giving real 3D product view.If it is possible then how can this be achieved?Please suggest.
Thanks
In The video that you have linked they use a 2d image of the phone. They might have took a picture of a 3d phone, or simulated it in 3d, but you you are seeing is a 2d result, which only seems 3d.
If you are looking for actual 3d in the browser (which you probably don't need if you are trying to make something like the one in the video) look for "HTML5 3d libraries" on google.
I would reccomend the http://threejs.org/ library as it is the easiest to use.
Related
I am fairly new to actionscript and was wondering is it possible to create 3d shapes (cones, spheres, cubes) using actionscript.
I would like not to have to use a plugin.
The shapes must be 3d as I need to rotate them.
Here you will find Adobes documentation for what you are looking for:
http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS7D38179D-58B9-409c-9E5C-257DDECB1A02.html
Is there any specific reason that you don't want to use 3D libraries like away3D?
I think Matej's answer does not fully cover the topic as the link he gave only describes a classic display list approach to drawing 3D objects. Depending on your needs, drawing things using classic display list can be slow, as it is not GPU accelerated. If you want to utilize your GPU you can use Stage3D APIs - that does not require any external frameworks. Here's an excellent article for starters.
And even though you can render 3D content using 'raw' Context3D, I`d recommend using a framework like Away3D or Alternativa3D. Both are open source, by the way.
I need some suggestions in choosing a html5 canvas framework for my project
The project aims at developing a visualization application based on some data and using generative art.
Can someone provide some pointers to a mature framework. Some of the essential requirements I am looking for are as follows
Scenegraph based model with multiple layers.
Standard ZUI (Zoom able user interface ) features like , pan, zoom, move ,
rotate, scale , translate , position etc.
Animation , both frame based and object based (should be able to pick a object in the scenegraph and animate from one point to another like the PPT animation paths).
Apart from mouse , keyboard and touch , should support programmatic events based on custom events/timers etc (required for generative art based rendering)
Should support desktop browsers as well as phones.
I have come across many great frameworks like
Paper.js
Kinetic.js
Fabric.js
Easel.js
All of them support the first and the second requirement ( at least partially )
but not sure about the others.
Please suggest a mature framework.
After some more research and posting this question on the mailing lists of the above mentioned frameworks, I have finally decided on Paper.js
Paper.js looks very impressive and the code style looks neat compared to others.
Although I was also impressed by Kinetic.js but for now it is under wraps.
Easel.js is also very promising but since it is still in alpha will keep tracking it .
I'm doing a football game which is now seen from above, I would like to know the easiest way to transform it into a perspective view.
There are a few isometric engines out there.
http://www.emanueleferonato.com/2010/02/23/11-flash-isomet...
http://code.google.com/p/as3isolib/
http://www.kirupa.com/developer/actionscript/isometric_tra...
(tutorial)
http://gotoandlearn.com/play.php?id=136 (Can recommend this site)
What is isometric? Well google images shows alot: http://images.google.nl/search?tbm=isch&q=isometric
It is a kind of a eagle eye perspective that I think you are looking for. And you dont need a full 3d engine for it.
If you just want to rotate the stage and don't care about a fully isometric 3D environment, you can try playing around with the stage.rotateX stage.rotateY and stage.rotateZ properties. For a richer 3D game, you'll want to look at some of the isometric links (posted by SynerCoder) or a full 3D engine like Papervision3D (http://blog.papervision3d.org/)
Is there a way to embed Sketchup models on a website? Preferably a free one, if it's a commercial solution I'd like a confirmation that it's actually worth the money... I know about the 3D warehouse thingy where you can rotate it (javascript and some images), but I can't upload anything to the 3D warehouse 'cause it always "resets the connection".
You can try the upcoming WebGL Functions in modern Browsers. There are some Javascript Libraries that can read model files and show them within your (HTML 5?) website. I have not used them yet, but try these links if this sounds interesting:
https://github.com/mrdoob/three.js/
https://github.com/timjb/sketchup-threejs/
I made a patch of an example game in three.js. Added ColladaLoader and Sketchup model + Third Person Shooter controls:
https://github.com/irony/Nemesis
Try it out (Works best in Chrome)
http://peaceful-woodland-4410.herokuapp.com/index.html
You can use http://sketchfab.com, they even have a SketchUp exporter.
Yes, you can do it without cost. See here: https://help.sketchup.com/en/article/3000258
EDIT:
There were some free rendering sites apart from Google, but they don't seem to be in operation anymore. Posting to the Google 3D warehouse is going to be your best bet. Regarding your problem posting there, try it with Chrome.
EDIT #2:
If you don't want to upload to Google 3D Warehouse, you can achieve a similar effect with a little work. 3D Warehouse doesn't actually give the visitor the power to manipulate something in 3D, but rather it lets them "rotate" the image horizontally by simply showing a series of preset images of the 3D from various angles. You can take shots of your 3D object, import to Photoshop and create your own gif of the spinning object. A little more work than relying on Google, so you'll have to decide if it's worth it.
EDIT #3: If all else fails you can simply post the 3D model on your site as a downloadable file and advise visitors to get Sketchup to view it.
I'm trying to make some web-based board games, and I want the interface to be pannable and zoomable. Much like how in Google Maps, you can pan and zoom the map, I want the game board to be moved and zoomed. Unlike Google Maps of course, I do not want to work with image tiles.
Can anyone give me recommendations as to what technology to use? Would this be a good fit for plain HTML? HTML 5 Canvas? or SVG? Any particular JS libraries to recommend or something else entirely?
I'd like to avoid flash and Java. And browser compatibility is plus, but not the most important factor. For example, I think it would probably be OK to require Chrome Frame for older IEs.
Any ideas/advice would be appreciated.
A few thoughts:
Use the OpenLayers UI with a "fixed" strategy to load vector graphics for your board all at once. (This is overly heavy-weight, probably, but comes with pan-zoom and IE compatibility.)
Use Raphael to build your board in SVG, using RaphaelZPD for pan-zoom. RaphaelZPD isn't cross-browser (even though Raphael is), so you'd need Chrome Frame for IE compatibility. This would be pretty lightweight, I think.
Use pure SVG for your board, use SVGpan for pan-zoom. Chrome Frame required here too, though you could use SVGweb if you wanted. You could draw your boards right in Inkscape, clean up the SVG's and add whatever ID's you need in the XML (SVG is XML under the hood), and interact with the board with jQuerySVG if you like, or script interaction by hand. Did I mention that CSS works with SVG? I think this is your best bet.
I can't think of an advantage to using Canvas here, unless you had lots of animation or bitmaps. SVG is far more transparent in how it works - it's XML under the hood, and when rendered in a page, becomes DOM nodes you can easily manipulate in modern browsers.
Plain HTML would probably be hard to handle scaling with. I've seen plenty of image scalers, but haven't seen complex HTML structures, and complexity would be compounded by needing to pan at a zoomed level.
If you want total control of your development environment you could create your own web rendering plataform. I think you can use HTML canvas 5 as your interface with the browser.
You can easily implement drag, pan and zoom using HTML canvas. This approach is very similar with game development in many plataforms. Here an example of using HTML canvas 5 for an interface that supports pan, drag, and zoom.
Having the control of your environment you will have a wide range of possibilities.
If you don't mind tiles, I'd suggest checking out Polymaps "A JavaScript library for image- and vector-tiled maps using SVG". It's probably possible to borrow some parts from there for panning and zooming.