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.
Related
I want to create a hotel in 3D and emebed it to HTML. The interaction will be rotatetable vertically and windows of the room will be clickable and color of the window(changes like there is light inside the room on and off) and the most crucial for me is the interaction is base on the database. So if in the database room 1 is available. So in HTML where I embed the 3D model of the hotel room 1 will be lights on and clickable. Is it possible? What are the tools? Please help me. Thank you in advance.
There are a lot of ways to do this. But essentially you are loooking for a way to render realtime 3d content in the browser.
Game engines like Unity 3D can do this and can even compile your 3d models to web gl format which runs natively in a browser. It is also possible to build in interactivity that you are looking for.
There are also a number of HTML5 libraries but might not offer ability to load 3ds max models out of the box.
I'm searching for Depth map algorithm for action scrip 3 (or some other language).
My goal is to generate depth map for static image on run time.
I have fount this example http://kode80.com/2009/06/29/papervision-zbuffer-and-dof/, i didn't have the time to investigate it's code but i have the filling its working only with 3d models.
Worst viable option is server side technology that does the work.
Extended description:
I have a task to develop flash application where 3d rotation of a head is simulated by a 2d image uploaded by the user.
There are some japan guys that have managed to do that (http://hairtry.jp/), but the technology that they are using is server side. It generates swf fail with precisely coped eyes and image for the depth map of the uploaded picture. I can't find out what is the sever side technology that they are using so I'm searching for any posible workarounds.
Thanks in advance.
Cheers,
Chavdar Slavov
your easiest solution would be to use a 3d engine, Paper vision seems to be getting out dated, theres a lot of documents on how to use, and tutorials but again not much has been happening with them lately. i suggest Away3d "www.away3d.com" they seem up to date.
for what your asking it is possible to do this 100% in flash but to create a 3d head at runtime and fill the face with hieght maps this is possible, you would need to look at bitmap manipulation.i dont think this is an easy task, what you should learn first is how to add an image to a spheric surface dynamically than look into height mapping by converting certain coulours from the image into different levels of depth i must say im sure this is advanced stuff, i manged to animate a globe that was this same method it looks dodgy but it gives you some source code in the FLA
http://www.ffiles.com/flash/animations/globe_animation_3496.html
The above link will allow you to download my source files, the animation it self is a scrolling image but i used Actionscript to give the globe depth and a sheric look
I would like to know what is the best language to create 3d interactive images for web browser using HTML5.
Here's the thing: I want to create a 3d image, which can be manipulated by the user in specific points (the image's vertexes), so the user will be able to create another image from the image I've provided for him.
I heard you can use jQuery, jCanvas and HTML5 to do that, but I'm not really sure if only those are enough.
It'd be great if I could program all of it with C#, or any other Microsoft tool, but if it's not possible I'm open to new ideas.
I was taking a look at this example, http://gardengnomesoftware.com/samples/pano2vr_3/mozart/ and I was really interested in how it was done.
Do you think it would be complicated to develop such a function using one of the webgl engines out there? Is the panorama image just a texture on a cylindrical model? How is the panorama "cut?"
Perhaps it is just a cube with the images as a texture? You can kind of see the faces when it is loading slowly.
Yes, in this case it is simply a cube that the "camera" is centered in. It's basically the same concept as a skybox in many video games.
How to create a cube-map from photos the way they've done isn't something I have experience with, but the wikipedia article links to some tools that may help, including Hugin
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.