Javascript 从THREE.js中的THREE.Line对象挤出三维形状

在three.js中，我创建了一个ellipseCurve，我想为它拉伸并制作3d

用于执行此操作的代码：

var curve = new THREE.EllipseCurve(
0,  0,            // ax, aY
10, 13.3,           // xRadius, yRadius
0,  2 * Math.PI,  // aStartAngle, aEndAngle
false,            // aClockwise
0                 // aRotation
);
var path = new THREE.Path( curve.getPoints( 100 ) );
var geometrycirc = path.createPointsGeometry( 50 );
var materialcirc = new THREE.LineBasicMaterial( {
 color : 0xff0000
 } );

// Create the final object to add to the scene
var ellipse = new THREE.Line( geometrycirc, materialcirc );
this.scene.add( ellipse );

/////////////////////////////////////////////////////////////////////////
    //     My line curve                                                   //
    /////////////////////////////////////////////////////////////////////////


    var curve = new THREE.EllipseCurve(
        0,  0,            // ax, aY
        10, 13.3,           // xRadius, yRadius
        0,  2 * Math.PI,  // aStartAngle, aEndAngle
        false,            // aClockwise
        0                 // aRotation
    );

    var path = new THREE.Path( curve.getPoints( 100 ) );
    var geometrycirc = path.createPointsGeometry( 50 );
    var materialcirc = new THREE.LineBasicMaterial( {
        color : 0xff0000
    } );

    // Create the final object based on points and material
    var ellipse = new THREE.Line( geometrycirc, materialcirc );
    this.scene.add( ellipse );



    ////////////////////////////////////////////////////////////////////////
    //    Example of sample closed spine                                  //
    ////////////////////////////////////////////////////////////////////////

    var sampleClosedSpline = new THREE.CatmullRomCurve3( [
        new THREE.Vector3( 0, -40, -40 ),
        new THREE.Vector3( 0, 40, -40 ),
        new THREE.Vector3( 0, 140, -40 ),
        new THREE.Vector3( 0, 40, 40 ),
        new THREE.Vector3( 0, -40, 40 )
    ] );


    sampleClosedSpline.type = 'catmullrom';
    sampleClosedSpline.closed = true;


    //////////////////////////////////////////////////////////////////////////////
    //     Extrusion method to covert the spline/vector data into 3d object     //
    //////////////////////////////////////////////////////////////////////////////



    // I used this method and have tried the following properties but these do not work
    //
    // var tube = new THREE.TubeBufferGeometry( curve, 12, 2, 20, true);
    //
    // 1. ellipse.clone()
    // 2. geometrycirc.clone()
    // 3. materialcirc.clone()
    // 4. path.clone()
    // 5. curve
    //
    // Therefore I am either doing something wrong or there must be a further process that needs
    // to be implemented.



    // this works as standard
    var tube = new THREE.TubeBufferGeometry( sampleClosedSpline, 12, 2, 20, true);


    var tubeMesh = THREE.SceneUtils.createMultiMaterialObject( tube, [
        new THREE.MeshLambertMaterial( {
            color: 0xffffff
        } ),
        new THREE.MeshBasicMaterial( {
            color: 0xff00ff,
            opacity: 0.3,
            wireframe: true,
            transparent: true
        } ) ] );


    tubeMesh.scale.set( .2, .2, .2 );
    this.scene.add( tubeMesh );


    ///////////////////////////////////////////////////////////////////////////////

我想使用此椭圆曲线作为基础，创建类似于这些示例的拉伸形状

这些示例似乎使用向量来实现这一点，因此我假设需要将曲线转换为一条

我不知道该怎么做，因为我一直找不到关于这件事的参考资料

有什么帮助吗

更新：2017年3月22日

是的，所以我尝试实现与上相同的挤出方法：

我可以将这条样条线插入我的场景：

以下是执行此操作的代码：

var curve = new THREE.EllipseCurve(
0,  0,            // ax, aY
10, 13.3,           // xRadius, yRadius
0,  2 * Math.PI,  // aStartAngle, aEndAngle
false,            // aClockwise
0                 // aRotation
);
var path = new THREE.Path( curve.getPoints( 100 ) );
var geometrycirc = path.createPointsGeometry( 50 );
var materialcirc = new THREE.LineBasicMaterial( {
 color : 0xff0000
 } );

// Create the final object to add to the scene
var ellipse = new THREE.Line( geometrycirc, materialcirc );
this.scene.add( ellipse );

