Три. js жирная линия hilbert3D к очкам - PullRequest
Новая
       33

Три. js жирная линия hilbert3D к очкам

1 голос
/ 22 апреля 2020

Я пытаюсь реализовать линию с осмысленностью, и я нашел этот пример

Однако в примере используется: 

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

В основном, в примере, где используются позиции, я хочу использовать точки вместо этого.

Спасибо

1 Ответ

1 голос
/ 22 апреля 2020

Невозможно передать массив 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>
...