Programmieren mit JavaScript #001

Programmieren mit JavaScript #001

Zum Anfangen des Programmierens mit JavaScript benötigt man kleine Utensilien.
Also erstes mal braucht man Google Chrome: https://www.google.com/chrome/

Dein Computer muss WebGL Unterstützen da es unter anderen auch um Beispiele wie Lichter, Schatten und 3D - Materialien geht.
Um deinen Computer zu testen ob er dazu in der Lage ist kannst du dies unter http://get.webgl.org

Projekt: 1 Einfach Formen herstellen

Der ICE Code Editor ist hier die Haupt Programmier Fläche für die Zwecke die wir hier behandeln wollen.

Dieser Editor läuft direkt im Browser.

Nun Fangen wir an erstmal den Editor zu Öffnen.

Unter http://gamingJS.com/ice 
Also nächstes solltest du oben Recht einen neuen Editor aufmachen und ernennen.
Unter "New" kannst du dein neues Projekt ernennen.
Dieses Projekt können wir unter anderen "Shapes" nennen.
Da wir in diesem Kapitel Formen Programmieren wollen kannst du es auch Formen nennen.


Kopiert diesen Code in den Editor und du wird etwas sehen:
 // ******** START CODING ON THE NEXT LINE ********

var shape = new THREE.SphereGeometry(100, 20, 15);
 var cover = new THREE.MeshNormalMaterial();
 var ball = new THREE.Mesh(shape, cover);
 scene.add(ball);

  ball.position.set(-250,250,-250);

 var shape = new THREE.CubeGeometry(300, 100, 20);
 var cover = new THREE.MeshNormalMaterial();
 var box = new THREE.Mesh(shape, cover);
 scene.add(box);

  box.rotation.set(0.5, 0.5, 0);
  box.position.set(250, 250, -250);

 var shape = new THREE.CylinderGeometry(1, 100, 100, 4);
 var cover = new THREE.MeshNormalMaterial();
 var tube = new THREE.Mesh(shape, cover);
 scene.add(tube);
 tube.rotation.set(0.5, 0, 0);
 tube.position.set(250, -250, -250);

 var shape = new THREE.PlaneGeometry(300, 100);
 var cover = new THREE.MeshNormalMaterial();
 var ground = new THREE.Mesh(shape, cover);
 scene.add(ground);
 ground.position.set(-250, -250, -250);

 var shape = new THREE.TorusGeometry(100, 25, 8, 25, 3.14);
 var cover = new THREE.MeshNormalMaterial();
 var donut = new THREE.Mesh(shape, cover);
 scene.add(donut);

 var clock = new THREE.Clock();
 function animate() {
 requestAnimationFrame(animate);
 var t = clock.getElapsedTime();
 ball.rotation.set(t, 2*t, 0);
 box.rotation.set(t, 2*t, 0);
 tube.rotation.set(t, 2*t, 0);
 ground.rotation.set(t, 2*t, 0);
 donut.rotation.set(t, 2*t, 0);
 renderer.render(scene, camera);
 }
 animate();

 // Now, show what the camera sees on the screen:

Hier kannst du mehrere Formen erkennen dass erste ist ein Ball das du in diesem Code siehst.
Das zweite ist ein Würfel danach einen Zylinder dann eine Flache Ebene und als letztes kommt ein Ring.

Diese Formen wurden dann mir den Clock zu einer Animation.