Make parallel the crossing edges of opposite faces with three.js - three.js

Question

As you can see in the example below, an edge crossing a face is never parallel to this of the opposite face. How can I get this done ?
"use strict";
const renderer = new THREE.WebGLRenderer({canvas: document.querySelector("canvas")});
const camera = new THREE.PerspectiveCamera(70, 1, 1, 1000);
camera.position.z = 400;
// Make a scene
const scene = new THREE.Scene();
// Make a cube.
const geometry = new THREE.BoxGeometry(200, 200, 200);
// Make a material
const material = new THREE.MeshBasicMaterial({
color: 0x00FF00,
wireframe: true,
});
// Create a mesh based on the geometry and material
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
function resize() {
var width = renderer.domElement.clientWidth;
var height = renderer.domElement.clientHeight;
if (renderer.domElement.width !== width || renderer.domElement.height !== height) {
renderer.setSize(width, height, false);
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
}
function animate(time) {
time *= 0.001; // seconds
resize();
mesh.rotation.x = time * 0.5;
mesh.rotation.y = time * 1;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }
<canvas></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

Answer 1

That's the way the BoxGeometry algorithm works in Three.js. If you want to override the way in which the vertices are connected, you're going to have to manually build your THREE.Geometry as outlined in the docs. The idea is as follows:
Init a Geometry object.
Add vertices to the geometry with Vector3
Define how the vertices will be connected with Face3
I got things started with 2 sides of the box in the demo below, but I'll leave the remaining 4 sides for you to figure out (it might help to draw it out with pen and paper to figure out how to connect the remaining Face3s).
"use strict";
const renderer = new THREE.WebGLRenderer({canvas: document.querySelector("canvas")});
const camera = new THREE.PerspectiveCamera(70, 1, 1, 1000);
camera.position.z = 400;
// Make a scene
const scene = new THREE.Scene();
// 1. Start with empty geometry
const geometry = new THREE.Geometry();
// 2. Add vertices to geometry
geometry.vertices.push(
// verts [0-3] are in in +z
new THREE.Vector3( -100, 100, 100 ),
new THREE.Vector3( -100, -100, 100 ),
new THREE.Vector3( 100, -100, 100 ),
new THREE.Vector3( 100, 100, 100 ),
// verts [4-7] in -z
new THREE.Vector3( -100, 100, -100 ),
new THREE.Vector3( -100, -100, -100 ),
new THREE.Vector3( 100, -100, -100 ),
new THREE.Vector3( 100, 100, -100 ),
);
// 3. Connect vertices in desired order to make faces
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
geometry.faces.push( new THREE.Face3( 0, 2, 3 ) );
geometry.faces.push( new THREE.Face3( 4, 5, 6 ) );
geometry.faces.push( new THREE.Face3( 4, 6, 7 ) );
// Make a material
const material = new THREE.MeshBasicMaterial({
color: 0x00FF00,
wireframe: true,
});
// Create a mesh based on the geometry and material
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
function resize() {
var width = renderer.domElement.clientWidth;
var height = renderer.domElement.clientHeight;
if (renderer.domElement.width !== width || renderer.domElement.height !== height) {
renderer.setSize(width, height, false);
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
}
function animate(time) {
time *= 0.001; // seconds
resize();
mesh.rotation.x = time * 0.5;
mesh.rotation.y = time * 1;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }
<canvas></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>