correct orientation cube labeling #4

src/js/clip/UpdatableBoxGeometry.ts

@@ -1,41 +1,67 @@
 import { BufferGeometry } from 'three/src/core/BufferGeometry';
 import { Uint16BufferAttribute } from 'three/src/core/BufferAttribute';
 import { Vector3 } from 'three/src/math/Vector3';
-
+import { Float32BufferAttribute } from 'three/src/core/BufferAttribute';
 
 class UpdatableBoxGeometry extends BufferGeometry {
 
-    faces;
     vertices: Array<Vector3>;
     indexArray: Array<number>;
+    uvs: Array<number>;
+    groupStart: number;
 
     constructor(vertices: Array<Vector3>) {
+        // call parent constructor
         super();
 
+        this.type = 'UpdatableBoxGeometry';
         this.indexArray = new Array();
         this.vertices = new Array();
-        this.buildPlane(0, vertices[0], vertices[1], vertices[5], vertices[4]); //y1
+        this.uvs = [];
-        this.buildPlane(4, vertices[0], vertices[2], vertices[3], vertices[1]); //z1
+
-        this.buildPlane(8, vertices[0], vertices[4], vertices[6], vertices[2]); //x1
+        // helper variables for material index 
-        this.buildPlane(12, vertices[7], vertices[5], vertices[1], vertices[3]); //x2
+        this.groupStart = 0;
-        this.buildPlane(16, vertices[7], vertices[3], vertices[2], vertices[6]); //y2
+
-        this.buildPlane(20, vertices[7], vertices[6], vertices[4], vertices[5]); //z2
+        this.buildPlane(0, vertices[0], vertices[1], vertices[5], vertices[4], 0); //y1 south 
+        this.buildPlane(4, vertices[0], vertices[2], vertices[3], vertices[1], 1); //z1 bottom
+        this.buildPlane(8, vertices[0], vertices[4], vertices[6], vertices[2], 2); //x1 east
+        this.buildPlane(12, vertices[7], vertices[5], vertices[1], vertices[3], 3); //x2 west
+        this.buildPlane(16, vertices[7], vertices[3], vertices[2], vertices[6], 4); //y2 nort
+        this.buildPlane(20, vertices[7], vertices[6], vertices[4], vertices[5], 5); //z2
         this.setFromPoints(this.vertices);
 
         let indices = new Uint16BufferAttribute(this.indexArray, 1);//.setDynamic(true);
         this.setIndex(indices);
 
         this.computeVertexNormals();
+        this.setAttribute('uv', new Float32BufferAttribute(this.uvs, 2));
     }
 
-    buildPlane(i, v0, v1, v2, v3) {
+    buildPlane(i, v0, v1, v2, v3, materialIndex) {
-        // let frontFaceGeometry =  new PlaneGeometry(v0, v1, v2, v3);       
+        let groupCount = 0;
-        // let frontFaceMesh = new Mesh(frontFaceGeometry, material.Invisible);
-        // frontFaceMesh.axis = axis;
-        this.vertices.push(v0, v1, v2, v3);
 
-        this.indexArray.push(i, i +1, i + 2, i, i +2, i+3);
+        this.vertices.push(v0, v1, v2, v3);
+        this.indexArray.push(i, i + 1, i + 2, i, i + 2, i + 3);
         // let indexArray = [0, 1, 2, 0, 2, 3];
+        groupCount += 6;
+
+        if (materialIndex == 2) { // east
+            this.uvs.push(1, 0, 1, 1, 0, 1, 0, 0);
+        } else if (materialIndex == 3) { //west
+            this.uvs.push(1, 1, 0, 1, 0, 0, 1, 0);
+        } else if (materialIndex == 4) { //north
+            this.uvs.push(0, 1, 0, 0, 1, 0, 1, 1);
+        } else if (materialIndex == 5) { //top
+            this.uvs.push(1, 1, 0, 1, 0, 0, 1, 0);
+        } else {
+            this.uvs.push(0, 0, 1, 0, 1, 1, 0, 1);
+        }
+
+        // add a group to the geometry. this will ensure multi material support
+        this.addGroup(this.groupStart, groupCount, materialIndex);
+
+        // calculate new start value for groups
+        this.groupStart += groupCount;
     }
 
     update() {

src/js/controls/NorthArrow.js

@@ -9,6 +9,7 @@ import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer';
 import { Scene } from 'three/src/scenes/Scene';
 import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
 import { BoxGeometry } from '../core/BoxGeometry';
+import { UpdatableBoxGeometry } from '../clip/UpdatableBoxGeometry';
 import { Mesh } from 'three/src/objects/Mesh';
 import * as material from '../clip/material';
 import { Texture } from 'three/src/textures/Texture';
@@ -130,6 +131,7 @@ export class NorthArrow extends Control {
         let eastTexture = this._makeTextTexture("E", 0.6, 'rgba(0,0,0,1)');
         let eastMaterial = new MeshBasicMaterial({
             transparent: true,
+            // color:  0x6f6f6f,
             side: DoubleSide,
             map: eastTexture,
             // wireframe: true
@@ -159,22 +161,21 @@ export class NorthArrow extends Control {
             map: topTexture
         });
       
-        // var mesh1 = new Mesh(
+        //add orientation box:        
-        //     new PlaneGeometry(5, 5),
+        let vertices = [
-        //     material1
+            new Vector3(0, 0, 0), new Vector3(5, 0, 0),
-        // );
+            new Vector3(0, 5, 0), new Vector3(5, 5, 0),
-        // // const yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
+            new Vector3(0, 0, 5), new Vector3(5, 0, 5),
-        // // mesh1.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
+            new Vector3(0, 5, 5), new Vector3(5, 5, 5)
-
+        ];
-        // mesh1.position.set(2.5, 2.5, 5.1);
+        this.boxGeometry = new UpdatableBoxGeometry(vertices);        
-        // this.objectGroup.add(mesh1);
-
-        //add box:
-        this.boxGeometry = new BoxGeometry(5, 5, 5);
          this.boxMesh = new Mesh(this.boxGeometry,
-            [eastMaterial, westMaterial, northMaterial, southMaterial, topMaterial,  material.BoxBackFace]);
+            [southMaterial, material.BoxBackFace, eastMaterial, westMaterial, northMaterial, topMaterial]);
-        // material.BoxBackFace.wireframe = true;
+
-        this.boxMesh.position.set(2.5, 2.5, 2.5);
+        // this.boxGeometry = new BoxGeometry(5, 5, 5);
+        // this.boxMesh = new Mesh(this.boxGeometry,
+        //     [eastMaterial, westMaterial, northMaterial, southMaterial, topMaterial, material.BoxBackFace]);
+        // this.boxMesh.position.set(2.5, 2.5, 2.5);
         this.objectGroup.add(this.boxMesh);
 
         if (app_scene) {