three.js dev template - module

by x1911

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/[email protected]/build/three.module.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
  background-color: #000000;
}

JavaScript

import * as THREE from 'three';

import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
import PostProcessing from 'three/addons/renderers/common/PostProcessing.js'
import { pass, viewportTopLeft } from 'three/addons/nodes/Nodes.js';


let renderer, scene, camera, UICamera, UIScene, postProcessing;

init();

function init() {

  scene = new THREE.Scene();

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

  const canvas = document.createElement('canvas');
  canvas.width = 128;
  canvas.height = 128;

  const context = canvas.getContext('2d');

  const text = 'asdfasdf sdfa asdf af<br> asdf adf af agad faf adf fa'
  context.fillStyle = '#c09f00';
  context.fillRect(0, 0, canvas.width, canvas.height);

  context.font = '200 12px/1 Impact'
  context.textAlign = 'center';
  context.strokeStyle = 'rgba(255,255,255,1)';
  const startY = 20
  context.fillStyle = 'rgba(255,210,210,1)';
  context.fillText(text, 120, startY);
  context.restore()


  const texture = new THREE.CanvasTexture(canvas);
  texture.colorSpace = THREE.SRGBColorSpace;

  const geometry = new THREE.PlaneGeometry();
  const material = new THREE.MeshBasicMaterial({
    map: texture
  });

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


  const w = window.innerWidth
  const h = window.innerHeight
  UICamera = new THREE.OrthographicCamera(-w / 2, w / 2, h / 2, -h / 2, -10, 100);
  UIScene = new THREE.Scene()

  const g2 = new THREE.PlaneGeometry(100, 100);
  const m2 = new THREE.Mesh(g2, material);
  m2.position.x = -w / 4
  UIScene.add(m2)

  renderer = new WebGPURenderer({
    antialias: false
  });
  //renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setAnimationLoop(animate);
  document.body.appendChild(renderer.domElement);
  renderer.autoClear =...