Note: The default ITS GitLab runner is a shared resource and is subject to slowdowns during heavy usage.
You can run your own GitLab runner that is dedicated just to your group if you need to avoid processing delays.

Commit 0e0db9d9 authored by Songan Zhang's avatar Songan Zhang
Browse files

3D manually adjust height

parent 2db67b47
......@@ -29,11 +29,37 @@ function Box(anchor, cursor, angle, boundingBox, boxHelper, data) {
this.geometry.vertices.push(anchor.clone());
this.geometry.vertices.push(cursor.clone());
this.geometry.vertices.push(getCenter(anchor.clone(), cursor.clone()));
this.geometry.vertices.push(anchor.clone()); // place holder
// this.geometry.vertices.push(anchor.clone()); // place holder
var maxVector = this.geometry.vertices[0].clone();
var minVector = this.geometry.vertices[1].clone();
var topLeft = this.geometry.vertices[2].clone();
var bottomRight = this.geometry.vertices[3].clone();
var bottomCenter = this.geometry.vertices[4].clone();
// height and centerZ
[heightCar, centerZ] = getHeight(data,this.boundingBox);
this.heightCar = heightCar;
this.centerZ = centerZ;
// var lowCenter = getCenter(anchor.clone(), cursor.clone());
var highCenter = getCenter(anchor.clone(), cursor.clone());
// lowCenter.add(new THREE.Vector3(0, (this.centerZ-this.heightCar/2),0));
highCenter.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
maxVector.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
minVector.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
topLeft.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
bottomRight.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
bottomCenter.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
this.geometry.vertices[0] = maxVector.clone();
this.geometry.vertices[1] = minVector.clone();
this.geometry.vertices[2] = topLeft.clone();
this.geometry.vertices[3] = bottomRight.clone();
this.geometry.vertices[4] = bottomCenter.clone();
// this.geometry.vertices[5] = lowCenter.clone();
this.geometry.vertices[5] = highCenter.clone();
console.log(this.geometry.vertices)
this.hasPredictedLabel = false;
......@@ -61,8 +87,8 @@ function Box(anchor, cursor, angle, boundingBox, boxHelper, data) {
rotate(v1, v2, this.angle);
// calculating corner points and rotating point
var minVector = getMin(v1, v2);
var maxVector = getMax(v1, v2);
var minVector = getMin(v1, v2);
var topLeft = getTopLeft(v1, v2);
var bottomRight = getBottomRight(v1, v2);
var topCenter = getCenter(topLeft, maxVector);
......@@ -71,9 +97,18 @@ function Box(anchor, cursor, angle, boundingBox, boxHelper, data) {
[heightCar, centerZ] = getHeight(data,this.boundingBox);
this.heightCar = heightCar;
this.centerZ = centerZ;
// var lowCenter = getCenter(maxVector.clone(), minVector.clone());
var highCenter = getCenter(maxVector.clone(), minVector.clone());
// lowCenter.add(new THREE.Vector3(0, (this.centerZ-this.heightCar/2),0));
highCenter.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
maxVector.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
minVector.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
topLeft.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
bottomRight.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
bottomCenter.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
// need to do this to make matrix invertible
maxVector.y = 0.00001;
maxVector.y += 0.00001;
// setting bounding box limits
this.boundingBox.set(minVector.clone(), maxVector.clone());
......@@ -82,7 +117,79 @@ function Box(anchor, cursor, angle, boundingBox, boxHelper, data) {
this.boxHelper.rotation.y = this.angle;
// setting y coordinate back to zero since we are done with drawing
// maxVector.y = 0;
// rotate back the corner points
rotate(minVector, maxVector, -this.angle);
rotate(topLeft, bottomRight, -this.angle);
rotate(topCenter, bottomCenter, -this.angle);
// set updated corner points used to resize box
this.geometry.vertices[0] = maxVector.clone();
this.geometry.vertices[1] = minVector.clone();
this.geometry.vertices[2] = topLeft.clone();
this.geometry.vertices[3] = bottomRight.clone();
this.geometry.vertices[4] = bottomCenter.clone();
// this.geometry.vertices[5] = lowCenter.clone();
this.geometry.vertices[5] = highCenter.clone();
// tell scene to update corner points
this.geometry.verticesNeedUpdate = true;
}
}
// method to reheight the 3D bounding box manually, only under 3D mode
this.reheight = function (mouse) {
if (mouse.z != this.anchor.y) {
// console.log(mouse.z);
// var v1 = cursor.clone();
// var v2 = this.anchor.clone();
//
// v1.y = 0;
// v2.y = 0;
//
// // rotate cursor and anchor
// rotate(v1, v2, this.angle);
// calculating corner points and rotating point
var maxVector = this.geometry.vertices[0].clone();
maxVector.y = 0;
var minVector = this.geometry.vertices[1].clone();
minVector.y = 0;
var topLeft = this.geometry.vertices[2].clone();
topLeft.y = 0;
var bottomRight = this.geometry.vertices[3].clone();
bottomRight.y = 0;
var topCenter = getCenter(maxVector, topLeft);
var bottomCenter = this.geometry.vertices[4].clone();
bottomCenter.y = 0;
var bottom = this.centerZ - this.heightCar/2;
var top = mouse.clone().z;
this.heightCar = top-bottom;
this.centerZ = (top+bottom)/2;
// var lowCenter = getCenter(maxVector.clone(), minVector.clone());
var highCenter = getCenter(maxVector.clone(), minVector.clone());
// lowCenter.add(new THREE.Vector3(0, (this.centerZ-this.heightCar/2),0));
highCenter.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
maxVector.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
minVector.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
topLeft.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
bottomRight.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
bottomCenter.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
// need to do this to make matrix invertible
maxVector.y += 0.00001;
// setting bounding box limits
this.boundingBox.set(minVector.clone(), maxVector.clone());
// rotate BoxHelper back
this.boxHelper.rotation.y = this.angle;
// setting y coordinate back to zero since we are done with drawing
// maxVector.y = 0;
// rotate back the corner points
rotate(minVector, maxVector, -this.angle);
......@@ -95,6 +202,11 @@ function Box(anchor, cursor, angle, boundingBox, boxHelper, data) {
this.geometry.vertices[2] = topLeft.clone();
this.geometry.vertices[3] = bottomRight.clone();
this.geometry.vertices[4] = bottomCenter.clone();
// this.geometry.vertices[5] = lowCenter.clone();
this.geometry.vertices[5] = highCenter.clone();
this.boundingBox.max.y = this.centerZ + this.heightCar/2;
this.boundingBox.min.y = this.centerZ - this.heightCar/2;
// tell scene to update corner points
this.geometry.verticesNeedUpdate = true;
......@@ -106,11 +218,16 @@ function Box(anchor, cursor, angle, boundingBox, boxHelper, data) {
this.rotate = function(cursor) {
// get corner points
var maxVector = this.geometry.vertices[0].clone();
maxVector.y = 0;
var minVector = this.geometry.vertices[1].clone();
minVector.y = 0;
var topLeft = this.geometry.vertices[2].clone();
topLeft.y = 0;
var bottomRight = this.geometry.vertices[3].clone();
bottomRight.y = 0;
var topCenter = getCenter(maxVector, topLeft);
var bottomCenter = this.geometry.vertices[4].clone();
bottomCenter.y = 0;
// get relative angle of cursor with respect to
var center = getCenter(maxVector, minVector);
......@@ -119,6 +236,15 @@ function Box(anchor, cursor, angle, boundingBox, boxHelper, data) {
[heightCar, centerZ] = getHeight(data,this.boundingBox);
this.heightCar = heightCar;
this.centerZ = centerZ;
// var lowCenter = getCenter(maxVector.clone(), minVector.clone());
var highCenter = getCenter(maxVector.clone(), minVector.clone());
// lowCenter.add(new THREE.Vector3(0, (this.centerZ-this.heightCar/2),0));
highCenter.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
maxVector.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
minVector.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
topLeft.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
bottomRight.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
bottomCenter.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
// update angle of Box and bounding box
this.angle = this.angle + angle;
......@@ -134,6 +260,8 @@ function Box(anchor, cursor, angle, boundingBox, boxHelper, data) {
this.geometry.vertices[2] = topLeft.clone();
this.geometry.vertices[3] = bottomRight.clone();
this.geometry.vertices[4] = bottomCenter.clone();
// this.geometry.vertices[5] = lowCenter.clone();
this.geometry.vertices[5] = highCenter.clone();
// tell scene to update corner points
this.geometry.verticesNeedUpdate = true;
......@@ -159,11 +287,16 @@ function Box(anchor, cursor, angle, boundingBox, boxHelper, data) {
// shift bounding box given new corner points
var maxVector = this.geometry.vertices[0].clone();
maxVector.y = 0;
var minVector = this.geometry.vertices[1].clone();
minVector.y = 0;
var topLeft = this.geometry.vertices[2].clone();
topLeft.y = 0;
var bottomRight = this.geometry.vertices[3].clone();
bottomRight.y = 0;
var topCenter = getCenter(maxVector, topLeft);
var bottomCenter = this.geometry.vertices[4].clone();
bottomCenter.y = 0;
rotate(maxVector, minVector, this.angle);
rotate(topLeft, bottomRight, this.angle);
......@@ -173,8 +306,24 @@ function Box(anchor, cursor, angle, boundingBox, boxHelper, data) {
[heightCar, centerZ] = getHeight(data,this.boundingBox);
this.heightCar = heightCar;
this.centerZ = centerZ;
// var lowCenter = getCenter(maxVector.clone(), minVector.clone());
var highCenter = getCenter(maxVector.clone(), minVector.clone());
// lowCenter.add(new THREE.Vector3(0, (this.centerZ-this.heightCar/2),0));
highCenter.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
maxVector.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
minVector.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
topLeft.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
bottomRight.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
bottomCenter.add(new THREE.Vector3(0, (this.centerZ+this.heightCar/2),0));
this.geometry.vertices[0] = maxVector.clone();
this.geometry.vertices[1] = minVector.clone();
this.geometry.vertices[2] = topLeft.clone();
this.geometry.vertices[3] = bottomRight.clone();
this.geometry.vertices[4] = bottomCenter.clone();
// this.geometry.vertices[5] = lowCenter.clone();
this.geometry.vertices[5] = highCenter.clone();
// need to do this to make matrix invertible
maxVector.y += 0.0000001;
maxVector.y += 0.00001;
this.boundingBox.set(minVector, maxVector);
......@@ -315,11 +464,14 @@ function getHeight(data, boundingBox) {
var x_point = 0;
var y_point = 0;
var l = data.length/4;
var boxMaxVector = new THREE.Vector2(boundingBox.max.x, boundingBox.max.z);
var boxMinVector = new THREE.Vector2(boundingBox.min.x, boundingBox.min.z);
// console.log(boxMaxVector);
var box2D = new THREE.Box2(boxMinVector, boxMaxVector);
for ( var i = 0; i < l; i ++ ) {
x_point = data[ stride * i ];
y_point = data[ stride * i + 1];
if (boundingBox.distanceToPoint(
new THREE.Vector3(y_point,0.000001, x_point)) == 0 ) {
if (box2D.distanceToPoint( new THREE.Vector2(y_point, x_point)) == 0 ) {
zs.push(data[ stride * i + 2]);
xs.push(data[ stride * i]);
ys.push(data[ stride * i + 1]);
......
......@@ -23,15 +23,18 @@ var currentPosition = new THREE.Vector3();
var boxgeometry = new THREE.BoxGeometry( 1, 1, 1 );
var boxmaterial = new THREE.MeshDepthMaterial( {opacity: .1} );
var move2D = false;
var mode3D = false;
var selectedBox;
var angle;
var hoverIdx, hoverBox;
var resizeBox, rotatingBox;
var resizeBox, rotatingBox, reheightBox;
var dispPlane;
var isResizing = false;
var isMoving = false;
var isRotating = false;
var isReHeighting = false;
var grid;
var pointMaterial = new THREE.PointsMaterial( { size: pointSize * 4, sizeAttenuation: false, vertexColors: THREE.VertexColors } );
var pointMaterial = new THREE.PointsMaterial( { size: pointSize * 5, sizeAttenuation: false, vertexColors: THREE.VertexColors } );
var evaluator;
var yCoords = [];
......@@ -297,6 +300,10 @@ function toggleControl(b) {
controls.enabled = b;
controls.update();
}
if (mode3D) {
controls.enabled = b;
controls.update();
}
}
}
......@@ -357,47 +364,79 @@ function onDocumentMouseMove( event ) {
event.preventDefault();
if (isRecording) {
if (mouseDown == true) {
var cursor = get3DCoord();
if (isRotating) {
if (move2D) {
var cursor = get3DCoord();
rotatingBox.rotate(cursor);
if (isRotating) {
} else if (isResizing) {
rotatingBox.rotate(cursor);
// cursor's y coordinate nudged to make bounding box matrix invertible
cursor.y -= 0.00001;
} else if (isResizing) {
resizeBox.resize(cursor);
// cursor's y coordinate nudged to make bounding box matrix invertible
cursor.y -= 0.00001;
} else if (isMoving) {
resizeBox.resize(cursor);
selectedBox.translate(cursor);
// selectedBox.changeBoundingBoxColor(new THREE.Color( 0,0,7 ));
selectedBox.changeBoundingBoxColor(selected_color.clone());
} else {
} else if (isMoving) {
// if we are initoally drawing a new bounding box,
// we would like to add it to the scene
if (newBox != null && !newBox.added) {
scene.add(newBox.points);
scene.add( newBox.boxHelper );
newBox.added = true;
selectedBox.translate(cursor);
// selectedBox.changeBoundingBoxColor(new THREE.Color( 0,0,7 ));
selectedBox.changeBoundingBoxColor(selected_color.clone());
} else {
// if we are initoally drawing a new bounding box,
// we would like to add it to the scene
if (newBox != null && !newBox.added) {
scene.add(newBox.points);
scene.add(newBox.boxHelper);
newBox.added = true;
}
newBox.resize(cursor);
}
}
else if (mode3D) {
if (isReHeighting) {
var mouse = get3DIntersectPlane();
// console.log(cursor);
reheightBox.reheight(mouse);
}
newBox.resize(cursor);
}
}
var cursor = getCurrentPosition();
if (!controls.enabled) {
// highlights all hover boxes that intersect with cursor
updateHoverBoxes(cursor);
if (move2D) {
var cursor = getCurrentPosition();
if (!controls.enabled) {
// highlights all hover boxes that intersect with cursor
updateHoverBoxes(cursor);
// highlights closest corner point that intersects with cursor
highlightCorners();
}
// highlights closest corner point that intersects with cursor
highlightCorners();
}
}
else if (mode3D) {
var intersect = get3DIntersect();
if (!controls.enabled) {
if (intersect.intersect != null) {
// console.log(intersect);
// intersect.idx is box index
if (hoverBox != null && hoverIdx != null) {
hoverBox.changePointColor(hoverIdx, new THREE.Color(0xff0000));
}
hoverBox = boundingBoxes[intersect.idx];
// point index:
hoverIdx = intersect.intersect.index;
hoverBox.changePointColor(hoverIdx, new THREE.Color(0x00ff33));
} else {
if (hoverBox) {
// hoverBox.changePointColor(hoverIdx, new THREE.Color(7, 0, 0));
hoverBox.changePointColor(hoverIdx, new THREE.Color(0xff0000));
}
hoverBox = null;
}
}
}
}
}
......@@ -466,11 +505,18 @@ function onDocumentMouseUp( event ) {
evaluator.increment_rotate_count();
predictBox = rotatingBox;
}
if (isReHeighting) {
evaluator.increment_resize_count();
predictBox = reheightBox;
scene.remove(dispPlane);
dispPlane = null;
}
if (predictBox) {
predictLabel(predictBox);
}
isResizing = false;
isRotating = false;
isReHeighting = false;
// if (isMoving) {
// changeBoundingBoxColor(hoverBoxes[0], new THREE.Color( 7,0,0 ));
// }
......@@ -493,45 +539,71 @@ function onDocumentMouseDown( event ) {
if (isRecording) {
if (!controls.enabled) {
mouseDown = true;
anchor = get3DCoord();
var intersection = intersectWithCorner();
// console.log("intersection: ", intersection);
// update hover box
if (selectedBox && (hoverBoxes.length == 0 || hoverBoxes[0] != selectedBox)) {
selectedBox.changeBoundingBoxColor(0xffff00);
selectedBox = null;
isMoving = false;
if (mode3D) {
var intersect = get3DIntersect();
if (selectedBox && (hoverBoxes.length == 0 || hoverBoxes[0] != selectedBox)) {
selectedBox.changeBoundingBoxColor(0xffff00);
selectedBox = null;
isMoving = false;
}
if (intersect.intersect != null) {
var box = boundingBoxes[intersect.idx];
var closestIdx = intersect.intersect.index;
console.log("closestIdx",closestIdx);
// console.log("box.geometry.vertices", box.geometry.vertices);
// console.log("anchor", anchor);
// 5th node is for reheighting
if (closestIdx == 5) {
isReHeighting = true;
reheightBox = box;
reheightBox.anchor = reheightBox.geometry.vertices[getOppositeCorner(closestIdx)].clone();
console.log("reheightBox.anchor",reheightBox.anchor);
dispPlane = get3DVerticalCoord(reheightBox);
}
}
}
else if (move2D) {
anchor = get3DCoord();
var intersection = intersectWithCorner();
// console.log("intersection: ", intersection);
// update hover box
if (selectedBox && (hoverBoxes.length == 0 || hoverBoxes[0] != selectedBox)) {
selectedBox.changeBoundingBoxColor(0xffff00);
selectedBox = null;
isMoving = false;
}
if (intersection != null) {
var box = intersection[0];
var closestIdx = closestPoint(anchor, box.geometry.vertices);
// console.log("closest: ", closestIdx);
// 4th node is for rotation
if (closestIdx == 4) {
isRotating = true;
rotatingBox = box;
} else {
isResizing = true;
resizeBox = box;
resizeBox.anchor = resizeBox.geometry.vertices[getOppositeCorner(closestIdx)].clone();
}
} else if (hoverBoxes.length == 1) {
isMoving = true;
hoverBoxes[0].select(get3DCoord());
selectRow(selectedBox.id);
if (intersection != null) {
var box = intersection[0];
var closestIdx = closestPoint(anchor, box.geometry.vertices);
// console.log("closest: ", closestIdx);
// 4th node is for rotation
if (closestIdx == 4) {
isRotating = true;
rotatingBox = box;
} else {
isResizing = true;
resizeBox = box;
resizeBox.anchor = resizeBox.geometry.vertices[getOppositeCorner(closestIdx)].clone();
angle = camera.rotation.z;
var v = anchor.clone();
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 Box(anchor, v, angle, newBoundingBox, newBoxHelper, data);
}
} else if (hoverBoxes.length == 1) {
isMoving = true;
hoverBoxes[0].select(get3DCoord());
selectRow(selectedBox.id);
} else {
angle = camera.rotation.z;
var v = anchor.clone();
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 Box(anchor, v, angle, newBoundingBox, newBoxHelper, data);
}
}
}
......@@ -657,6 +729,7 @@ function moveMode( event ) {
// console.log(box);
}
move2D = false;
mode3D = true;
}
}
......@@ -680,6 +753,7 @@ function select2DMode() {
controls.enabled = true;
controls.update();
move2D = true;
mode3D = false;
}
function move2DMode( event ) {
......@@ -709,6 +783,7 @@ function move2DMode( event ) {
controls.enabled = true;
controls.update();
move2D = true;
mode3D = false;
}
}
......
......@@ -47,6 +47,79 @@ function get3DCoord() {
return pos;
}
function get3DVerticalCoord(box) {
var a = box.geometry.vertices[5];
var b = box.geometry.vertices[4];
var centroid = box.geometry.vertices[5];
var dir = new THREE.Vector3(a.x-b.x,a.y-b.y,a.z-b.z);
var plane = new THREE.Plane();
plane.setFromNormalAndCoplanarPoint(dir, centroid).normalize();
// Create a basic rectangle geometry
var planeGeometry = new THREE.PlaneGeometry(15, 15);
// Align the geometry to the plane
var coplanarPoint = plane.coplanarPoint();
// console.log("coplanerPoint", coplanarPoint);
var focalPoint = new THREE.Vector3().copy(coplanarPoint).add(plane.normal);
planeGeometry.lookAt(focalPoint);
// planeGeometry.translate(coplanarPoint.x, coplanarPoint.y, coplanarPoint.z);
// Create mesh with the geometry
var planeMaterial = new THREE.MeshBasicMaterial({color:0x00ff33,
side: THREE.DoubleSide, transparent: true, opacity: 0});
var dispPlane = new THREE.Mesh(planeGeometry, planeMaterial);
dispPlane.position.set(a.x, a.y, a.z);
scene.add(dispPlane);
return dispPlane;
}
// 3D intersection to plane using for reheight
function get3DIntersectPlane() {
var mouse = new THREE.Vector3();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObject(dispPlane);
// console.log("intersects", intersects);
mouse.z = intersects[0].point.y;
return mouse;