webgl

by twobomb three

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>

CSS

*{
  margin:0;
  
}
body{
  overflow:hidden;
}

JavaScript

var x = 25,y =15,z = 20;//Менять размеры тут
  var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera(45 , window.innerWidth / window.innerHeight , 0.1, 1000);
	var renderer = new THREE.WebGLRenderer();
	renderer.setClearColor(0x000000);//Цвет фона
	renderer.setSize(window.innerWidth, window.innerHeight);
	scene.add(new THREE.AxisHelper( Math.min(x,Math.min(y,z))/2 ));
	var cube = new THREE.Mesh(new THREE.CubeGeometry(x,y,z), new THREE.MeshBasicMaterial({color: 0xFFFF00, wireframe: true}));
	scene.add(cube);
	document.body.appendChild(renderer.domElement);
  camera.position.y = y;  
  var rad  = Math.max(y,Math.max(x,z))*2, angle = 0,lastTime= Date.now(),deltaTime = 0;
  (function rot(){
  deltaTime = (Date.now()-lastTime)/1000;
  lastTime = Date.now();
  //camera.position.y =rad/5* Math.cos(angle);
  camera.position.x =rad* Math.sin(angle);
  camera.position.z =rad* Math.cos(angle);
  angle =  (angle + deltaTime*1)%(Math.PI*2);
	camera.lookAt(cube.position);
  renderer.render(scene, camera);
    requestAnimationFrame(rot);
  })();