/////////////////////////////////////////////////////////////////////////
    //     My line curve                                                   //
    /////////////////////////////////////////////////////////////////////////


    var curve = new THREE.EllipseCurve(
        0,  0,            // ax, aY
        10, 13.3,           // xRadius, yRadius
        0,  2 * Math.PI,  // aStartAngle, aEndAngle
        false,            // aClockwise
        0                 // aRotation
    );

    var path = new THREE.Path( curve.getPoints( 100 ) );
    var geometrycirc = path.createPointsGeometry( 50 );
    var materialcirc = new THREE.LineBasicMaterial( {
        color : 0xff0000
    } );

    // Create the final object based on points and material
    var ellipse = new THREE.Line( geometrycirc, materialcirc );
    this.scene.add( ellipse );



    ////////////////////////////////////////////////////////////////////////
    //    Example of sample closed spine                                  //
    ////////////////////////////////////////////////////////////////////////

    var sampleClosedSpline = new THREE.CatmullRomCurve3( [
        new THREE.Vector3( 0, -40, -40 ),
        new THREE.Vector3( 0, 40, -40 ),
        new THREE.Vector3( 0, 140, -40 ),
        new THREE.Vector3( 0, 40, 40 ),
        new THREE.Vector3( 0, -40, 40 )
    ] );


    sampleClosedSpline.type = 'catmullrom';
    sampleClosedSpline.closed = true;


    //////////////////////////////////////////////////////////////////////////////
    //     Extrusion method to covert the spline/vector data into 3d object     //
    //////////////////////////////////////////////////////////////////////////////



    // I used this method and have tried the following properties but these do not work
    //
    // var tube = new THREE.TubeBufferGeometry( curve, 12, 2, 20, true);
    //
    // 1. ellipse.clone()
    // 2. geometrycirc.clone()
    // 3. materialcirc.clone()
    // 4. path.clone()
    // 5. curve
    //
    // Therefore I am either doing something wrong or there must be a further process that needs
    // to be implemented.



    // this works as standard
    var tube = new THREE.TubeBufferGeometry( sampleClosedSpline, 12, 2, 20, true);


    var tubeMesh = THREE.SceneUtils.createMultiMaterialObject( tube, [
        new THREE.MeshLambertMaterial( {
            color: 0xffffff
        } ),
        new THREE.MeshBasicMaterial( {
            color: 0xff00ff,
            opacity: 0.3,
            wireframe: true,
            transparent: true
        } ) ] );


    tubeMesh.scale.set( .2, .2, .2 );
    this.scene.add( tubeMesh );


    ///////////////////////////////////////////////////////////////////////////////

因此，当我为已创建的样条曲线属性放置样条曲线属性时，会出现黑屏和以下错误msgs：

var曲线；

以及使用的其他变量（请参阅代码以查看我尝试过的内容）

编辑：2017年3月23日

韦斯特兰利的方法是理想的解决方案

---

您想创建一个椭圆形状的

TubeGeometry

或

TubeBufferGeometry

这里有一种方法可以做到这一点，这种方法非常通用，其他人也可以使用

首先，创建一个定义路径的新类：

//椭圆类，它扩展了虚拟基类曲线
类椭圆延伸三条曲线{
建造商（X半径，伊拉迪乌斯）{
超级（）；
//添加半径作为属性
这个.xRadius=xRadius；
this.yRadius=yRadius；
}
getPoint（t，optionalTarget=new THREE.Vector3（））{
常数点=可选目标；
var弧度=2*Math.PI*t；
返回新的3.Vector3（this.xRadius*Math.cos（弧度），
这个.yRadius*数学.sin（弧度），
0 );
}
}

然后从路径创建几何体

// path
var path = new Ellipse( 5, 10 );

// params
var pathSegments = 64;
var tubeRadius = 0.5;
var radiusSegments = 16;
var closed = true;

var geometry = new THREE.TubeBufferGeometry( path, pathSegments, tubeRadius, radiusSegments, closed );

超级简单。：）

小提琴：

---

three.js r.129

到目前为止你都试过什么？您是否尝试过重新创建您链接的示例并插入曲线以代替其中一条样条线？@jered Tnxs请再次查看我的问题，我已添加了截图、示例代码和我认为正在发生的事情的想法。非常感谢，我查看了三个.js文档，找到了

TubeGeometry

和

TubeBufferGeometry

之间的区别，说实话，它们看起来是一样的。我只想创建此对象的一个实例，以便您建议这两个实例中的哪一个。

TubeBufferGeometry

的内存效率更高。