Commit c6240c70 authored by bernie wang's avatar bernie wang
Browse files

fixed rotating bounding box issue (problem was using rotated x coordinates to...

fixed rotating bounding box issue (problem was using rotated x coordinates to calulate rotated z coordinates
parent e07324fc
......@@ -12,16 +12,24 @@
<body>
<nav class="tools">
<ul id="tools">
<li><input type="file" id="file_input" class="fa"></li>
<li><a href="#" id="draw-box"><i class="fas fa-cube"></i></a></li>
<li><a href="#" id="save"><i class="fa fa-floppy-o"></i></a></li>
<li><a href="#" id="export"><i class="fa fa-picture-o"></i></a></li>
<li><a href="#" class="selected" id="move"><i class="large material-icons">3d_rotation</i></a></li>
<li>
<!-- <div class="upload"> -->
<input type="file" id="file_input" class="inputfile">
<!-- <i class="fa fa-upload" id="upload_icon"></i> -->
<!-- <label for="file_input">Choose a file</label> -->
<!-- </div> -->
</li>
<!-- <li><a href="#" id="draw-box"><i class="fas fa-cube"></i></a></li> -->
<!-- <li><a href="#" id="save"><i class="fa fa-floppy-o"></i></a></li> -->
<!-- <li><a href="#" id="export"><i class="fa fa-picture-o"></i></a></li> -->
<li><a href="#" class="selected" id="move"><i class="fa material-icons">3d_rotation</i></a></li>
<li><a href="#" id="move2D"><i class="fa fa-arrows"></i></a></li>
<li><a href="#" id="label"><i class="fa fa-pencil"></i></a></li>
</ul>
<button onclick="toggle_reg_attr_panel()" class="leftsidebar_accordion" id="reg_attr_panel_button">Region Attributes</button>
<!-- <button onclick="toggle_reg_attr_panel()" class="leftsidebar_accordion" id="reg_attr_panel_button">Region Attributes</button> -->
</nav>
......
......@@ -22,7 +22,7 @@ var boundingBoxes = [];
var image_loaded = false;
var newBoundingBox;
var newBox;
var newBoxHelper;
var newBoundingBox2;
var newBox2;
......@@ -34,9 +34,10 @@ var boxgeometry = new THREE.BoxGeometry( 1, 1, 1 );
var boxmaterial = new THREE.MeshDepthMaterial( {opacity: .1} );
var move2D = false;
var t = 0, dt = 0.01; // t (dt delta for demo)
var start, end;
var angle;
var pointMaterial = new THREE.PointsMaterial( { size: pointSize, vertexColors: THREE.VertexColors } );
init();
// animate();
......@@ -51,8 +52,8 @@ function generatePointCloud( vertices, color ) {
var colors = [];
var k = 0;
var stride = 128;
for ( var i = 0, l = vertices.length; i < l; i ++ ) {
var stride = 32;
for ( var i = 0, l = 0; i < l; i ++ ) {
// creates new vector from a cluster and adds to geometry
var v = new THREE.Vector3( vertices[ stride * k + 1 ],
vertices[ stride * k + 2 ], vertices[ stride * k ] );
......@@ -76,6 +77,29 @@ function generatePointCloud( vertices, color ) {
}
function Box(anchor, cursor, boundingBox, boxHelper) {
this.color = new THREE.Color( 0,1,0 );
this.anchor = anchor;
this.geometry = new THREE.Geometry();
this.points = new THREE.Points( this.geometry, pointMaterial );
this.geometry.vertices.push(anchor);
this.boundingBox = boundingBox;
this.boxHelper = boxHelper;
this.colors = [];
for (var i = 0; i < 5; i++) {
this.colors.push( this.color.clone().multiplyScalar( 7 ) );
}
this.geometry.colors = this.colors;
this.cursor = cursor.clone();
this.geometry.vertices.push(cursor);
this.geometry.vertices.push(getCenter(anchor, cursor));
this.geometry.vertices.push(anchor.clone());
this.geometry.vertices.push(cursor.clone());
// this.geometry.computeBoundingBox();
scene.add(this.points);
}
// called first, populates scene and initializes renderer
function init() {
......@@ -132,13 +156,12 @@ function init() {
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.getElementById( 'save' ).addEventListener( 'click', save, false );
document.getElementById( 'export' ).addEventListener( 'click', save_image, false );
// document.getElementById( 'save' ).addEventListener( 'click', save, false );
// document.getElementById( 'export' ).addEventListener( 'click', save_image, false );
document.getElementById( 'move' ).addEventListener( 'click', moveMode, false );
document.getElementById( 'move2D' ).addEventListener( 'click', move2DMode, false );
document.getElementById( 'label' ).addEventListener( 'click', labelMode, false );
document.getElementById( 'file_input' ).addEventListener( 'change', upload_file, false );
document.getElementById( 'draw-box').addEventListener( 'click', drawBox, false );
}
function getMin(v1, v2) {
......@@ -160,83 +183,91 @@ function onDocumentMouseMove( event ) {
var cursor = get3DCoord();
if (cursor.x != anchor.x && cursor.y != anchor.y && cursor.z != anchor.z) {
if (newBox != null) {
scene.add( newBox );
scene.add( newBox.boxHelper );
}
if (newBox2 != null) {
// scene.add( newBox2 );
}
// var minVector = getMin(cursor, anchor);
// var maxVector = getMax(cursor, anchor);
// newBoundingBox.set(minVector, maxVector);
var axis = new THREE.Vector3( 0, 0, 1 );
var angle = camera.rotation.z;
;
newBox.cursor.x = cursor.x;
newBox.cursor.y = cursor.y;
newBox.cursor.z = cursor.z;
console.log("cursor: ", cursor);
console.log("anchor: ", newBox.anchor);
newBox.geometry.vertices[1] = newBox.cursor.clone();
var v1 = cursor.clone();
var v2 = anchor.clone();
var v2 = newBox.anchor.clone();
var v3 = cursor.clone();
var v4 = anchor.clone();
rotate(v1, v2, -angle);
// for rotation
rotate(v1, v2, angle);
console.log("v1: ", v1);
console.log("v2: ", v2);
newBox.geometry.vertices[2] = getCenter(v1, v2);
newBox.geometry.vertices[3] = v1.clone();
newBox.geometry.vertices[4] = v2.clone();
var minVector = getMin(v1, v2);
var maxVector = getMax(v1, v2);
// console.log("center: ", getCenter(getMin(anchor, cursor), getMax(anchor, cursor)));
// console.log("new center: ", getCenter(getMin(v1, v2), getMax(v1, v2)));
newBoundingBox.set(minVector, maxVector);
newBox.rotation.y = angle;
// newBox.center = getCenter(anchor, cursor);
newBox.boundingBox.set(minVector, maxVector);
// for rotation
newBox.boxHelper.rotation.y = angle;
var minVector2 = getMin(v3, v4);
var maxVector2 = getMax(v3, v4);
newBoundingBox2.set(minVector2, maxVector2);
console.log("v1: ", v1);
console.log("v2: ", v2);
console.log("v3: ", v3);
console.log("v4: ", v4);
console.log("angle: ", angle);
console.log("dist 1: ", minVector.distanceTo(maxVector));
console.log("dist 2: ", minVector2.distanceTo(maxVector2));
console.log("min 1: ", minVector);
console.log("min 2: ", minVector2);
// var geo = new THREE.Geometry();
// var colors = [new THREE.Color("blue"), new THREE.Color("red"), new THREE.Color("orange"), new THREE.Color("yellow")];
// geo.colors = colors;
// var mat = new THREE.PointsMaterial( { size: 0.5, vertexColors: THREE.VertexColors } );
// var pcloud = new THREE.Points( geo, mat );
// scene.add(pcloud);
newBox.geometry.verticesNeedUpdate = true;
// debug
// console.log("v1: ", v1);
// console.log("v2: ", v2);
// console.log("v3: ", v3);
// console.log("v4: ", v4);
// console.log("angle: ", angle);
// console.log("dist 1: ", minVector.distanceTo(maxVector));
// console.log("dist 2: ", minVector2.distanceTo(maxVector2));
// console.log("min 1: ", minVector);
// console.log("min 2: ", minVector2);
// console.log("center: ", getCenter(getMin(anchor, cursor), getMax(anchor, cursor)));
// console.log("new center: ", getCenter(getMin(v1, v2), getMax(v1, v2)));
}
}
}
function getCenter(v1, v2) {
return new THREE.Vector3((v1.x + v2.x) / 2, 0, (v1.z + v2.z) / 2);
return new THREE.Vector3((v1.x + v2.x) / 2.0, 0.0, (v1.z + v2.z) / 2.0);
}
function rotate(v1, v2, angle) {
center = getCenter(v1, v2);
v1.sub(center);
v2.sub(center);
v1.z = Math.cos(angle) * v1.z - Math.sin(angle) * v1.x;
v2.z = Math.cos(angle) * v2.z - Math.sin(angle) * v2.x;
var temp1 = v1.clone();
var temp2 = v2.clone();
v1.x = Math.cos(angle) * temp1.x - Math.sin(angle) * temp1.z;
v2.x = Math.cos(angle) * temp2.x - Math.sin(angle) * temp2.z;
v1.x = Math.sin(angle) * v1.z + Math.cos(angle) * v1.x;
v2.x = Math.sin(angle) * v2.z + Math.cos(angle) * v2.x;
v1.z = Math.sin(angle) * temp1.x + Math.cos(angle) * temp1.z;
v2.z = Math.sin(angle) * temp2.x + Math.cos(angle) * temp2.z;
v1.add(center);
v2.add(center);
}
function onDocumentMouseUp( event ) {
event.preventDefault();
mouseDown = false;
newBox = null;
// newBox = null;
newBox2 = null;
}
......@@ -251,12 +282,15 @@ function onDocumentMouseDown( event ) {
anchor.x += .000001;
anchor.y -= .000001;
anchor.z += .000001;
newBoundingBox = new THREE.Box3(anchor, v);
newBoxHelper = new THREE.Box3Helper( newBoundingBox, 0xffff00 );
anchor = anchor.clone();
newBox = new THREE.Box3Helper( newBoundingBox, 0xffff00 );
console.log(camera.rotation);
newBox = new Box(anchor, v, newBoundingBox, newBoxHelper);
// console.log(camera.rotation);
angle = camera.rotation.z;
newBoundingBox2 = new THREE.Box3(anchor.clone(), v.clone());
newBox2 = new THREE.Box3Helper( newBoundingBox2, 0xffff00 );
......@@ -338,7 +372,7 @@ function generatePointCloudForCluster() {
}
function moveMode( event ) {
console.log(camera.rotation);
// console.log(camera.rotation);
event.preventDefault();
controls.enabled = true;
move2D = false;
......@@ -357,11 +391,11 @@ function move2DMode( event ) {
document.getElementById( 'label' ).className = "";
document.getElementById( 'move2D' ).className = "selected";
if (!move2D) {
// camera.rotation.y = 0;
controls.maxPolarAngle = 0;
controls.minPolarAngle = 0;
camera.position.set(0, 100, 0);
camera.lookAt(new THREE.Vector3(0,0,0));
camera.rotation.y = 0;
controls.maxPolarAngle = 0;
controls.minPolarAngle = 0;
}
move2D = true;
}
......@@ -426,30 +460,14 @@ function load_text_file(text_file, callback_function) {
function readData(e) {
var rawLog = this.result;
// console.log(rawLog);
var floatarr = new Float32Array(rawLog)
data = floatarr;
console.log(data[0]);
// console.log(data.length);
show();
animate();
}
function drawBox() {
var boundingBox = new THREE.Box3();
boundingBox.setFromPoints(selectedPoints);
console.log(boundingBox);
console.log(selectedPoints);
var helper = new THREE.Box3Helper( boundingBox, 0xffff00 );
helper.setRotationFromEuler(camera.rotation);
boundingBoxes.push(boundingBox);
boxMap.set(boundingBox, selectedPoints);
selectedPoints = [];
scene.add( helper );
}
// https://stackoverflow.com/a/15327425/4855984
String.prototype.format = function(){
......
......@@ -23,6 +23,11 @@ nav.tools {
right:auto;
left:2em;
}
nav.tools i {
font-size: 12px;
}
nav {
position:fixed;
top:4em;
......@@ -70,4 +75,42 @@ nav a:hover {
}
nav li + li {
border-top:1px solid #444;
}
\ No newline at end of file
}
/*.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
}
.inputfile:focus + label,
.inputfile + label:hover {
background-color: red;
}*/
/*.upload {
display: inline-flex;
align-items: center;
}
i.fa-upload {
margin: 10px;
cursor: pointer;
font-size: 30px;
}
i:hover {
opacity: 0.6;
}
input {
display: none;
}*/
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment