es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Agregando grosor a las líneas en threejs

29 Jul, 2023 Programación

Esta es mi demo, quiero agregar linewidth para darle más grosor a mi cuadro.

He revisado esta pregunta e intenté entender cómo puedo usar LineMaterial y Line2.

Parece que no funcionan en la demo.

Este es el código relevante:

function QuadGeometry(w, h) {
  let pts = [
    [0.5, 0.5],
    [-0.5, 0.5],
    [-0.5, -0.5],
    [0.5, -0.5]
  ].map((p) => {
    return new THREE.Vector2(p[0], p[1]);
  });
  let g = new THREE.BufferGeometry().setFromPoints(pts);
  g.setIndex([0, 1, 2, 3, 0]);
  g.scale(w, h, 1);

  return g;
}

let g = QuadGeometry(
  THREE.MathUtils.randInt(15, 30),
  THREE.MathUtils.randInt(15, 30)
);
let m = new LineMaterial({
  color: "yellow",
  linewidth: 5
});
let quad = new Line2(g, m);

Como puedes ver, el quad no es visible con estos cambios.

Si reemplazo con LineBasicMaterial y Line, el quad es visible.

También encontré que puede ser un error, pero soy muy principiante en three.js.

Cualquier edición en el codesandbox sería genial para que lo muestres.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Agregar grosor de línea a un cuadrado en Three.js

    Para agregar grosor de línea a un cuadrado en Three.js, podemos usar LineBasicMaterial con Line en lugar de LineMaterial con Line2. También podemos modificar la propiedad linewidth del material para ajustar el grosor de las líneas.

    Aquí está el código actualizado:

    function QuadGeometry(w, h) {
  let pts = [
    [0.5, 0.5],
    [-0.5, 0.5],
    [-0.5, -0.5],
    [0.5, -0.5]
  ].map((p) => {
    return new THREE.Vector2(p[0], p[1]);
  });
  let g = new THREE.BufferGeometry().setFromPoints(pts);
  g.setIndex([0, 1, 2, 3, 0]);
  g.scale(w, h, 1);

  return g;
}

let g = QuadGeometry(
  THREE.MathUtils.randInt(15, 30),
  THREE.MathUtils.randInt(15, 30)
);

let m = new THREE.LineBasicMaterial({
  color: "yellow",
  linewidth: 5 // ajustar ancho de línea aquí
});

let quad = new THREE.Line(g, m);
scene.add(quad);

    Podemos ajustar la propiedad linewidth para darle más grosor a las líneas. Esto debería hacer que el cuadrado sea visible.

    Puedes ver una demostración en vivo en este codesandbox.

Comments are closed.