From 9781536e37cb8d727967aede3a7e46a5a06ae785 Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Thu, 6 May 2021 14:58:12 +0200 Subject: [PATCH] correct orientation cube labeling #4 --- src/js/clip/UpdatableBoxGeometry.ts | 60 ++++++++++++++++++------- src/js/controls/NorthArrow.js | 69 +++++++++++++++-------------- 2 files changed, 78 insertions(+), 51 deletions(-) diff --git a/src/js/clip/UpdatableBoxGeometry.ts b/src/js/clip/UpdatableBoxGeometry.ts index d53c3ab..7ed40f6 100644 --- a/src/js/clip/UpdatableBoxGeometry.ts +++ b/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; indexArray: Array; + uvs: Array; + groupStart: number; - constructor(vertices: Array) { - super(); - + constructor(vertices: Array) { + // 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.buildPlane(4, vertices[0], vertices[2], vertices[3], vertices[1]); //z1 - this.buildPlane(8, vertices[0], vertices[4], vertices[6], vertices[2]); //x1 - this.buildPlane(12, vertices[7], vertices[5], vertices[1], vertices[3]); //x2 - 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.uvs = []; + + // helper variables for material index + this.groupStart = 0; + + 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) { - // let frontFaceGeometry = new PlaneGeometry(v0, v1, v2, v3); - // let frontFaceMesh = new Mesh(frontFaceGeometry, material.Invisible); - // frontFaceMesh.axis = axis; - this.vertices.push(v0, v1, v2, v3); + buildPlane(i, v0, v1, v2, v3, materialIndex) { + let groupCount = 0; - 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() { diff --git a/src/js/controls/NorthArrow.js b/src/js/controls/NorthArrow.js index 68030d1..b73696f 100644 --- a/src/js/controls/NorthArrow.js +++ b/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( - // new PlaneGeometry(5, 5), - // material1 - // ); - // // 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.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) { @@ -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() {