我想更改线条的宽度和不透明度以及我的代码，如下所示：
var geometry_link = new THREE.Geometry();
geometry_link.vertices.push(
new THREE.Vector3(item[0].x *1,item[0].y *1,item[0].z),
new THREE.Vector3(item[1].x *1,item[1].y *1,item[1].z)
);
geometry_link.colors.push(
new THREE.Color(0x000000),
new THREE.Color(0xffffff)
);
var line = new THREE.Line(geometry_link, new THREE.LineBasicMaterial({
vertexColors: true,
linewidth: 8,
transparent: true,
opacity: 0.1
})
但是行宽和不透明度都行不通。我发现了类似的问题，说线宽在Windows上不起作用，那是5年前了，现在呢？谢谢你的主意
LineBasicMaterial 确实支持透明线，如以下实时示例所示：
let camera, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 1;
scene = new THREE.Scene();
const geometry = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(), new THREE.Vector3(1, 0, 0)]);
const material = new THREE.LineBasicMaterial({
transparent: true,
opacity: 0.5
});
const mesh = new THREE.Line(geometry, material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}body {
margin: 0;
}
canvas {
display: block;
}<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>但是不支持宽线。因此linewidth，1在大多数浏览器中，将其设置为类似的值均无效。这是在行图元的上下文中的WebGL限制。
但是，three.js提供了基于三角形的宽线实现（有时称为网格线或带）。查看以下示例以获取更多信息：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句