JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/mrdoob/three.js/master/build/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();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var material = new THREE.MeshBasicMaterial({
color: 0x0000ff
});
var radius = 5;
var segments = 32;
var circleGeometry = new THREE.CircleGeometry( radius, segments );
var circle = new THREE.Mesh( circleGeometry, material );
/*CREATE EDGES*/
var edges = new THREE.EdgesHelper( circle, 0x00ff0f );
/*IT NEEDS TO CONVERT FROM BUFFER GEOMETRY TO GEOMETRY TO USE GEOMETRY MERGE FUNCTION*/
var edgeGeometry = new THREE.Geometry().fromBufferGeometry(edges.geometry);
/*HERE IS THE PROBLEM*/
circleGeometry.merge(edgeGeometry);
scene.add( circle );
camera.position.z = 15;
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
}
render();