通过修改Three.JS中的属性在画布中绘制直线“线”

Question

我创造了一个小提琴，显示了长度和圆柱直径

的指导原则

我能够将线定位为长度。

但我不确定如何更改线条的属性，因此它绘制一条直线来显示直径，如下例所示：

// Diameter line    
var diameterLineGeometry = new THREE.Geometry();
var diameterVertArray = diameterLineGeometry.vertices;
diameterVertArray.push(new THREE.Vector3(1, 0.5, 0), new THREE.Vector3(-0.3, 0.7, 1));
diameterLineGeometry.computeLineDistances();
var diameterLineMaterial = new THREE.LineBasicMaterial({
    color: 0xcc0000
});
var diameterLine = new THREE.Line(diameterLineGeometry, diameterLineMaterial);
cylinder.add(diameterLine);

我使用此代码时遇到的问题是，当我更改圆柱体对象的六个部分时，＆＃34; Lines＆＃34;移动。线条的位置显示当对象很小时找到例如：50 x 40，但是如果我将尺寸更改为＆＃34; 123x123＆＃34;线条位置移动。

以下是相同的小提琴：http://jsfiddle.net/b9ge6fr6/7/

如果您需要任何其他信息，请与我们联系。

请建议。

Answer 1

直径的坐标为

diameterVertArray.push(new THREE.Vector3(-1, 0.5, 0), new THREE.Vector3(1, 0.5, 0));

一个长度是

lengthVertArray.push(new THREE.Vector3(-1, 0.51, 0), new THREE.Vector3(-1, -0.51, 0));

另一个是

alengthVertArray.push(new THREE.Vector3(0, 0.5, 1), new THREE.Vector3(0, -0.5, 1));

fiddle