body{
  position: relative;
}

.info {
  color:red;
	position: absolute;
  font-weight:bold;
  font-size:20px;
  top:50%;
	width: 100%;
	text-align: center;
	z-index: 100;
	display:block;
}

// import the Three.js module:
import * as THREE from "https://unpkg.com/three@0.126.0/build/three.module.js";

const canvas = document.getElementById("cubesample");

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

const camera = new THREE.PerspectiveCamera( 
	75,
	window.innerWidth / window.innerHeight,
	0.05,
	100
);
camera.position.y = 1.5;
camera.position.z = 2;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial();
const cube = new THREE.Mesh( geometry, material );
cube.position.y = 1.5;
scene.add( cube );

const light = new THREE.HemisphereLight(0xfff0f0, 0x606066);
scene.add(light);

function animate() {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
};
renderer.setAnimationLoop(animate);