three.js dev template - module

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
 
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

CSS

body {
	margin: 0px;
}

JavaScript

// Simple three.js example

import * as THREE from "three"
import { OrbitControls } from "three/addons/controls/OrbitControls.js"
var GUI = lil.GUI

let mesh, renderer, scene, camera, controls
const gui = new GUI()
init()
animate()

function init() {
  // renderer
  renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.setPixelRatio(window.devicePixelRatio)
  document.body.appendChild(renderer.domElement)

  // scene
  scene = new THREE.Scene()

  // camera
  camera = new THREE.PerspectiveCamera(
    40,
    window.innerWidth / window.innerHeight,
    1,
    10000,
  )
  camera.position.set(1, 2, 4)

  // controls
  controls = new OrbitControls(camera, renderer.domElement)
	controls.target.set(0,1,0)
  controls.update()
  // ambient
  scene.add(new THREE.AmbientLight(0x555555))

 
  const lightA = new THREE.AmbientLight(0xffffff, 1)
  scene.add(lightA)

  // axes
  const axes=new THREE.AxesHelper(20)
  axes.position.set(-1.77,0,-0.1)
  scene.add(axes)

  const videoElem = document.createElement("video")
  videoElem.loop = true
  videoElem.crossOrigin = "anonymous"
  videoElem.muted=true
  videoElem.src =
    "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4"
  videoElem.play()
  
  const imageTexture = new THREE.TextureLoader().load( "https://picsum.photos/id/870/512/512" );
  const videoTexture = new THREE.VideoTexture(videoElem)
  
  videoTexture.colorSpace = THREE.SRGBColorSpace
  imageTexture.colorSpace = THREE.SRGBColorSpace
  
  // geometry
  const geometry = new THREE.PlaneGeometry(1.77, 1)





  const emit_mesh = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({
    color: 0x000000,
    emissive: 0xffffff,
    emissiveMap: videoTexture,
  }))
  emit_mesh.position.y = 2
  scene.add(emit_mesh)

  const diffuse_mesh = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({
    map: videoTexture,
  }))
  diffuse_mesh.position.y = 1
 ...