javascript - 通过修改Three.JS中 "Line"的属性，在canvas中绘制并定位 "Line"

Question

我使用 Three.js 创建了一个立方体和线条。

我正在尝试定位线条，使其出现在立方体周围，如下所示:

但我不明白 line 的这些属性:

var lengthVertArray = lengthLineGeometry.vertices;
    lengthVertArray.push(new THREE.Vector3(-240, 50, 0), new THREE.Vector3(30, 120, 0));

我随机更改了一些值，并且能够将“线”定位为“长度”。

但我想确切地了解这些属性是什么，这样我就可以准确地更改它们并定位线条的高度和宽度。

这是我的立方体的 fiddle 和指南:http://jsfiddle.net/boquqL84/3/

如果您需要任何其他信息，请告诉我。

请提出建议。

Answer 1

由于您正在旋转和缩放立方体，因此如果将线条添加到立方体而不是场景中，一切都会变得更容易:

cube.add(lengthLine);

然后，因为您正在使用

创建立方体

cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshLambertMaterial({

立方体坐标将为-0.5和0.5。所以，你的台词可能是

lengthVertArray.push(new THREE.Vector3(-0.5, 0.6, 0.6), new THREE.Vector3(0.5, 0.6, 0.6));

也就是说，在距离 0.5 的立方体 0.1 处，设置从 -0.5 到 0.5 的直线

demo

demo 2

demo 3