<div id="container"> </div>
<script type="module" </script>

#container {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
}

import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js";

let camera, scene, renderer;
let mesh;

init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera(
    8,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.z = 40;

  scene = new THREE.Scene();

  const texture = new THREE.TextureLoader().load(
    "https://i.pinimg.com/originals/52/b1/fa/52b1fab53d5cb39ca557d036637b73e0.jpg"
  );
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.x = texture.repeat.y = 10;

  const geometry = new THREE.BoxGeometry(10, 10, 10);
  const material = new THREE.MeshBasicMaterial({
    color: new THREE.Color(0xff0000),
    map: texture
  })

  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)
  window.addEventListener("resize", onWindowResize)
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  requestAnimationFrame(animate);

  renderer.render(scene, camera);
}