Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

128
Vistas
Rendering multiple boxes only displays correctly if perfectly squared

I'm using some logic to add boxes to my scene, based on how many items in height, width and depth, and that works well when they are all perfectly squared.

enter image description here

The problem comes if I want to use a different rectangular form:

enter image description here

I am quite a beginner at this. How can I correct it?

private addCubes() {
     // geometry
 const geometry = new THREE.BoxGeometry(1,4,4);
 const edgesGeometry = new THREE.EdgesGeometry(geometry);

 // material
 const material = new THREE.MeshBasicMaterial({
   color: 0x0d6efd,
 });
 const edgesMaterial = new THREE.LineBasicMaterial({
   color: 0x000000
 });

  // positions
for (let x = 0; x < 2; x++) {
  for (let y = 0; y < 1; y++) {
    for (let z = 0; z < 2; z++) {
      // mesh
      const mesh = new THREE.Mesh(geometry, material);
      mesh.scale.multiplyScalar(0.9);
      mesh.position.set(x, y, z);
      this.scene.add(mesh);

      const lines = new THREE.LineSegments(edgesGeometry, edgesMaterial);
      mesh.add(lines);
    }
  }
}
}
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Change mesh.position.set(x, y, z) to mesh.position.set(x, y, z * 4). Your boxes are 4 units deep in the z direction, but you're only moving the second rank of boxes by 1 unit, so they're overlapping.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda