我正在使用下面的代码在我的three.js场景中创建数百行
edgeGeometry[i] = new THREE.Geometry();
edgeGeometry[i].vertices[0] = v(x1,y1,z1);
edgeGeometry[i].vertices[1] = v(x2,y2,z2);
edgesMat[i] = new THREE.LineBasicMaterial({
color: 0x6699FF, linewidth: 1, fog:true});
edge[i] = new THREE.Line(edgeGeometry[i], edgesMat[i]);
edge[i].type = THREE.Lines;
scene2.add(edge[i]);
它能正常工作，但当我将 "linewidth" 的值更改为更大或更小的值时，场景中没有任何区别。
我应该如何更改线条的粗细？ 有什么建议吗？
谢谢，Dimitris
您可以通过将浏览器设置为使用本地OpenGL而不是ANGLE来实现线条粗细的渲染。 您可以在此处阅读有关如何在Chrome上执行此操作的说明。请注意，如果切换到本地OpenGL，您将会遇到性能差异。
编辑：
大师级人物MrDoob本人在此发布了如何在Chrome和Firefox上执行此操作的说明。
注意： 由于最新的OpenGL版本也不再支持设置线条粗细，因此这个选项已经不再是有效的解决方案了。请参见 gman的答案。这意味着如果您要使用线条粗细，则第二个选项是正确的选择。
THREE.MeshLine类还有另一种解决方案；github上的这个THREE.MeshLine类是一个不错的解决方案。它附带了一个特殊的THREE.MeshLineMaterial。根据文档，只需执行以下步骤：
- 创建并填充几何体。
- 创建一个
THREE.MeshLine并分配几何体。- 创建一个
THREE.MeshLineMaterial。- 使用
THREE.MeshLine和THREE.MeshLineMaterial创建THREE.Mesh。
MeshLineMaterial 的自定义着色器代码中并没有包含雾化着色器代码。你可以尝试添加它或者提出一个功能请求问题。 - Wilt你正在使用Windows吗？
我记得这在Windows上不能工作，因为它没有在ANGLE中实现。
这个问题发生在Windows Chrome和Firefox中，两者都使用ANGLE(WebGL到DirectX包装器)。
这个问题仍未被ANGLE项目解决。您可以在此处将其标记为星号，以获得更高的优先级，并在实施时获得通知：
我使用TubeGeometry在两点之间创建了一条粗线：
在Helix中可以看到绿色的线。
// line material
var lineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff00 });
let startVector = new THREE.Vector3(
RADI * Math.cos(t),
RADI * Math.sin(t),
3 * t
);
let endVector = new THREE.Vector3(
RADI * Math.cos(t + 10),
RADI * Math.sin(t + 10),
3 * t
);
let linePoints = [];
linePoints.push(startVector, endVector);
// Create Tube Geometry
var tubeGeometry = new THREE.TubeGeometry(
new THREE.CatmullRomCurve3(linePoints),
512,// path segments
0.5,// THICKNESS
8, //Roundness of Tube
false //closed
);
let line = new THREE.Line(tubeGeometry, lineMaterial);
scene.add(line);
extrude-polyline来生成一个简单复合体，用于加粗（多边形）线条，然后使用three-simplicial-complex将其转换为three.js网格。const THREE = require('three');
const extrudePolyline = require('extrude-polyline');
const Complex = require('three-simplicial-complex')(THREE);
function thickPolyline(points, lineWidth) {
const simplicialComplex = extrudePolyline({
// Adjust to taste!
thickness: lineWidth,
cap: 'square', // or 'butt'
join: 'bevel', // or 'miter',
miterLimit: 10,
}).build(points);
// Add a z-coordinate.
for (const position of simplicialComplex.positions) {
position[2] = 0;
}
return Complex(simplicialComplex);
}
const vertices = [[0, 0], [10, 0], [10, 10], [20, 10], [30, 00]];
const geometry = thickPolyline(vertices, 10);
const material = new THREE.MeshBasicMaterial({
color: 0x009900,
side: THREE.DoubleSide
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
感谢 Wilt's answer 指引我正确的方向，使我能够使用 THREE.MeshLine。
这可能比他们说的要棘手一些... 所以这是我的解决方案，我仔细跟随他们的文档和 演示 代码...（假设您已经包含了 Three 和 MeshLine）：
renderer = new THREE.WebGLRenderer({ canvas });
//...
function createCircle(resolution) {
let circleGeometry = new THREE.Geometry();
for (let rotation = 0; rotation <= Math.PI * 2.0; rotation += Math.PI * 0.1) {
circleGeometry.vertices.push(
new THREE.Vector3(Math.cos(rotation), Math.sin(rotation), 0));
}
let circleLine = new MeshLine();
circleLine.setGeometry(circleGeometry);
//Bonus: parabolic width! (See Z rotation below.)
//circleLine.setGeometry(circleGeometry, function(point) {
//return Math.pow(4 * point * (1 - point), 1);
//});
//Note: resolution is *required*!
return new THREE.Mesh(circleLine.geometry,
new MeshLineMaterial({
color: 'blue',
resolution,
sizeAttenuation: 0,
lineWidth: 5.0,
side: THREE.DoubleSide
}));
}
let circle = createCircle(new THREE.Vector2(canvas.width, canvas.height));
circle.rotation.x = Math.PI * 0.5;
circle.position.y = 20.0;
scene.add(circle);
//In update, to rotate the circle (e.g. if using parabola above):
world.circle.rotation.z += 0.05;
关闭大小衰减并使用THREE.DoubleSide，如我上面所做的那样，无论从哪个角度看，圆圈看起来都像一个漂亮、一致的圆形（不是"真正的3D"）。
对于只有一条线，你显然可以轻松地适应。