I've been looking around but it's very tough to find information on how to create 3D rotating objects on the web.

I am interested in creating 3D rotating pieces of food like fruits, etc.

What is the best way to approach this problem?

1) I don't think it can be done with CSS3 3D transform.

2) Can it be created with some sort of 3D graphics program?

Or is the only option to take physical 3D, frame-by-frame sprite photos?

  • 1
    It's possible that this question might actually be "off topic" for this site. It seems like a better fit on Stack Overflow, since it's basically about web development. – aaaidan Dec 23 '15 at 19:44
  • I thought so as well, but I was also wondering about the Graphics program aspect of it since that might have been necessary. If it is off topic mods please feel free to remove. – Adam Thompson Dec 23 '15 at 19:45
  • If you're looking for an easy way to display 3D files on the web I would recommend you check out sketchfab.com. However if you're looking to just show a 3D object rotating without controls, I would advise you make a video or gif. – AndrewH Dec 23 '15 at 19:54
  • Modeling a realistic fruit could take several weeks to master. In my opinion the 3th option is a more suitable one. There are some nice Javascripts that can make some interactivity for example: ajax-zoom.com/examples/example15.php - google.com.mx/search?q=rotate+3d+javascript – Rafael Dec 23 '15 at 19:57
  • @aaaidan This question is not on topic on StackOverflow as it asks no programming question – Zach Saucier Dec 23 '15 at 20:07

You're right that a CSS 3D transform probably isn't what you're after, since it's difficult to make anything except a flat plane rotate.

WebGL is becoming more common now, and there's a great JavaScript library "Three.js", which makes it easy to load a 3D model and display it in modern browsers.

The traditional approach, however, is still probably your only option if you need to support browsers that don't have WebGL. That is, a frame-by-frame animation. This could be a looping video, a GIF, or a "Sprite sheet" that you animate with JavaScript.

Good luck.

  • I don't need support for older browsers. I will look into three.js, thanks. Do you know what type of program I would use to make the graphic that could be used in that library? Perhaps Blender? – Adam Thompson Dec 23 '15 at 19:46
  • 1
    Blender is a free open source 3D modelling tool that can export to several formats understood by Three.js (e.g. Collada). You could either create these models yourself in the software, or find free/paid "off the shelf" models. (Was that a food pun?) – aaaidan Dec 23 '15 at 19:52
  • The WebGL is not a matter of "old browsers" It is a matter of graphics card drivers. I'm using right now the latest version of firefox, and this particular computer that I use to make casual browsing does not support WebGL. – Rafael Dec 23 '15 at 19:53
  • @Rafael oh? I'm surprised that it doesn't fall back to CPU rendering in that case. I didn't think a graphics card was a requirement for webGL – aaaidan Dec 23 '15 at 20:06
  • This computer is a oldie dual core and has an oldie Radeon card that does not support WebGL. Yeap. The fallback would be nice. Here is a usefull list: khronos.org/webgl/wiki/BlacklistsAndWhitelists – Rafael Dec 23 '15 at 20:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.