从three.js中的THREE.Line对象中挤出3d形状 [英] Extrude 3d shape from THREE.Line object in three.js
本文介绍了从three.js中的THREE.Line对象中挤出3d形状的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在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;
以及使用的其他变量（请参阅代码查看我尝试的内容）
< a href =https://i.stack.imgur.com/ZedjU.png =nofollow noreferrer>
所以我只需要了解正在发生的事情或我可以尝试的其他方法。
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, 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 );
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_splines
These 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/2017
- Right so I tried to implement the same method of extrusion as found on: https://threejs.org/examples/#webgl_geometry_extrude_splines
- I 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.
Tnxs
EDIT: 23/03/2017
WestLangley'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 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 );
};
Then create the geometry from the path.
// 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 );
Super easy. :)
Fiddle: http://jsfiddle.net/nu69ed8t/1/
three.js r.84
这篇关于从three.js中的THREE.Line对象中挤出3d形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
