Interactive Graphics
Page 1
Plastic Biplane
Swipe left and right to rotate the colorful plastic biplane.
Swipe Left & Right
Swipe to View the Biplane
The biplane was mapped with 3ds Max for the Biplane Game. Find and play the Biplane Game with the search icon, above.
A biplane is a fixed-wing aircraft with two main wings stacked one above the other. The first powered, controlled aeroplane to fly, the Wright Flyer, used a biplane wing arrangement, as did many aircraft in the early years of aviation. - WikiPedia
Sprite Sheet
The biplane displayed on this page, was implemented with a sprite sheet, HTML5, the 2D canvas and JavaScript.
Model
The biplane 3D model's from a third party. I modified and mapped the model with 3ds Max, render to texture and Photoshop.
Book
The biplane example was prepared for the Kindle book Create 3D Games: Learn WebGL Book 2.
Create 3D Games
Learn WebGL Book 2
The e-book,
Create 3D Games
,
teaches how to make two similar 3D games, with WebGL.
The first game, 3D Globe Game,
demonstrates a range of concepts useful for Web developers. Concepts include efficiency, responsive Web design, and optimization.
Learn to create the Globe Game
where players answer twenty questions to find countries on the globe.
The 3D Biplane Game,
displays a biplane aircraft. Find parts on the airplane.
The Biplane Game
reuses and reinforces concepts explained with the Globe Game
.
The Biplane Game
also demonstrates how to use the book's software to make your own games.
The book's games run on mobile devices and desktops. Devices such as cell phones, mobile phones including Androids, iPhones, and Windows Phones, benefit from optimization techniques discussed in the book. Optimization techniques allow games to download and run quickly.
E-book on Amazon Kindle
Buy Create 3D Games
. Select a Country:
Tags
Interactive Graphics
Interactive graphics respond to touch, mouse or tap motion.
2.5D Models
Many examples demonstrate 2.5D
models.
The graphics appear three dimensional.
You can swipe to rotate or view the graphics,
yet they're actually two
dimensional sprite sheets.
Two dimensional sprite sheets render with JavaScript and the HTML5 2D canvas.
HTML5 Graphics Interaction
Image maps and scaleable image maps, react to areas within an image. Picture tags allow developers and designers to display different versions of an image based on screen size or orientation.
JavaScript Interaction
JavaScript includes a long list of event listeners. Window and element event listeners respond to touch movement, taps, mouse movement, window resize events, clipboard, keyboard and form events.
CSS Graphics Interaction
With CSS3 designers can animate properties including location, scale, color and opacity.