<div id="all">
  
  <div class="what">
    <p>what's going on</p>  
  </div>
  <div id="container">
  </div>
</div>
body {
  margin: 0px;
}


#all {
  background-color:black;
}

#container {
  width: 1000px; 
  height: 500px;
  z-index: 10;
  margin:auto;
}

.what {
  z-index: 1;
  color: white;
  font-size: 50px;
  font-family: serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: fixed;
  mix-blend-mode: color-dodge;
  text-align: center;
  margin: auto;
  padding: 50px;
}

p {
  
}

var camera, scene, renderer;
var geometry, material, mesh;

function setup() {
  var W = window.innerWidth,
    H = window.innerHeight;
  container = document.getElementById("container");
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild(renderer.domElement);
  document.getElementById("container").appendChild(renderer.domElement);


  camera = new THREE.PerspectiveCamera(15, W / H, 4, 5000);
  camera.position.z = 600;

  scene = new THREE.Scene();

  geometry = new THREE.TorusGeometry(130, 40, 40, 5, 6.29);
  material = new THREE.MeshNormalMaterial({ shading: THREE.SmoothShading });
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
}

function draw() {
  requestAnimationFrame(draw);

  mesh.rotation.x = Date.now() * 0.0005;
  mesh.rotation.y = Date.now() * 0.0012;
  mesh.rotation.z = Date.now() * 0.0011;

  renderer.render(scene, camera);
}

setup();
draw();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js