Three.js fat line hilbert3D to points

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/[email protected]/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/lines/LineSegments2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/lines/Line2.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/lines/LineMaterial.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/lines/LineSegmentsGeometry.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/lines/LineGeometry.js"></script>