JSFiddle - React, Tailwind, and code Playground

by sagar Bhanushali

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.js"></script>

JavaScript

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.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

/* var dashMaterial = new THREE.LineDashedMaterial( { color: 0xee6666, dashSize: 0, gapSize: 0, linewidth:6  } ),
circGeom = new THREE.CircleGeometry( 10, 80, 0, 5 );

circGeom.vertices.shift();
circGeom.computeLineDistances();

var circ = new THREE.Line( circGeom, dashMaterial);
scene.add( circ ); */

camera.position.z = 20;

function drawCircle(radius, color, lineWidth){
              
    var points = [];
      
    // 360 full circle will be drawn clockwise
    for(let i = 0; i <= 360; i++){
        points.push(Math.sin(i*(Math.PI/180))*radius, Math.cos(i*(Math.PI/180))*radius, 0);
    }
      
    var geometry = new THREE.LineGeometry();
    geometry.setPositions( points );
  
    var material = new THREE.LineMaterial({
        color: 0xee6666,
        linewidth: 6
    });
      
    let line = new THREE.Line2( geometry, material );
    //line.computeLineDistances();
      
    scene.add( line );
}

function render() {
    requestAnimationFrame( render );

   //circ.rotation.x += 0.01;
   //circ.rotation.y += 0.01;

    renderer.render(scene, camera);
}
drawCircle(5, 0xee6666, 6);
render();