JSFiddle - React, Tailwind, and code Playground

by ds345

HTML

<script src="https://raw.github.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://raw.github.com/mrdoob/three.js/dev/examples/js/controls/TrackballControls.js"></script>

JavaScript

var renderer, scene, camera, controls;

renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(-900, 1500, -2400);
camera.lookAt(scene.position);
controls = new THREE.TrackballControls(camera);
var color = '0xF7EF0B'

var plane = new THREE.PlaneGeometry(3000, 100);
plane.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
mesh1 = new THREE.Mesh(plane, new THREE.MeshBasicMaterial({
    color:color,
    opacity: 0.4,
    transperent: true,
    side: THREE.DoubleSide,
    visible: true
}));
mesh1.position.set(43.5, 37.7, 189);
mesh2 = new THREE.Mesh(plane, new THREE.MeshBasicMaterial({
    color:color,
    opacity: 0.4,
    transperent: true,
    side: THREE.DoubleSide,
    visible: true
}));
mesh2.position.set(43.5, 37.7, 70);
scene.add(mesh1);
scene.add(mesh2);
var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(100, 100, 1000, 50, 50, false), new THREE.MeshNormalMaterial());
cylinder.overdraw = true;
scene.add(cylinder);

(function animate() {

    requestAnimationFrame(animate);

    controls.update();

    renderer.render(scene, camera);

}());