Question

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

我想使用这个ellipseCurve作为创建类似于这些示例的拉伸形状的基础。

https://threejs.org/examples/#webgl_geometry_extrude_splines

这些示例似乎使用向量来执行此操作，因此我假设我需要将曲线转换为一个。

我不知道该怎么做，因为我无法找到关于此事的参考资料。

有任何帮助吗？

更新日期：22/03/2017

是的，所以我尝试实现与以下相同的挤出方法： https://threejs.org/examples/#webgl_geometry_extrude_splines

我能够将这个样条添加到我的场景中：

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

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


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

因此，当我将spline属性放置为我创建的那个时，我得到一个黑屏并出现以下错误信息：

var曲线;

和其他使用的变量（参考代码看看我试过的）

所以我只需要对正在发生的事情或其他可以尝试的方法提出一些建议。

Tnxs

编辑：23/03/2017

WestLangley的方法是理想的解决方案

Answer 1

您想要创建一个椭圆形的TubeGeometry或TubeBufferGeometry。

这是一种方法，通常也足以供其他人使用。

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

// Ellipse class, which extends the virtual base class Curve
function Ellipse( xRadius, yRadius ) {

    THREE.Curve.call( this );

    // add the desired properties
    this.xRadius = xRadius;
    this.yRadius = yRadius;

}

Ellipse.prototype = Object.create( THREE.Curve.prototype );
Ellipse.prototype.constructor = Ellipse;

// define the getPoint function for the subClass
Ellipse.prototype.getPoint = function ( t ) {

    var radians = 2 * Math.PI * t;

    return new THREE.Vector3( this.xRadius * Math.cos( radians ),
                              this.yRadius * Math.sin( radians ),
                              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 );

超级简单。：）

小提琴：http://jsfiddle.net/nu69ed8t/1/

three.js r.84

从three.js中的THREE.Line对象中挤出3d形状

1 个答案: