Dies ist ein Ausschnitt aus den Projekt was wir Entwickeln. P.S.: Dieser Ausschnitt ist nur ein Beispiel
Programmieren mit JavaScript
Falls es nicht Funktioniert das hier eine Animation zu finden ist den
Klick hier und über diesen Butten mit den 3 Strichen, können Sie auf New eine neuen Editor öffnen.
Nur noch einen neuen Namen und schon könnt Ihr den Code kopieren und einfügen.
// ******** START CODING ON THE NEXT LINE ********
Kannst du den den Code hinein Kopieren.
var marker = new THREE.Object3D();
scene.add(marker);
var cover = new THREE.MeshBasicMaterial({color: 0x000000});
var body = new THREE.SphereGeometry(100);
var avatar = new THREE.Mesh(body, cover);
marker.add(avatar);
var hand =new THREE.SphereGeometry(50);
var right_hand = new THREE.Mesh(hand, cover);
right_hand.position.set(-150, 0, 0);
avatar.add(right_hand);
var left_hand = new THREE.Mesh(hand, cover);
left_hand.position.set(150, 0, 0);
avatar.add(left_hand);
var foot = new THREE.SphereGeometry(50);
var right_foot = new THREE.Mesh(foot, cover);
right_foot.position.set(-75, -125, 0);
avatar.add(right_foot);
var left_foot = new THREE.Mesh(foot, cover);
left_foot.position.set(75, -125, 0);
avatar.add(left_foot);
marker.add(camera);
// Bäume
makeTreeAt( 500, 0);
makeTreeAt( -500, 0);
makeTreeAt( 750, -1000);
makeTreeAt( -750, -1000);
function makeTreeAt(x, z) {
var trunk = new THREE.Mesh(
new THREE.CylinderGeometry(50, 50, 200),
new THREE.MeshBasicMaterial({color: 0xA0522D})
);
var top = new THREE.Mesh(
new THREE.SphereGeometry(150),
new THREE.MeshBasicMaterial({color: 0x228B22})
);
top.position.y = 175;
trunk.add(top);
trunk.position.set(x, -75, z);
scene.add(trunk);
}
// Jetzt animiere, was die Kamera auf dem Bildschirm sieht:
var is_cartwheeling = false;
var is_flipping = false;
function animate() {
requestAnimationFrame(animate);
if (is_cartwheeling) {
avatar.rotation.z = avatar.rotation.z + 0.05;
}
if (is_flipping) {
avatar.rotation.y = avatar.rotation.y + 0.05;
}
renderer.render(scene, camera);
}
animate();
//Auf Tastendruckergebisse lauschen
document.addEventListener('keydown', function(event) {
var code = event.keyCode;
if (code == 65) marker.position.x = marker.position.x-5; //A
if (code == 87) marker.position.z = marker.position.z-5; //W
if (code == 68) marker.position.x = marker.position.x+5; //D
if (code == 83) marker.position.z = marker.position.z+5; //S
if (code == 67) is_cartwheeling = !is_cartwheeling; // C
if (code == 70) is_flipping = !is_flipping; //F
});
// Now, show what the camera sees on the screen:
renderer.render(scene, camera);
Und lasse dich Überraschen.
Wenn alles Gut ging haben sie eine kleine Figur und 4 Bäume herumstehen.
Aber recht oben auf Hide Code geklickt können sie mit der Figur Interagieren mit W, A, S, D, C und F können sie ihn Radschlagen lassen sie umdrehen und in alle Richtungen bewegen.
Viel Spaß beim ausprobieren.
