JSFiddle - React, Tailwind, and code Playground

by NaDaMa

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/TransformControls.js"></script>
<canvas id="appCanvas"></canvas>

CSS

body {
  margin: 0;
}

JavaScript

var camera, scene, renderer;
var geometry, material, mesh;
var oControls, tControls;

init();
animate();

function init() {

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

  scene = new THREE.Scene();


  let aspectRatio = window.innerWidth / window.innerHeight;
  let frustumSize = 20;

// camera = new THREE.OrthographicCamera(frustumSize * aspectRatio / -2, frustumSize * aspectRatio / 2, frustumSize / 2, frustumSize / -2, -100, 100);


  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
  camera.position.z = 1;


  geometry = new THREE.BoxGeometry(1, 1, 1);
  material = new THREE.MeshNormalMaterial();
  mesh = new THREE.Mesh(geometry, material);
  mesh.position.z = -4;
  scene.add(mesh);



  oControls = new THREE.OrbitControls(camera, renderer.domElement);
  oControls.enabled = true;
  oControls.target = mesh.getWorldPosition();
  oControls.enableRotate = true;
  oControls.enableZoom = true;
  oControls.zoomSpeed = 1;
  oControls.enablePan = true;

  tControls = new THREE.TransformControls(camera, renderer.domelement, oControls);
  tControls.attach(mesh);
  tControls.setMode("translate");
  scene.add(tControls);
}

function animate() {

  requestAnimationFrame(animate);
  oControls.update();
  tControls.update();
  renderer.render(scene, camera);

}