Real world 3D model using CSS3 / Javascript

Question

I need to rotate/animate 360 deg. a real world 3D object from Smart Phones browsers. When a user scrolls on screen that real world object (e.g. a car) needs to rotate or animate. One option can be replacing images one after another.

Is there any better solution anyone can offer using CSS3/Javascript?

Caio Bianchi · Accepted Answer · 2012-08-03 00:09:44Z

1

There's a Javascript 3d Library called Three.js - https://github.com/mrdoob/three.js/ Or if you're looking for something more simple like vectors, you might wanna check out Raphael.js - http://raphaeljs.com

answered Aug 3, 2012 at 0:09

Caio Bianchi

1134 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hasanavi Over a year ago

Thanks for your comment. The first thing is image quality matters. So, I need to use the images of the car anyhow. Building a 3D model of the car is not the solution as it will not be same as images. Any how I need to mimic the 3D models using images only.

Hasith Over a year ago

did u succeed in creating a 3D model with images only? I'm too interested in learning how one could do such.

Endre Simo · Accepted Answer · 2012-08-03 08:22:26Z

0

Three.js won't be the best choice for mobile browsers, considering the WebGL implementation is still a desire on iOS Safari even it's not the case with Android. CSS3 is not capable of working with high complexity 3D object manipulation, so from this perspective is somehow limited. It has all the 3D (rotation, scaling and transformation) functionalities but for post processing effects - which can be obtained with shaders - are out of scope.

But there is a nice little library which combine Javascript with CSS3 to create some 3dish effects: http://www.edankwan.com/lab/css3dEarth

I think this is what You need!

edited Aug 3, 2012 at 8:22

answered Aug 3, 2012 at 6:28

Endre Simo

11.6k3 gold badges44 silver badges52 bronze badges

2 Comments

Hasanavi Over a year ago

Thanks for your comment. As the real world object (car) is very complex to build 3D model I'm planning to go for image solution. Any way I can mimic the 3D model using car images only?

Endre Simo Over a year ago

It's possible and if you are opting for Three.js you need to provide canvas as a rendering context, otherwise won't be available in iOS. Though there is one drawback: canvas is somehow off-limited with high rendering context which means could be some dropped frames here and there.

Collectives™ on Stack Overflow

Real world 3D model using CSS3 / Javascript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related