JSFiddle - React, Tailwind, and code Playground

by uggway

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/controls/FlyControls.js"></script>
<script src="https://threejs.org/examples/js/controls/FirstPersonControls.js"></script>

CSS

body {
			  margin: 0;
			}
			
			canvas {
			  width: 100%;
			  height: 100%
			}

JavaScript

//codepen.io/uggway
class Entity {

  constructor(name) {
    this.name = name;
    Entity.counter = ++Entity.counter || 0;
    this.id = Entity.counter;
    this.childs_link = {};
    this.temp_link = {}; // {addr, name}
    this.param = {x:0,y:0,z:0,rx:0,ry:0,rz:0};
    this.event = {};
    this.type = "Entity";
    this.parent = null;
    console.log("Create entity with name '" + this.name + "', id:" + this.id);
  }
  link(new_link) {
    new_link.parent = this;
    this.childs_link[new_link.name] = new_link;

    console.log("'" + this.name + "' link child entity with name '" + new_link.name + "'");
    return this.childs_link[new_link.name];
    d
  }
  childs(name) {
    return this.childs_link[name];
  }

  etype(new_type) {
    this.type = new_type;
    console.log("'" + this.name + "' set type '" + this.type + "'");
    return this;
  }

  eparam(arg) {
    for (var key in arg) {
      if (key == 'dx') this.param.x = this.parent.param.x + arg[key];
      else
      if (key == 'dy') this.param.y = this.parent.param.y + arg[key];
      else
      if (key == 'dz') this.param.z = this.parent.param.z + arg[key];
      else
        this.param[key] = arg[key];
    }
    return this;
  }

  escript(event, script) {
    this.event[event] = script;
    return this;
  }

  /*
    'use' event
  */
  use() {
      if (this.event["use"]) eval(this.event["use"]);
      /*for (var cl in this.childs_link) {
        this.childs_link[cl].use();
      }*/
    }
    /*
    	'update' event
    */
  update(deltat) { // неплохо бы избавиться от рекурсии добавлением задач в список.
    if ("update" in this.event) eval(this.event["update"]);
    if (this.object !== undefined) {
    	if(this.param.color !== undefined)
      { 
       if(this.type == "Light")this.object.color.setHex(this.param.color);else
       this.object.material.color.setHex(this.param.color);
      }
      this.object.position.set(this.param.x, this.param.y, this.param.z);      
      if (this.param.rx !=...