JSFiddle - React, Tailwind, and code Playground

by Browork

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";


var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer({antialias:true});
      renderer.setClearColor("#f0ebdd", 1);
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			

			var geometry = new THREE.CylinderBufferGeometry( 1, 1, 1 );
      var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
      polygonOffset:true
      }));
		  var edges = new THREE.EdgesGeometry( geometry );
		  var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0x00ffff } ) );
		  scene.add( line );
      scene.add(mesh)




var material = new THREE.LineBasicMaterial( { color: 0xffffff } );

var wireframe = new THREE.LineSegments( geometry, material );

//scene.add( wireframe );


			camera.position.z = 5;
      
			var animate = function () {
				requestAnimationFrame( animate );

				renderer.render( scene, camera );
			};

			animate();
      const controls = new OrbitControls(camera, renderer.domElement);