我使用以下代码在 three.js 中创建了一条跑道形曲线:
var path = new THREE.Path();
path.moveTo(150,50);
path.lineTo(150,150);
path.quadraticCurveTo(150,175,100,175);
path.quadraticCurveTo(50,175,50,150);
path.lineTo(50,50);
path.quadraticCurveTo(50,25,100,25);
path.quadraticCurveTo(150,25,150,50);
var pathPoints = path.getPoints();
var pathGeometry = new THREE.BufferGeometry().setFromPoints(pathPoints);
var pathMaterial = new THREE.LineBasicMaterial({color:0xFF1493});
var raceTrack = new THREE.Line(pathGeometry,pathMaterial);
scene.add(raceTrack);
}
现在,轨道只是一条线,我想知道是否可以将轨道制作成具有宽度(仍然是 2D)的几何体,以便我可以为其添加纹理。
目前,路径看起来像这样:
我想要的是能够绘制相同的形状,但只是增加线条的宽度:
最佳答案
在 R91
中,three.js
添加了对三 Angular 线的支持。这种方法以可靠的方式使线宽大于 1px。
演示:https://threejs.org/examples/webgl_lines_fat.html
示例中没有应用纹理,但为底层几何体生成了 uv 坐标。
关于javascript - 在 Three.js 中为弯曲路径添加宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49350429/