Three.js cube

Simple Three.js demo.

by Joe Pea

HTML

<script src="https://unpkg.com/[email protected]/build/three.js"></script>

CSS

body {
    margin: 0;
    background: #000;
}

JavaScript

/* global THREE */

(function() {

  'use strict';
  
  THREE.Object3D.prototype.updateMatrix = function () {

    this.matrix.compose( this.position, this.quaternion, this.scale );

    var pivot = this.pivot;

    if ( pivot != null ) {

      var px = pivot.x, py = pivot.y,  pz = pivot.z;
      var te = this.matrix.elements;

      te[ 12 ] += px - te[ 0 ] * px - te[ 4 ] * py - te[ 8 ] * pz;
      te[ 13 ] += py - te[ 1 ] * px - te[ 5 ] * py - te[ 9 ] * pz;
      te[ 14 ] += pz - te[ 2 ] * px - te[ 6 ] * py - te[ 10 ] * pz;

    }

    this.matrixWorldNeedsUpdate = true;

  };

  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  var geometry = new THREE.PlaneGeometry(5, 5);
  var material = new THREE.MeshLambertMaterial({
    color: 0x00fff0,
    side: THREE.DoubleSide,
  });
  var plane = new THREE.Mesh(geometry, material);
  plane.pivot = new THREE.Vector3(-2.5, -2.5, 0)
  scene.add(plane);

  camera.position.z = 32;

  var pointLight = new THREE.PointLight(0xFFFFFF);

  pointLight.position.x = 10;
  pointLight.position.y = 50;
  pointLight.position.z = 130;

  scene.add(pointLight);

  var reqAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;

  var angle = 0
  var axis = new THREE.Vector3(1, 1, 0).normalize()
  
  var rotateCount = 0

  var render = function() {
    reqAnimFrame(render);
    
    if (rotateCount % 4 === 0) {
    	plane.rotation.x += 0.09
      
      if (plane.rotation.x >= Math.PI) {
        plane.rotation.x = Math.PI
        rotateCount++
      }
    }
    else if (rotateCount % 4 === 1) {
      plane.rotation.y += 0.09
      
      if (plane.rotation.y >= Math.PI) {
        plane.rotation.y = Math.PI
       ...