Three.js simple rotating cube tutorial

by realhunts

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>

CSS

body {
  margin: 0;
  overflow: hidden;
}

JavaScript

var scene = new THREE.Scene();
var clock = new THREE.Clock();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 300);
camera.position.set(2, 5, 3);

var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var group = new THREE.Group();
group.scale.set(3, 1, 2);
scene.add(group)



var Box = function(){
var singleGeometry = new THREE.Geometry();


setPlane("y",  Math.PI * 0.5, 0xff0000); //px
setPlane("y", -Math.PI * 0.5, 0xff0000); //nx
setPlane("x",  Math.PI * 0.5, 0x00ff00); //ny
setPlane("y",  0, 0x0000ff); //pz
setPlane("y",  Math.PI, 0x0000ff);// nz

function setPlane(axis, angle, color) {
  let planeGeom = new THREE.PlaneGeometry(1, 1, 1, 1);
  planeGeom.translate(0, 0, 0.5);
  switch (axis) {
    case 'y':
      planeGeom.rotateY(angle);
      break;
    default:
      planeGeom.rotateX(angle);
  }
  let plane = new THREE.Mesh(planeGeom, new THREE.MeshBasicMaterial({color: color, side: THREE.DoubleSide}));
  singleGeometry.merge(plane.geometry)
  }
  singleGeometry.scale(0, 40, 40)
  var mesh = new THREE.Mesh(singleGeometry)
  scene.add(mesh)
}

var halfbox = new Box()

function render() {

  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

render();