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>) {   
+    constructor(vertices: Array<Vector3>) {
-        super();   
+        // 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';
@@ -112,7 +113,7 @@ export class NorthArrow extends Control {
         // let zTo = new Vector3(from.x, from.y, from.z + 1);
         // let zDirection = zTo.clone().sub(from);
         this.objectGroup.add(new ArrowHelper(zTo, from, size, 0x6b716f, headLength, headWidth)); //8 is the length,  Gray = z; 20 and 10 are head length and width
-      
+
         // let spritey = this._makeTextSprite(
         //     "top",
         //     { fontsize: 32, backgroundColor: { r: 255, g: 100, b: 100, a: 1 } }
@@ -125,56 +126,56 @@ export class NorthArrow extends Control {
         // myText.position.set(2.5, 2.5, 6);
         // this.objectGroup.add(myText);
 
-      
+
 
         let eastTexture = this._makeTextTexture("E", 0.6, 'rgba(0,0,0,1)');
-        let eastMaterial = new MeshBasicMaterial({            
+        let eastMaterial = new MeshBasicMaterial({
             transparent: true,
+            // color:  0x6f6f6f,
             side: DoubleSide,
             map: eastTexture,
             // wireframe: true
         });
         let westTexture = this._makeTextTexture("W", 0.6, 'rgba(0,0,0,1)');
-        let westMaterial = new MeshBasicMaterial({            
+        let westMaterial = new MeshBasicMaterial({
             transparent: true,
             side: DoubleSide,
             map: westTexture
         });
         let northTexture = this._makeTextTexture("N", 0.6, 'rgba(0,0,0,1)');
-        let northMaterial = new MeshBasicMaterial({            
+        let northMaterial = new MeshBasicMaterial({
             transparent: true,
             side: DoubleSide,
             map: northTexture
         });
         let southTexture = this._makeTextTexture("S", 0.6, 'rgba(0,0,0,1)');
-        let southMaterial = new MeshBasicMaterial({            
+        let southMaterial = new MeshBasicMaterial({
             transparent: true,
             side: DoubleSide,
-            map: southTexture          
+            map: southTexture
         });
         let topTexture = this._makeTextTexture("top", 0.6, 'rgba(0,0,0,1)');
-        let topMaterial = new MeshBasicMaterial({            
+        let topMaterial = new MeshBasicMaterial({
             transparent: true,
             side: DoubleSide,
             map: topTexture
-        });   
+        });
+      
+        //add orientation box:        
+        let vertices = [
+            new Vector3(0, 0, 0), new Vector3(5, 0, 0),
+            new Vector3(0, 5, 0), new Vector3(5, 5, 0),
+            new Vector3(0, 0, 5), new Vector3(5, 0, 5),
+            new Vector3(0, 5, 5), new Vector3(5, 5, 5)
+        ];
+        this.boxGeometry = new UpdatableBoxGeometry(vertices);        
+         this.boxMesh = new Mesh(this.boxGeometry,
+            [southMaterial, material.BoxBackFace, eastMaterial, westMaterial, northMaterial, topMaterial]);
 
-        // var mesh1 = new Mesh(
+        // this.boxGeometry = new BoxGeometry(5, 5, 5);
-        //     new PlaneGeometry(5, 5),
+        // this.boxMesh = new Mesh(this.boxGeometry,
-        //     material1
+        //     [eastMaterial, westMaterial, northMaterial, southMaterial, topMaterial, material.BoxBackFace]);
-        // );
+        // this.boxMesh.position.set(2.5, 2.5, 2.5);
-        // // const yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2;
-        // // mesh1.scale.set(yScale * canvas.width / canvas.height, yScale, 0);
-
-        // mesh1.position.set(2.5, 2.5, 5.1);
-        // 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]);
-        // material.BoxBackFace.wireframe = true;
-        this.boxMesh.position.set(2.5, 2.5, 2.5);
         this.objectGroup.add(this.boxMesh);
 
         if (app_scene) {
@@ -182,7 +183,7 @@ export class NorthArrow extends Control {
         }
     }
 
-    _makeTextTexture(message, textHeight = 0.6, color = 'rgba(0,0,0,1)') {   
+    _makeTextTexture(message, textHeight = 0.6, color = 'rgba(0,0,0,1)') {
         let text = `${message}`;
         // this.textHeight = textHeight;
         // this.color = color;
@@ -264,21 +265,21 @@ export class NorthArrow extends Control {
         if (drawTextStroke) {
             ctx.lineWidth = strokeWidth * fontSize / 10;
             ctx.strokeStyle = strokeColor;
-        }       
+        }
-  
+
         lines.forEach((line, index) => {
             const lineX = (innerWidth - ctx.measureText(line).width) / 2;
             const lineY = (index + 1) * fontSize;
 
-           
+
 
             drawTextStroke == true && ctx.strokeText(line, lineX, lineY);
             ctx.fillText(line, lineX, lineY);
-           
-        });
-       
 
-        
+        });
+
+
+
 
 
 
@@ -287,7 +288,7 @@ export class NorthArrow extends Control {
         texture.needsUpdate = true;
 
         return texture;
-    } 
+    }
 
     _buildLabels() {