three.js dev template - module

by Cantinos

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/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>

<div class="" id="Renders">

</div>

CSS

body {
	margin: 0px;
}

JavaScript

// Simple three.js example

import * as THREE from 'three';
import {
  OrbitControls
} from 'three/addons/controls/OrbitControls.js';
import {
  CSS3DRenderer,
  CSS3DObject
} from 'three/addons/renderers/CSS3DRenderer.js';
let mesh, renderer, scene, camera, controls, rendererCss;

init();
animate();

function init() {
  // scene
  scene = new THREE.Scene();

  // camera
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 10000);
  camera.position.set(1, 0, 1);

  // renderer
  const renderContainer = document.querySelector('#Renders');

  renderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
  });
  renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
  renderer.toneMapping = THREE.LinearToneMapping;
  renderer.toneMappingExposure = 1;
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.setClearColor(0x000000, 0);
  renderer.domElement.style.zIndex = "1";
  renderer.domElement.style.position = "fixed";
  renderer.domElement.style.top = "0";
  renderer.domElement.style.left = "0";

  renderContainer.style.position = "fixed";
  renderContainer.style.top = "0";
  renderContainer.style.left = "0";
  renderContainer.style.zIndex = "3";

  rendererCss = new CSS3DRenderer();
  renderContainer.appendChild(rendererCss.domElement);
  rendererCss.setSize(window.innerWidth, window.innerHeight);
  rendererCss.render(scene, camera);

  rendererCss.domElement.appendChild(renderer.domElement);
  window.addEventListener('resize', () => onWindowResize());



  // controls
  controls = new OrbitControls(camera, renderer.domElement);
  scene.add(new THREE.AmbientLight(0x222222));

  // axes
  //scene.add( new THREE.AxesHelper( 20 ) );

  var videoObj = CreateAssetVideoObj3d();
  scene.add(videoObj);
}

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