HomeWork6

by omgazero

HTML

<div id="info">
HomeWork6
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

CSS

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

JavaScript

var frame, scene, camera, renderer, light, controls;
var angle = 0, k = 3;
var stats;
init();
animate();

function init() {

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

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 150;

  stats = new Stats();
  stats.showPanel(0);
  stats.domElement.style.position = 'absolute';
  stats.domElement.style.left = '0px';
  stats.domElement.style.top = '0px';
  document.body.appendChild( stats.domElement );
  controls = new THREE.OrbitControls(camera, renderer.domElement);


  frame = new THREE.Object3D();
  scene.add(frame);
  
  columnGeom = new THREE.BoxGeometry(10, 10, 10);
  CylinderGeom = new THREE.CylinderGeometry(10, 10, 10);
  material = new THREE.MeshNormalMaterial();
  
  columnGeom.computeBoundingSphere();
  columnGeom.computeFaceNormals();
  columnGeom.computeVertexNormals();
  
  CylinderGeom.computeBoundingSphere();
  CylinderGeom.computeFaceNormals();
  CylinderGeom.computeVertexNormals();
  
  var mesh = new THREE.Mesh(columnGeom, material);
  mesh.position.set(12, 0, 0);
  var mesh1 = new THREE.Mesh(CylinderGeom, material);
  mesh1.position.set(0, 0, 0);
  
  frame.add(mesh);
  frame.add(mesh1);
  frame.position.set(20, 0, 0);
  
  var axis0 = new THREE.Mesh(new THREE.CylinderGeometry (1,1,30), new THREE.MeshBasicMaterial({
   	color:0xff0000
  }));
  var axis1 = new THREE.Mesh(new THREE.CylinderGeometry (1,1,30), new THREE.MeshBasicMaterial({
  	color:0x00ff00
    }));
  var axis2 = new THREE.Mesh(new THREE.CylinderGeometry (1,1,30), new THREE.MeshBasicMaterial({
  	color:0x0000ff
    }));


	frame.add (axis0);
  frame.add (axis1);
  frame.add (axis2);
  axis0.position.set (15,0,0);
  axis0.rotation.z = - Math.PI/2;
  axis1.position.set (0,15,0);
  axis2.position.set (0,0,15);
 ...