在Three.JS修改属性绘制在画布直“线” [英] Draw Straight “Line” in Canvas by Modifying Properties in Three.JS

问题描述

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

I have created a fiddle which shows the guidelines for length and Diameter for Cylinder

我能够定位线长度。

但不知道如何改线的属性，以便它绘制一条直线，显示直径，如显示下面的示例中：

But m not sure how to change the properties of line so it draws a straight line to show Diameter, like show in the sample below:

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

我得到这个code的问题是，当我改变气缸对象的sixe，线移动的位置。线的位置显示发现，当对象小的如：50×40，但如果我更改尺寸为类似123x123线位置移动。

The issue I'm getting with this code is, when I change the sixe of cylinder object, the position of "Lines" moves. The position of Lines shows find when the object is small for eg: 50 x 40, but if I change the dimensions to something like "123x123" the lines position moves.

下面是捣鼓一样： http://jsfiddle.net/b9ge6fr6/7/

Here is the Fiddle for the same: http://jsfiddle.net/b9ge6fr6/7/

让我知道如果你需要任何其他信息。

Let me know if you need any other information.

请建议。

推荐答案

的坐标为直径

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

小提琴

这篇关于在Three.JS修改属性绘制在画布直“线”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！