threejs 画点、线

BIM云平台开发

于 2024-08-16 23:07:31 发布

阅读量157

点赞数 3

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/chinaloft/article/details/141271611

版权

threejs画线，比较基础

第一步，定出控制的点

    const curveArr = [
        new THREE.Vector3(-10, 0, 0),
        new THREE.Vector3(-5, 5, 0),
        new THREE.Vector3(0, 0, 0),  
        new THREE.Vector3(5, -5, 0),
        new THREE.Vector3(10, 0, 0)
      ]

我们可以把这些点显示出来，操作如下

就是每个点的位置，放个白色的box

      //曲线1的操纵点
      const boxGeometry = new THREE.BoxGeometry( 0.1, 0.1, 0.1 );
      const boxMaterial = new THREE.MeshBasicMaterial();
  
      for ( const handlePos of curveArr ) {
  
        const handle = new THREE.Mesh( boxGeometry, boxMaterial );
        handle.position.copy( handlePos );
        curveHandles.push( handle );
        scene.add( handle );
  
      }

如图

再把线画出，就可以

    //curve1定位来自于，控制点手柄，来自于 点 的组
    curve1 = new THREE.CatmullRomCurve3(        
        curveHandles.map( ( handle ) => handle.position )
        );
    //实体化第一条线
    curve1.curveType = 'centripetal';
    curve1.closed = false;

    const points = curve1.getPoints( 100 );
    const line1 = new THREE.Line(
    new THREE.BufferGeometry().setFromPoints( points ),
    new THREE.LineBasicMaterial( { color: 0x00ff00 } )
    );

    scene.add( line1 );