Threejs - points transpose

by black strings

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundles/rxjs.umd.min.js"></script>

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}

JavaScript

var scene, renderer, camera
var cube
var controls

init()
lightSetup()
animate()

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true,
  })
  var width = window.innerWidth
  var height = window.innerHeight
  renderer.setSize(width, height)
  document.body.appendChild(renderer.domElement)

  scene = new THREE.Scene()

  scene.rotation.x = -Math.PI / 2

  var center = new THREE.Vector3(72, 0.625, -72)

  var gridXZ = new THREE.GridHelper(1000, 100)
  gridXZ.rotation.x = -Math.PI / 2
  scene.add(gridXZ)

  var axes = new THREE.AxesHelper(1000)
  scene.add(axes)

  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000)
  camera.position.x = 76
  camera.position.y = 76
  camera.position.z = 76
  camera.lookAt(center)
  camera.updateProjectionMatrix()

  controls = new THREE.OrbitControls(camera, renderer.domElement)


  const boxBufferGeometry = new THREE.BoxBufferGeometry(10, 10, 10)

  const boxMesh = new THREE.Mesh(
    boxBufferGeometry,
    new THREE.MeshBasicMaterial({ color: "red" }),
  )

  boxMesh.add(new THREE.AxesHelper(50))

  //scene.add(boxMesh);

  boxMesh.position.x = 20

  boxMesh.rotation.z = 1

  boxMesh.updateMatrixWorld();

  let inverseMatrix = new THREE.Matrix4();
  
 	inverseMatrix.getInverse(boxMesh.matrixWorld);
 
  var vertices = getVertices(boxBufferGeometry);
  

  createSphereInstancedMesh("green", vertices, 1);

  var verticesWorld = convertVerticesToWorld(vertices, boxMesh.matrix);
  
    // Convert world-space vertices back to local space
 let verticesLocal = verticesWorld.map(v => v.clone().applyMatrix4(inverseMatrix));
  
    createSphereInstancedMesh("purple", verticesLocal, 1);

  let geometry2 = new THREE.BufferGeometry()

  // Define the indices for the triangular faces
  const indices = new Uint16Array([
    // Front Face
    0, 2, 5, 5, 2, 7,

    // Back Face
    1, 4, 3, 3, 4, 6,

    // Top Face
    0, 5, 1, 1, 5, 4,

    // Bottom Face
    2, 3, 7, 7, 3, 6,

    // Right Face
    0, 1,...