从three.js中的THREE.Line对象中挤出3d形状 [英] Extrude 3d shape from THREE.Line object in three.js
问题描述
在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屋!