JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
</head>
<body>
<div id="canvas">
</div>
<script>
var geometry = new THREE.Geometry()
var entity ={
'vertices' : [
{
"x": 4.857024508564912,
"y": 6.807564714977122
},
{
"x": 8.816292322934935,
"y": 6.807564714977122
},
{
"x": 8.816292322934935,
"y": 5.51136731706687,
"bulge": -0.414213562373095
},
{
"x": 7.816292322934935,
"y": 4.51136731706687
},
{
"x": 4.357024508564912,
"y": 4.51136731706687
},
{
"x": 4.357024508564912,
"y": 6.307564714977122,
"bulge": -0.414213562373095
}
]
}
function init(){
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000)
var renderer = new THREE.WebGLRenderer()
drawLine(entity,null)
let pts = []
geometry.vertices.forEach(v => {
pts.push(v);
})
let curve = new THREE.CatmullRomCurve3( pts );
curve.closed = true;
let curveGeometry = new THREE.Geometry();
curveGeometry.vertices = curve.getPoints(geometry.vertices.length)
let curveMaterial = new THREE.LineBasicMaterial({color: "white"});
let curveLine = new THREE.Line(curveGeometry, curveMaterial);
scene.add(curveLine)
document.querySelector('#canvas').append(renderer.domElement)
renderer.render(scene,camera)
}
function drawLine(entity, data) {
let material, lineType, vertex, startPoint, endPoint, bulgeGeometry,
bulge, i, line;
// create geometry
for (i = 0; i < entity.vertices.length; i++) {
...