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

本文介绍了从three.js中的THREE.Line对象中挤出3d形状的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 在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 }）; //创建要添加到场景的最终对象 var ellipse = new THREE.Line（geometrycirc，materialcirc）; this.scene.add（ellipse）; 我想使用这个ellipseCurve作为创建类似于这些示例的拉伸形状的基础。 以下是执行此操作的代码： ///////////////////////////////////////// //////////////////////////////// //我的曲线// /// ////////////////////////////////////////////////// //////////////////// 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 }）; //根据点和材料创建最终对象 var ellipse = new THREE.Line（geometrycirc，materialcirc）; this.scene.add（ellipse）; ////////////////////////////////// ////////////////////////////////////// //样本闭合脊柱示例/ / ///////////////////////////////////////////// /////////////////////////// var sampleClosedSpline = new THREE.CatmullRomCurve3（[ new THREE .Vector3（0，-40，-40），新THREE.Vector3（0,40，-40），新THREE.Vector3（0,140，-40），新的THREE.Vector3（0,40,40），新的THREE.Vector3（0，-40,40）]）; sampleClosedSpline.type ='catmullrom'; sampleClosedSpline.closed = true; ////////////////////////////////////// //////////////////////////////////////// //隐蔽的挤压方法样条/矢量数据到3d对象// //////////////////////////////////// ////////////////////////////////////////// //我使用了这个方法，并尝试了以下属性，但这些不起作用 // // var tube = new THREE.TubeBufferGeometry（曲线，12,2 ，20，真）; // // 1. ellipse.clone（） // 2. geometrycirc.clone（） // 3. materialcirc.clone（） / / 4. path.clone（） // 5.曲线 // //因此我要么做错了，要么必须有一个需要 /的进一步过程/ 将要执行。 //这是标准的 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属性放置spline属性时，我得到一个黑色屏幕和以下错误消息： var curve; 以及使用的其他变量（请参阅代码查看我尝试的内容） 所以我只需要了解正在发生的事情或我可以尝试的其他方法。 Tnxs 编辑：23/03/2017 WestLangley的方法是理想的解决方案 解决方案您想要以椭圆的形状创建 TubeGeometry 或 TubeBufferGeometry 。 这是一种方法这样做也足以让其他人使用。 首先，创建一个定义路径的新类： // Ellipse类，扩展虚拟基类Curve 函数Ellipse（xRadius，yRadius）{ THREE.Curve.call （ 这个 ）; //添加所需的属性 this.xRadius = xRadius; this.yRadius = yRadius; } Ellipse.prototype = Object.create（THREE.Curve.prototype）; Ellipse.prototype.constructor = Ellipse; //为子类定义getPoint函数 Ellipse.prototype.getPoint = function（t）{ var radians = 2 * Math.PI * t ; 返回新的THREE.Vector3（this.xRadius * Math.cos（弧度）， this.yRadius * Math.sin（弧度）， 0）; }; 然后从路径创建几何。 //路径 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 In three.js I have created an ellipseCurve for which I want to extrude and make 3d.CODE USE TO MAKE THIS:var curve = new THREE.EllipseCurve(0, 0, // ax, aY10, 13.3, // xRadius, yRadius0, 2 * Math.PI, // aStartAngle, aEndAnglefalse, // aClockwise0 // 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 scenevar ellipse = new THREE.Line( geometrycirc, materialcirc );this.scene.add( ellipse );I want to use this ellipseCurve as a basis to create an extruded shape similar to these examples.https://threejs.org/examples/#webgl_geometry_extrude_splinesThese examples seem to use vectors to do this, so I assume I need to convert the curve into one.I am not sure how to do this since I have been unable to find references on this matter.Any help to do this?UPDATE: 22/03/2017Right so I tried to implement the same method of extrusion as found on:https://threejs.org/examples/#webgl_geometry_extrude_splinesI was able to but this spline into my scene:HERE IS THE CODE TO DO THIS:///////////////////////////////////////////////////////////////////////// // 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 ); ///////////////////////////////////////////////////////////////////////////////So when I place the spline property for the one that I have created i get a black screen and the following error msgs:var curve;and the other variables used (refer to code to see what I have tried)So I just need some advice onto what is happening or other methods that I could try.TnxsEDIT: 23/03/2017WestLangley's method was the ideal solution 解决方案 You want to create a TubeGeometry or TubeBufferGeometry in the shape of an ellipse.Here is one way to do it that is general enough for others to use, too.First, create a new class that defines your path:// Ellipse class, which extends the virtual base class Curvefunction 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 subClassEllipse.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 );};Then create the geometry from the path.// pathvar path = new Ellipse( 5, 10 );// paramsvar pathSegments = 64;var tubeRadius = 0.5;var radiusSegments = 16;var closed = true;var geometry = new THREE.TubeBufferGeometry( path, pathSegments, tubeRadius, radiusSegments, closed );Super easy. :)Fiddle: http://jsfiddle.net/nu69ed8t/1/three.js r.84 这篇关于从three.js中的THREE.Line对象中挤出3d形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！