29 Impressive Examples for Learning WebGL
Just A Reflektor
Google Street View Hyperlapse
Find Your Way To Oz
Chrome World Wide Maze
Hello Racer 3D
360 Car Visualizer
Google Maps Cube
CSS3D Periodic Table
View Demo Web3D
WebGL Nyan Cat
Teach Me to Fly
Ellie Goulding's Lights
By now you have probably heard about - a library which makes working with 3D in the browser easy. With it, you can create the building blocks of 3D modeling - cameras, meshes, lights and more, and apply animations on them. Three.js can draw a scene using a Canvas element, SVG, CSS3D or WebGL.
In this article, you will find a collection of demos, tutorials and resources that will inspire you to learn more about the library.
The impressive demos that you see below are made with the Three.js library and WebGL as a renderer. It is possible to use WebGL directly, but choosing Three.js makes development easier and results in only a fraction of the code. Here are some of the things that are possible with the library:
is a WebGL experiment, powered by the Three.js. It breaks photos down into thousands of particles that are transformed by physics. You can choose any combination of photo, speed and effects. The animations run smoothly which is even more impressive.
is an amazing visual experience, powered by Three.js, which syncrhonizes colors and shapes to music. You fly through a scene filled with colorful shapes, which you can interact with by clicking. Headphones are recommended.
is an interactive film that lets you cast a virtual projection on your computer screen by holding up your mobile device in front of your computer’s webcam. That way, you control all of the visual effects in the experience by moving your phone or tablet through the physical space around you. See some of the amazing effects on the , and the behind the .
Just A Reflektor 图片增加反射光
is a visualization experiment which overlays the world trade of small arms and ammunition on top of a model of the earth which you can rotate in 3D space. You can filter the data set by years and types of ammunition. The visualization is very impressive and runs smoothly.
Arms Globe 大数据3D可视化
downloads Google Streetview data between two destinations, and turns it into an animation of the trip. You can pause and take a look around, or you can drag a target on the map on the top-right which the camera will follow. Give it a few minutes to load or watch to see it in action.
Google Street View Hyperlapse 谷歌道路全景3D可视化
for the Oz the Great and Powerful movie. It combines beautiful artwork with HTML5 and WebGL into immersive experience. It takes place in the circus from the beginning of the movie. You can interact with the environment and use your web cam.
Find Your Way To Oz 寻路模拟
Google's included a WebGL powered world map which presented the search trends and important events from the past year. Click the "Watch the year in review" button to see it.
Google Zeitgeist 时 代脉搏关键事件大数据3D展示
is my favorite Three.js powered game from this list. It is a spin of the classic pong game, but moves it into 3D space. You can play against your friends or computer-controlled bear. The game uses WebRTC so you see a video of your friend's webcam. For a behind the scenes, read through t by one of the creators.