JSFiddle - React, Tailwind, and code Playground

by ismacadenas

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
			import { Line2 } from 'https://threejs.org/examples/jsm/lines/Line2.js';
			import { LineMaterial } from 'https://threejs.org/examples/jsm/lines/LineMaterial.js';
			import { LineGeometry } from 'https://threejs.org/examples/jsm/lines/LineGeometry.js';
			import { GeometryUtils } from 'https://threejs.org/examples/jsm/utils/GeometryUtils.js';
let line, renderer, scene, camera, camera2, controls;
			let lineEX;
			let matLine, matLineBasic, matLineDashed;
			let stats;
			let gui;

			// viewport
			let insetWidth;
			let insetHeight;
init();
animate();


function init() {

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

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 200, 200, 200 );

    // controls
    controls = new OrbitControls( camera, renderer.domElement );
    
const geometry = new THREE.CylinderGeometry( 5, 20, 20, 64, 64, true );
            const material = new THREE.MeshBasicMaterial( {color: 0xff0000} );
            const cylinder = new THREE.Mesh( geometry, material );
            scene.add(cylinder);
}

function animate() {

    requestAnimationFrame( animate );
    
    //controls.update();

    renderer.render( scene, camera );

}