Блог

Я хочу изменить ширину и непрозрачность линий и мой код следующим образом:

  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/three@0.119.1/build/three.js"></script>  

Однако широкие линии не поддерживаются. Таким образом, установка linewidth другого значения, такого как 1 , не имеет эффекта в большинстве браузеров. Это ограничение WebGL в контексте линейных примитивов.

Однако three.js обеспечивает широкую реализацию линий на основе треугольников (иногда называемых линиями сетки или лентами). Ознакомьтесь со следующим примером для получения дополнительной информации:

https://threejs.org/examples/webgl_lines_fat