三.js胖线hilbert3D转点

Question

我试图通过思考来实现，我发现了这个 example

但是示例使用:

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

基本上，在它使用位置的示例中，我想改用点。

谢谢

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>