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";
import { LineMaterial } from "https://threejs.org/examples/jsm/lines/LineMaterial.js";
import { LineSegments2 } from "https://threejs.org/examples/jsm/lines/LineSegments2.js";
import { LineSegmentsGeometry } from "https://threejs.org/examples/jsm/lines/LineSegmentsGeometry.js";
import { OutlineEffect } from 'https://threejs.org/examples/jsm/effects/OutlineEffect.js';
import { BufferGeometryUtils } from 'https://threejs.org/examples/jsm/utils/BufferGeometryUtils.js';

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.01, 1000);
camera.position.set(0, 1, 2);
var renderer = new THREE.WebGLRenderer({antialias : false});
renderer.setSize(innerWidth, innerHeight)
renderer.setClearColor("#f0ebdd", 1);;
document.body.appendChild(renderer.domElement);

var effect = new OutlineEffect( renderer, {defaultThickness:0.01} );

    

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

const segments = 32;
const cylinderScale = 1;
const radius = 1;
const cylinderGeo = new THREE.CylinderBufferGeometry(radius, radius, cylinderScale, segments);
const cylinderMat = new THREE.MeshBasicMaterial(
{color: 0xff0000,polygonOffset: true,
 polygonOffsetFactor: 1, // positive value pushes polygon further away
polygonOffsetUnits: 2
});

const cylinderMesh = new THREE.Mesh(cylinderGeo, cylinderMat);
scene.add(cylinderMesh);

BufferGeometryUtils.mergeVertices(cylinderGeo);
cylinderGeo.computeVertexNormals();


const edges = new THREE.EdgesGeometry(cylinderMesh.geometry,45); //or 1st cylinderGeo
const lineGeometry = new LineSegmentsGeometry().fromEdgesGeometry(edges);
const lineMaterial = new LineMaterial({ color: "black", linewidth: 8 });
const edgesLines = new LineSegments2(lineGeometry, lineMaterial);
cylinderMesh.add(edgesLines);

renderer.setAnimationLoop(()=>{
 ...