Question

我尝试了多种变体，但它们似乎都没有效果。有任何想法吗？我想沿着NURBSCurve布局模型，从小提琴到布局的增量模型我可以看到我使用的5步，但在使用getPoint方法时显然是第二位超过5个单元模型。也许我不知道getPoint的算法。如何从曲线起点开始指定距离后得到点？提前谢谢。

// Simple three.js example
var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

  // renderer
  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  // scene
  scene = new THREE.Scene();

  // camera
  camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
  camera.position.set( 20, 20, 20 );

  // controls
  controls = new THREE.OrbitControls( camera );

  // ambient
  scene.add( new THREE.AmbientLight( 0x222222 ) );

  var size = 100;
  var divisions = 100;
  var gridHelper = new THREE.GridHelper(size, divisions);
  scene.add(gridHelper);

  // light
  var light = new THREE.DirectionalLight( 0xffffff, 1 );
  light.position.set( 20, 20, 0 );
  scene.add( light );

  // axes
  scene.add( new THREE.AxisHelper( 20 ) );

  var group = new THREE.Group();
            scene.add( group );

            // NURBS curve

            var nurbsControlPoints = [];
            var nurbsKnots = [];
            var nurbsDegree = 3;

            for ( var i = 0; i <= nurbsDegree; i ++ ) {

                nurbsKnots.push( 0 );

            }

            for ( var i = 0, j = 55; i < j; i ++ ) {

                nurbsControlPoints.push(
                    new THREE.Vector4(
                        i,
                        0,
                        0,
                        1 // weight of control point: higher means stronger attraction
                    )
                );

                var knot = ( i + 1 ) / ( j - nurbsDegree );
                nurbsKnots.push( THREE.Math.clamp( knot, 0, 1 ) );

            }

            var nurbsCurve = new THREE.NURBSCurve(nurbsDegree, nurbsKnots, nurbsControlPoints);

            var nurbsGeometry = new THREE.Geometry();
            nurbsGeometry.vertices = nurbsCurve.getPoints(200);
            var nurbsMaterial = new THREE.LineBasicMaterial( { linewidth: 10, color: 0xffffff, transparent: true } );

            var nurbsLine = new THREE.Line( nurbsGeometry, nurbsMaterial );
            nurbsLine.position.set(0,0, 10 );
            group.add( nurbsLine );

      var current = nurbsCurve.getPoint(0), last = nurbsCurve.getPoint(1);
      var lineLength = current.distanceTo(last);
      var step=0;
      var length=0;
      for(var i=0;i<5;i++)
      {
          var pos= nurbsCurve.getPoint(step/lineLength);
          var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0xff0000}));
          pos.z=10;
          cube.position.copy(pos);
          scene.add(cube);
          step+=5;
      }
}

function animate() {

  requestAnimationFrame( animate );

  //controls.update();

  renderer.render( scene, camera );

}

http://jsfiddle.net/akmcv7Lh/132/`

Answer 1

THREE.NURBSCurve派生自THREE.Curve，它实现了一个名为getSpacedPoints的方法，该方法将曲线分成给定的大约相等的块数长度并返回多个点加一个。这些点给出了每个点的终点一块曲线。例如：

 var pieces=nurbsCurve.getSpacedPoints(5);

要获得距离曲线特定距离的点，请使用：

 // If "distance" ranges from 0 to the curve's length, use:
 var point=nurbsCurve.getPointAt(distance/nurbsCurve.getLength());
 // If "distance" ranges from 0 to 1, use:
 var point=nurbsCurve.getPointAt(distance);

有关THREE.Curve的详细信息，请参阅the three.js documentation。

另请注意，我发现您的代码存在潜在问题：

 pos.z=10;

这使得每个立方体点的位置具有相同的Z坐标。你的意图可能是将每个立方体的位置改为10。在这种情况下，试试这个：

 pos.z+=10;

THREE.NURBSCurve getPoint（t）？

1 个答案: