JSFiddle - React, Tailwind, and code Playground

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);	
  var material = new THREE.LineBasicMaterial({
	color: 0xFFFF00//Цвет граней
});
var geometry = new THREE.Geometry();
geometry.vertices.push(
	new THREE.Vector3( 0, 0, 0 ),
	new THREE.Vector3( x, 0, 0 ),
	new THREE.Vector3( x, y, 0 ),
  new THREE.Vector3( 0 ,y, 0 ),
  new THREE.Vector3( 0, 0, 0 ),
  
	new THREE.Vector3( 0, 0, z ),
	new THREE.Vector3( 0, y, z ),
  new THREE.Vector3( 0 ,y, 0 ),
  new THREE.Vector3( 0, 0, 0 ),
  
	new THREE.Vector3( 0, 0, z ),
	new THREE.Vector3( x, 0, z ),
  new THREE.Vector3( x ,y, z ),
  new THREE.Vector3( 0, y, z ),
  
	new THREE.Vector3( x, y, z ),
	new THREE.Vector3( x, y, 0 ),
  new THREE.Vector3( x ,0, 0 ),
  new THREE.Vector3( x, 0, z )
);
var line = new THREE.Line( geometry, material );
scene.add( line );
  
	document.body.appendChild(renderer.domElement);
  camera.position.y = y*1.2;  
  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 =x/2 + rad* Math.sin(angle);
  camera.position.z =z/2 +rad* Math.cos(angle);
  angle =  (angle + deltaTime*1)%(Math.PI*2);
	camera.lookAt(new THREE.Vector3( line.position.x + x/2, line.position.y+y/2, line.position.z+z/2 ));
  renderer.render(scene, camera);
    requestAnimationFrame(rot);
  })();