JSFiddle - React, Tailwind, and code Playground

by tolland

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

JavaScript

/* == boilerplate header == */
var scene = new THREE.Scene();
scene.name = 'Scene';
renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: false
})

width = window.innerWidth;
height = window.innerHeight;

renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

/* == END boilerplate header == */

scene.add(
  new THREE.Mesh(
    new THREE.CylinderGeometry(10, 10, 100, 32),
    new THREE.MeshBasicMaterial({
      color: 0xEEEEEE,
    })
  )
);

var camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000);


var midpoint = new THREE.Vector3(0, 500, 0);
// camera.fov = 75;
camera.position.y = 400;
camera.position.x = -400;
camera.lookAt(midpoint);
camera.updateProjectionMatrix();
scene.add(camera);


//camera.updat
var helper = new THREE.CameraHelper(camera);
scene.add(helper);
helper.update();
helper.visible = true;


controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target = midpoint;
if (controls)
  controls.addEventListener('change', render);

controls.update();



function render() {

  renderer.render(scene, camera);

}