JS viewer

Syntax-highlighted view of JS of World: 3D for Kids World unchanged




// Example of porting World unchanged to AB using plain Three.js API

// World from "3D Game Programming for Kids", Second Edition
// "Shapes" from Chapter 1
// https://pragprog.com/titles/csjava2/source_code
// unchanged 





/*
<!--
 ! Excerpted from "3D Game Programming for Kids, Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material,
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose.
 ! Visit http://www.pragmaticprogrammer.com/titles/csjava2 for more book information.
-->
*/

 // The "scene" is where stuff in our game will happen:
 var scene = new THREE.Scene();
 var flat = {flatShading: true};
 var light = new THREE.AmbientLight('white', 0.8);
 scene.add( light );

 // The "camera" is what sees the stuff:
 var aspectRatio = window.innerWidth / window.innerHeight;
 var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000);
 camera.position.z = 500;
 scene.add(camera);

 // The "renderer" draws what the camera sees onto the screen:
 var renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);

 // ******** START CODING ON THE NEXT LINE ********

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

 var shape = new THREE.CubeGeometry(300, 100, 100);
 var cover = new THREE.MeshNormalMaterial(flat);
 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(flat);
 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(100, 100);
 var cover = new THREE.MeshNormalMaterial(flat);
 var ground = new THREE.Mesh(shape, cover);
 scene.add(ground);
 ground.rotation.set(0.5, 0, 0);
 ground.position.set(-250, -250, -250);

 var shape = new THREE.TorusGeometry(100, 25, 8, 25);
 var cover = new THREE.MeshNormalMaterial(flat);
 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:
 renderer.render(scene, camera);