Three.js base setup

three.js

import * as THREE from 'three';
const OrbitControls = require('three-orbit-controls')(THREE);

let camera,
  controls,
  scene,
  renderer,
  mesh,
  time = 0;

const animate = () => {
  time++;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
};

const init = () => {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x000000);

  renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio = window.devicePixelRatio;
  renderer.setSize(window.innerWidth, window.innerWidth);

  const container = document.getElementById('container');
  container.appendChild(renderer.domElement);

  camera = new THREE.PerspectiveCamera(
    90,
    window.innerWidth / window.innerHeight,
    1,
    3000
  );
  camera.position.z = 200;

  controls = new OrbitControls(camera, renderer.domElement);

  window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
  });

  animate();
};

init();