JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

<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@0.145.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.145.0/examples/jsm/"
    }
  }
</script>

<label id="info">...</label>

CSS

body {
	margin: 0px;
  color: #ccc;
}

#info {
  position: fixed;
  top: 5px;
  left: 5px;
}

JavaScript

// Simple three.js example

import * as THREE from "three";
import { ArcballControls } from 'three/addons/controls/ArcballControls.js';

import { formatNumber } from 'https://alikim.com/_v1_jsm/utils.js'

let renderer, scene, camera, controls;

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( 20, 20, 20 );
    camera.lookAt(0, 0, 0);

    // controls
    controls = new ArcballControls( camera, renderer.domElement, scene );
		controls.addEventListener( 'change', render );
    
    // axes
    scene.add( new THREE.AxesHelper( 20 ) );
}

const info = document.getElementById('info');

const projNdc = (nm, vec) => {
	const x3 = new THREE.Vector3(...vec).project(camera); 
  const x2 = new THREE.Vector2(x3.x, x3.y).normalize(); 
	return `${nm}: ${formatNumber(x2.x)}, ${formatNumber(x2.y)}, ` + '\u00a0 ';
};


function render() {
 renderer.render( scene, camera );
}

function animate() {

	  requestAnimationFrame( animate );

    render();
    
    info.textContent = 
    	projNdc('X', [1, 0, 0]) +
      projNdc('Y', [0, 1, 0]) +
      projNdc('Z', [0, 0, 1]);
      
      //controls.update();
}

init();
animate();