WebGL Tutorial mit three.js


Using WebGL 3D animation can be, Games and websites in full 3D without Plugin (As with Flash) realize. WebGL is only supported by a few browsers, which is the main disadvantage is:

  • Firefox ab 4.0
  • Chrome ab 9.0
  • Safari (OS X) from 5.1 (is disabled by default)
  • Opera, nur Beta-Builds
  • Internet Explorer, from “Safety” probably never
  • Android Standard Browser, a great many
  • iOS, Theoretically yes from iOS5.0, but in practice only for iAds for sending advertising (typisch Apple, The main thing money)

As for development, test browser Chrome is recommended due to the speed and the excellent support. Google's push very hard on WebGL and provides a suitable site very good Overview of interesting projects.

From standard ago based on OpenGL ES2.0 WebGL, optimized for mobile applications and their low efficiency.

WebGL mit three.js

To 3D programming in the browser using WebGL you should definitely be using a powerful framework. I chose three.js decided, because the z.Z. popular with most tutorials and extensions. According to the developers, it is also the simplest framework:

“The aim of the project is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies.”

All feature it here.

A few very intreressante demos: Skin, Field, Text, Collection of all demos.

License: MIT License

Documentation (Version 49): Doku, generally, the document is still scalable and contains only Todos and no real help. A thick disadvantage. It is often recommended to familiarize yourself using the included samples in the required methods and properties, what works well.

A Overview of all WebGL Frameworks you can find here (z.Z. as. 30 Piece). The hosting of this site BTW is the developer of the Khronos WebGL standards.

Installation and initial set of three.js

Is simple, only the file Three.js must be integrated. These are here along with a bunch of very interesting demos and tools (unpacked over 100mb).

<script src="Three.js"></script>
<script src="jQuery.js"></script>

<body>
<div id="container" width=''600px" height="600px"></div>

<script>
            var container = $("#content");

            var camera, scene, renderer;
            var mesh;

            init();
            animate();

            function init() {
                //create scene, basic Object for cameras, lights, and meshes
                scene = new THREE.Scene();

                // add camera to scene
                camera = new THREE.PerspectiveCamera( 70, container.innerWidth() / container.innerHeight(), 1, 1000 );
                camera.position.z = 400;
                scene.add( camera );

                //add Cube
                geometry = new THREE.CubeGeometry( 200, 200, 200 );                
                mesh = new THREE.Mesh( geometry);
                scene.add( mesh );

                //create Canvas Object
                renderer = new THREE.WebGLRenderer();
                renderer.setSize( container.innerWidth(), container.innerHeight() );
                container.append( renderer.domElement );

            }

            function animate() {

                requestAnimationFrame( animate );
                //rotate cube
                mesh.rotation.x += 0.005;
                mesh.rotation.y += 0.01;
                //render scene - redraw scene
                renderer.render( scene, camera );

            }
</script>
</body>