JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

<canvas id="main_canvas" width="500" height="500">

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background: #112233;
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-items: center;
}
#ui {
  margin-bottom: 5px;
}

.noselect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#ctrl_over {
  position: absolute;
  opacity: 0.5;
  bottom: 13px;
  right: 5px;

  color: #aaa;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

#ctrl_sw {
  border: solid 1px #aaa;
  padding: 3px;
  margin-left: 10px;
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
}

#canv_wrap {
  position:relative;
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

JavaScript

import * as THREE from 'https://unpkg.com/three/build/three.module.js'

import * as CONTROLS from 'https://alikim.com/_v1_jsm/controls.js'

const get = id => document.getElementById(id);

const canvas = get('main_canvas');
const [w, h] = [canvas.width, canvas.height];
const renderer = new THREE.WebGLRenderer({
  antialias: true,
  canvas: canvas,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(w, h);

const [near, far] = [1, 100];
const mid = -0.5 * (near + far);
const camera = new THREE.PerspectiveCamera(45, w / h, near, far);
camera.position.set(20, 25, 20);
camera.lookAt(0, 4, 0);

const scene = new THREE.Scene();
scene.background = new THREE.Color(0.01, 0.01, 0.15);

const texldr = new THREE.TextureLoader();

const axhlp = new THREE.AxesHelper(10);
const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(10, 10),
  new THREE.MeshBasicMaterial({
    transparent: true,
    opacity: 0.5,
    side: THREE.DoubleSide,
    map: texldr.load(
      'https://alikim.com/_v1_jsm/textures/cube_map.png',
      render,
      undefined,
      err => { console.log('texture load err:', err)}
   ),
  }));
  
for(let i = 0; i < 10; i++) {
  const gz = ground.clone();
  gz.position.set(5,5,i);
  scene.add(gz);
  
  const gy = ground.clone();
  gy.rotateX(Math.PI/2);
  gy.position.set(5,i,5);
  scene.add(gy);
  
  const gx = ground.clone();
  gx.rotateY(Math.PI/2);
  gx.position.set(i,5,5);
  scene.add(gx);
} 

scene.add(axhlp);

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

CONTROLS.create({
  cont: canvas, 
  cam: camera,
  type: 'Orbital', 
  overlay: true, 
  lookAt: [0,4,0],
  callback: render
});