如何在 Three.js 中重新创建这个扫描 nurbs 模型? [英] How do I recreate this sweeps nurbs model in Three.js?

问题描述

在 Cinema4d 中，这个模型是使用两个圆扫过 nurbs 制作的.一个圆是等高线样条，它沿另一圆路径扫掠.使用 Sweep Nurbs，您可以指定开始和停止完成百分比和比例等.

In Cinema4d, this model is made using two circles in a sweeps nurbs. One circle is the contour spline, and it sweeps along the other circle path. With Sweep Nurbs you can specify the start and stop completion percentage and scale etc.

有没有办法在三个js中重现这个?我想我可以将它导出到 STL，但我更希望 3.js 可以自己管理它.

Is there a way to reproduce this in Three js? I suppose I can export this to an STL, but I'd much rather a way for 3.js to manage this itself.

更新:

我设置了一系列 CircleGeometry 以使用此效果旋转.

I set a series of CircleGeometry to rotate around with this effect.

var startR = .6,
    incR = .0049;

for (var p = 0; p < 110; p++) {
    var r = startR - (incR * p);
    var geometry = new THREE.CircleGeometry(r, 12);
    var material = new THREE.MeshBasicMaterial( { color: 0x000000 } );
    material.side = THREE.DoubleSide;
    geometry.applyMatrix( new THREE.Matrix4().makeTranslation( -7, 0, 0 ) );

    var circle = new THREE.Mesh( geometry, material );
    circle.rotation.y += p * 0.05

    scene.add(circle);
}

那么下一步可能是将这些圆形几何图形组合成一个对象?

So maybe the next step is to combine these circle geometries in to one object?

推荐答案

如果我猜对了，那么你可以弯曲一个圆锥体.

If I get you right, then you can just bend a cone.

创建圆柱几何体.它有radiusTop (r1)，radiusBottom (r2).它的高度等于弯曲的角度(theta).我们还需要弯曲半径(rMain).创建几何体后，将其转换为 (rMain, theta/2, 0) 的点.毕竟，对几何中的每个顶点应用这样的变换，使其新位置在极坐标中，其中半径是 x 值，角度是 y 值.

Create a cylinder geometry. It has radiusTop (r1), radiusBottom (r2). Its height is equal to the angle of bending (theta). Also we need the radius of bending (rMain). After you created the geometry, translate it to the point of (rMain, theta / 2, 0). And after all, apply such transformation for each vertex in the geometry that its new position is in polar coordinates, where radius is x-value and angle is y-value.

function bendTheCone(r1, r2, rMain, theta, segments){
  var geom = new THREE.CylinderBufferGeometry(r1, r2, theta, 16, segments);
  geom.translate(rMain, theta / 2 ,0);
  var position=geom.position;
  for(var i=0; i<position.count;i++){
    var localTheta = position.getY(i);
    var localRadius = position.getX(i);
    position.setXY(i,Math.cos(localTheta) * localRadius,
      Math.sin(localTheta) * localRadius);
  }

  geom.computeVertexNormals();

  return geom;
}

然后你可以这样使用它:

Then you can use it like this:

var geometry = bendTheCone(0.1, 0.5, 10, THREE.Math.degToRad(320), 60);
var mesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
scene.add(mesh);

jsfiddle 示例

这篇关于如何在 Three.js 中重新创建这个扫描 nurbs 模型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！