Three.js胖线希尔伯特3D转点

Posted 2021-03-19

我试图用思维来实现线，我发现了这一点。例子

然而例子中使用了:

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

基本上，在例子中，它使用位置，我想使用点来代替。

谅谅

答案

不可能传递一个数组的 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>

以上是关于Three.js胖线希尔伯特3D转点的主要内容，如果未能解决你的问题，请参考以下文章

Three.js教程：第一个3D场景

网页3D效果库Three.js初窥

three.js css3d 如何更新数据

javascript 3d网页 示例 ( three.js 初探 七)

[微信小游戏+Three.JS]给场景添加反射材质，实现3D水珠移动效果

three.js入门——画一个3D正方体