HW10

by jason870509

HTML

<div id="info"></div>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js">
</script>
<script src="https://rawgit.com/jyunming-chen/tutsplus/master/js/text2D.js">
</script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, controls;
var gridXZ, obj, text, time = 1,
  sprite;
var colors = [];
init();
animate();

function init() {
  scene = new THREE.Scene();
  clock = new THREE.Clock();

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 150;
  scene.add(camera);

  light = new THREE.PointLight(0xffffff);
  light.position.set(100, 300, 200);
  scene.add(light);

  gridXZ = new THREE.GridHelper(100, 10, 'red', 'white');
  scene.add(gridXZ);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x444444);

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  document.body.appendChild(renderer.domElement);
  ////////////////////////////////////////////////////////////////////////
  var Text2D = THREE_Text.MeshText2D;
  var SpriteText2D = THREE_Text.SpriteText2D;
  var textAlign = THREE_Text.textAlign;

  text = new Text2D("第" + time + "圈", {
    align: textAlign.center,
    // font: '5px Arial',
    fillStyle: '#00ffff',
    antialias: false
  });
  text.position.set(0, 0, 50);
  text.scale.set(0.5, 0.5, 0.5);
  scene.add(text);

  sprite = new SpriteText2D("SPRITE", {
    align: textAlign.center,
    font: '20px Courier',
    fillStyle: '#00ffff',
    antialias: false
  });
  //colors[0] =  '#00ffff';
  sprite.position.set(0, 0, 50);
  sprite.scale.set(0.5, 0.5, 0.5);
  scene.add(sprite);


  var objGeometry = new THREE.CylinderGeometry(5, 5, 3, 60);
  var objMaterial = new THREE.MeshNormalMaterial();
  obj = new THREE.Mesh(objGeometry, objMaterial);
  scene.add(obj);
}
var i = 0,
  first = 1,
  c = 0,
  angle = 0;

function animate() {

  var color = '#' + Math.floor(Math.random() * 16777215).toString(16);

  angle += 0.05;
  if (i % 21 == 0) {
    if (first) {
      colors.push(color);
    }
    sprite.fillStyle = colors[c];
    c++;
  }
  i++;
  obj.position.set(-30 * Math.cos(angle), 0, 30 *...