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

I was able to position the Line for Length.

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

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.

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

Let me know if you need any other information.

Please suggest.

回答1:

The coordinates for the diameter are

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

one length is

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

and another one is

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

fiddle

来源：https://stackoverflow.com/questions/25534713/draw-straight-line-in-canvas-by-modifying-properties-in-three-js

标签

javascript

three.js

line