Three.js粗线Hilbert3D转点

Question

我正在尝试实现带有粗细的线条，我发现了这个示例

然而，该示例使用：

var points = GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );

我不想使用这个，而是想用一个由Vector3点组成的数组来创建这条线。

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 );

基本上，在这个例子中使用的是位置，而我想要使用点。

谢谢。

- Nicolay Hekkens

Answer 1

将一个THREE.Vector3()数组传递给THREE.LineGeometry是不可能的。不过你只需要将你的数据转换成这种模式[x1,y1,z1,x2,y2,z2,...]，然后设置就应该可以正常工作。

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>

- Mugen87