Description: When working with 3D transformed elements, you might notice that they don’t have any shading and appear to be very flat. In real life, objects block light and have shadows. Surfaces can be matte, reflective, and everything in between. Indeed, we can do better.
If you need to cast light onto complicated geometry, there are options available such as Photon, but they’re very processor intensive. In this article, I’ll show you a solution that can be applied to objects that only have a few faces. Our example will be a 3D movie gallery with glossy posters and, when the posters are rotated, the sides will contain matte information cards with meta data about the film.
To Search:
File list (Check if you may need any files):
3DShadingWithBoxShadows
.......................\.DS_Store
__MACOSX
........\3DShadingWithBoxShadows
........\.......................\._.DS_Store
3DShadingWithBoxShadows\css
.......................\...\.DS_Store
__MACOSX\3DShadingWithBoxShadows\css
........\.......................\...\._.DS_Store
3DShadingWithBoxShadows\css\component.css
__MACOSX\3DShadingWithBoxShadows\css\._component.css
3DShadingWithBoxShadows\css\demo.css
__MACOSX\3DShadingWithBoxShadows\css\._demo.css
3DShadingWithBoxShadows\css\normalize.css
__MACOSX\3DShadingWithBoxShadows\css\._normalize.css
........\.......................\._css
3DShadingWithBoxShadows\fonts
.......................\.....\.DS_Store
__MACOSX\3DShadingWithBoxShadows\fonts
........\.......................\.....\._.DS_Store
3DShadingWithBoxShadows\fonts\codropsicons
.......................\.....\............\.DS_Store
__MACOSX\3DShadingWithBoxShadows\fonts\codropsicons
........\.......................\.....\............\._.DS_Store
3DShadingWithBoxShadows\fonts\codropsicons\codropsicons.eot
__MACOSX\3DShadingWithBoxShadows\fonts\codropsicons\._codropsicons.eot
3DShadingWithBoxShadows\fonts\codropsicons\codropsicons.svg
__MACOSX\3DShadingWithBoxShadows\fonts\codropsicons\._codropsicons.svg
3DShadingWithBoxShadows\fonts\codropsicons\codropsicons.ttf
__MACOSX\3DShadingWithBoxShadows\fonts\codropsicons\._codropsicons.ttf
3DShadingWithBoxShadows\fonts\codropsicons\codropsicons.woff
__MACOSX\3DShadingWithBoxShadows\fonts\codropsicons\._codropsicons.woff
3DShadingWithBoxShadows\fonts\codropsicons\license.txt
__MACOSX\3DShadingWithBoxShadows\fonts\codropsicons\._license.txt
........\.......................\.....\._codropsicons
........\.......................\._fonts
3DShadingWithBoxShadows\img
.......................\...\.DS_Store
__MACOSX\3DShadingWithBoxShadows\img
........\.......................\...\._.DS_Store
3DShadingWithBoxShadows\img\poster01.jpg
__MACOSX\3DShadingWithBoxShadows\img\._poster01.jpg
3DShadingWithBoxShadows\img\poster02.jpg
__MACOSX\3DShadingWithBoxShadows\img\._poster02.jpg
3DShadingWithBoxShadows\img\poster03.jpg
__MACOSX\3DShadingWithBoxShadows\img\._poster03.jpg
3DShadingWithBoxShadows\img\still01.jpg
__MACOSX\3DShadingWithBoxShadows\img\._still01.jpg
3DShadingWithBoxShadows\img\still02.jpg
__MACOSX\3DShadingWithBoxShadows\img\._still02.jpg
3DShadingWithBoxShadows\img\still03.jpg
__MACOSX\3DShadingWithBoxShadows\img\._still03.jpg
........\.......................\._img
3DShadingWithBoxShadows\index.html
__MACOSX\3DShadingWithBoxShadows\._index.html
3DShadingWithBoxShadows\js
.......................\..\.DS_Store
__MACOSX\3DShadingWithBoxShadows\js
........\.......................\..\._.DS_Store
3DShadingWithBoxShadows\js\modernizr.custom.js
__MACOSX\3DShadingWithBoxShadows\js\._modernizr.custom.js
........\.......................\._js
3DShadingWithBoxShadows\README.md
__MACOSX\3DShadingWithBoxShadows\._README.md
........\._3DShadingWithBoxShadows
Download