Three.js fat line hilbert3D to points - three.js

Question

Im trying to implement line with thinkness and I found this example
However the example uses:
var points = GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
I do not want to use this and instead i want to create the line with an Array of Vector3 points.
var geometry = new LineGeometry();
geometry.setPositions( positions );
geometry.setColors( colors );
matLine = new LineMaterial( {
color: 0xffffff,
linewidth: 5, // in pixels
vertexColors: true,
//resolution: // to be set by renderer, eventually
dashed: false
} );
line = new Line2( geometry, matLine );
line.computeLineDistances();
line.scale.set( 1, 1, 1 );
scene.add( line );
Basically, in the example it uses positions, I want to use points instead.
Thanks

Answer 1

It's not possible to pass an array of THREE.Vector3() to THREE.LineGeometry. However, you just have to convert your data to this pattern [ x1, y1, z1, x2, y2, z2, ... ] and the setup should work fine.
let camera, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10 );
camera.position.set( 0.5, 0.5, 2 );
scene = new THREE.Scene();
const points = [
0, 0, 0,
1, 0, 0,
1, 1, 0,
0, 1, 0
];
const geometry = new THREE.LineGeometry();
geometry.setPositions( points );
const material = new THREE.LineMaterial( { color: 0xffffff, linewidth: 2 } );
material.resolution.set( window.innerWidth, window.innerHeight );
const lines = new THREE.Line2( geometry, material );
scene.add( lines );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
body {
margin: 0;
}
canvas {
display: block;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.115/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.115/examples/js/lines/LineSegments2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.115/examples/js/lines/Line2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.115/examples/js/lines/LineMaterial.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.115/examples/js/lines/LineSegmentsGeometry.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.115/examples/js/lines/LineGeometry.js"></script>