JSFiddle - React, Tailwind, and code Playground

by chenxiaoleizi

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<!-- geometry json data -->
<script src="http://lnimpossible.cn/cl/assets/A1_1.json"></script>

<script src="http://lnimpossible.cn/cl/assets/coodTransform.js"></script>
<script src="http://lnimpossible.cn/cl/assets/utils.js"></script>

CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

JavaScript

// I create a indoor-map scene based on three.js.
// Every room have a HUD.
// when i zoom or rotate the camera ,the HUD would be overlapping, i have to 
// implement HUD collision detection, hide some HUD.
// So i want to keep the sprite size the same as canvas, so i can get HUD size for 
// collision detection.

var camera, scene, renderer, control;
init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 0.01, 1000);
  camera.position.set(0, 50, 100);
  scene = new THREE.Scene();
  control = new THREE.OrbitControls(camera)
  scene.add(new THREE.AxesHelper());

  var light1 = new THREE.DirectionalLight(0xffffff, 0.4);
  light1.position.set(500, 500, 500);
  scene.add(light1);
  var light2 = new THREE.DirectionalLight(0xffffff, 0.4);
  light2.position.set(-250, 500, 100);
  scene.add(light2);
  var light3 = new THREE.DirectionalLight(0xffffff, 0.2);
  light3.position.set(-500, 500, -500);
  scene.add(light3);
  var light = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.35);
  scene.add(light);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0xF1F2F7);
  document.body.appendChild(renderer.domElement);

// 
// 1.parse geometry json data
// 2.generate floor and sprite
// 
  var floor = ParseGeoJson(jsonData, function(roomName, center) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    context.font = '30px "Microsoft Yahei",Tahoma,Arial';
    var textWidth = context.measureText(roomName).width;
    canvas.width = textWidth;
    canvas.height = 30;
    context.fillStyle = "rgba(0,255,255,1.0)";
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.font = '30px "Microsoft Yahei",Tahoma,Arial';
    context.fillStyle = '#4F4F4F';
    context.fillText( roomName, 0, 26);

    var texture = new THREE.CanvasTexture(canvas);
    texture.minFilter...