使用Three.js时Windows上缺少线宽的解决方法 [英] Workaround for lack of line width on Windows when using Three.js
问题描述
我正在尝试使用Three.js绘制旋转的3D坐标系.我希望轴具有一定的厚度,到目前为止,我已经使用LineBasicMaterial的线宽参数完成了此操作.
I'm trying to draw a rotating 3D coordinate system using Three.js. I want the axes to have some thickness, which so far I have accomplished using LineBasicMaterial's linewidth parameter.
由于我不在Windows上,因此以下代码对我有用:
The following code works for me since I am not on Windows:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window. innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var triad = new THREE.Geometry();
triad.vertices.push( new THREE.Vector3( 0, 0, 0 ) );
triad.vertices.push( new THREE.Vector3( 10, 0, 0 ) );
triad.vertices.push( new THREE.Vector3( 0, 0, 0 ) );
triad.vertices.push( new THREE.Vector3( 0, 10, 0 ) );
triad.vertices.push( new THREE.Vector3( 0, 0, 0 ) );
triad.vertices.push( new THREE.Vector3( 0, 0, 10 ) );
var line_mat = new THREE.LineBasicMaterial({'linewidth': 3});
var frame = new THREE.Line(triad, line_mat, THREE.LinePieces);
scene.add( frame );
camera.position.z = 40;
function render() {
requestAnimationFrame(render);
frame.rotation.x += 0.1;
frame.rotation.y += 0.02;
renderer.render(scene, camera);
}
render();
不幸的是,由于ANGLE库,Windows上的线宽受到限制,请参见以下问题:
Unfortunately, there is a limitation on linewidth on Windows due to the ANGLE library, see this question: Thickness of lines using THREE.LineBasicMaterial
我可以使用什么作为解决方法,以便在Windows上正确显示?
What can I use as a workaround so that this displays correctly on Windows?
推荐答案
我找到了解决行宽问题的方法.我创建了一个新方法,并传递了要绘制线条的坐标.然后在您的方法中,在坐标周围绘制多条线.这是代码:
I got workaround for the width of the line. I created a new method and passed the coordinates where line is to be drawn. Then in your method , draw multiple lines around the coordinates. Here is the code :
function drawLine(lineMaterial, x1, y1 , z1, x2, y2, z2, thickness){
for (i = 0; i < thickness * 2; i++) { // multiplied it by 2 to be more granule pixels
var routerLine1Geometry = new THREE.Geometry();
routerLine1Geometry.vertices.push( new THREE.Vector3(x1, y1+i/4, z1));//divided it by 4 to be more granule pixels
routerLine1Geometry.vertices.push( new THREE.Vector3(x2, y2+i/4, z2) );
var routerLine1 = new THREE.Line( routerLine1Geometry, lineMaterial );
scene.add(routerLine1);
}
for (i = 0; i < thickness * 2; i++) {
var routerLine1Geometry = new THREE.Geometry();
routerLine1Geometry.vertices.push( new THREE.Vector3(x1, y1-i/4, z1) ); //
routerLine1Geometry.vertices.push( new THREE.Vector3(x2, y2-i/4, z2) );
var routerLine1 = new THREE.Line( routerLine1Geometry, lineMaterial );
scene.add(routerLine1);
}
}
让我知道这是否行不通.
Let me know if this doesnt work.
这篇关于使用Three.js时Windows上缺少线宽的解决方法的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!