import * as THREE from 'three';

let canvas, renderer, scene, camera, mesh;
function initiate() {
  canvas = document.getElementById("canvas");
  const width = canvas.width;
  const height = canvas.height;

  renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
  renderer.setClearColor(0xCCFFFF);

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
  camera.position.set(0, 0, 150);

  const textcanvas = document.createElement("canvas");
  textcanvas.width = 400;
  textcanvas.height = 200;
  const context = textcanvas.getContext("2d");
  context.fillStyle = "rgb(255 0 0 / 0.95)";
  context.font = "bold 70px verdana, sans-serif";
  context.fillText("Text in 3D", 0, 60);

  const geometry = new THREE.PlaneGeometry(100, 40);
  const texture = new THREE.Texture(textcanvas);
  texture.needsUpdate = true;
  const material = new THREE.MeshStandardMaterial({map: texture, transparent: true, side: THREE.DoubleSide});
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  const light = new THREE.PointLight(0xffffff, 3);
  light.decay = 0;
  light.position.set(0, 100, 250);
  scene.add(light);
  renderer.render(scene, camera);

  canvas.addEventListener("mousemove", move);
}
function move(event){
  mesh.rotation.y = event.pageX * 0.02;
  renderer.render(scene, camera);
}
window.addEventListener("DOMContentLoaded", initiate);