From 240fc1fa0a2f12732f3c437973a0bff2dbb62b9e Mon Sep 17 00:00:00 2001
From: Kevin Lee <kevin@infinite-lee.com>
Date: Fri, 6 Jul 2018 15:34:08 -0700
Subject: [PATCH] fixes
---
src/components/tools/networked-drawing.js | 173 +++++++++++++---------
src/components/tools/pen.js | 5 +-
2 files changed, 101 insertions(+), 77 deletions(-)
diff --git a/src/components/tools/networked-drawing.js b/src/components/tools/networked-drawing.js
index f3595703f..e754dd74b 100644
--- a/src/components/tools/networked-drawing.js
+++ b/src/components/tools/networked-drawing.js
@@ -10,7 +10,7 @@ AFRAME.registerComponent("networked-drawing", {
schema: {
drawBuffer: { default: [] },
segments: { default: 8 },
- radius: { default: 0.2 },
+ radius: { default: 0.02 },
color: { default: { r: 255, g: 0, b: 0 } }
},
@@ -20,7 +20,7 @@ AFRAME.registerComponent("networked-drawing", {
roughness: 0.25,
metalness: 0.75,
vertexColors: THREE.VertexColors,
- side: THREE.FrontSide,
+ side: THREE.DoubleSide,
emissive: 0xff0000
};
@@ -52,6 +52,9 @@ AFRAME.registerComponent("networked-drawing", {
NAF.utils.getNetworkedEntity(this.el).then(networkedEl => {
this.networkedEl = networkedEl;
});
+
+ this.debugGeometry = new THREE.SphereGeometry(0.02, 16, 16);
+ this.debugMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
},
tick: (() => {
@@ -73,9 +76,7 @@ AFRAME.registerComponent("networked-drawing", {
this.draw(position, direction, normal);
}
} else if (this.data.drawBuffer.length > this.bufferIndex) {
- if (this.lineStarted) {
- this.endDraw(position, direction, normal);
- }
+ this.endDraw(position, direction, normal);
this.bufferIndex++;
}
} else if (this.data.drawBuffer.length > 0) {
@@ -97,65 +98,40 @@ AFRAME.registerComponent("networked-drawing", {
return this.lastPoint;
},
- //todo: if it is determined that a single point is trying to be drawn, just draw a point (sphere?)
- //todo: draw sphere as multiple increasingly small segment rings
-
- draw: (() => {
- return function(position, direction, normal) {
- if (!this.lineStarted) {
- this.addSegments(this.lastSegments, position, direction, normal);
- if (this.initialized) {
- this.addVertex(this.lastSegments[0]);
- }
- this.drawCap(this.lastPoint, this.lastSegments);
- this.lineStarted = true;
- } else {
- this.addSegments(this.currentSegments, position, direction, normal);
-
- //draw the triangle strip
- for (let i = 0; i != this.data.segments + 1; i++) {
- const lastSegment = this.lastSegments[i % this.data.segments];
- const currentSegment = this.currentSegments[i % this.data.segments];
- this.addVertex(lastSegment);
- this.addVertex(currentSegment);
- }
- this.sharedBuffer.restartPrimitive();
- this.addVertex(this.currentSegments[0]);
-
- //update the drawing
- this.sharedBuffer.update();
-
- //copy the currentSegments to lastSegments
- for (var j = 0; j < this.data.segments; j++) {
- this.lastSegments[j].copy(this.currentSegments[j]);
- }
+ draw(position, direction, normal) {
+ if (!this.lineStarted) {
+ this.addSegments(this.lastSegments, position, direction, normal, this.data.radius);
+ if (this.initialized) {
+ this.addVertex(this.lastSegments[0]); //discarded
}
+ this.drawCap(this.lastPoint, this.lastSegments);
+ this.lineStarted = true;
+ } else {
+ this.addSegments(this.currentSegments, position, direction, normal, this.data.radius);
+ this.drawCylinder();
+ }
+ this.lastPoint.copy(position);
+ this.addToDrawBuffer(position, direction, normal);
+ },
- this.lastPoint.copy(position);
-
- this.addToDrawBuffer(position, direction, normal);
- };
- })(),
-
- startDraw: (() => {
- return function(position, direction, normal) {
- this.lastPoint.copy(position);
- this.addToDrawBuffer(position, direction, normal);
- };
- })(),
+ startDraw(position, direction, normal) {
+ this.lastPoint.copy(position);
+ this.addToDrawBuffer(position, direction, normal);
+ },
endDraw: (() => {
const projectedDirection = new THREE.Vector3();
- const endPoint = new THREE.Vector3();
+ const projectedPoint = new THREE.Vector3();
return function(position, direction, normal) {
- //add the final point and cap
- this.draw(position, direction, normal);
- projectedDirection.copy(direction).multiplyScalar(this.data.radius);
- endPoint.copy(position).add(projectedDirection);
- this.drawCap(endPoint, this.currentSegments);
-
- //reset
- this.sharedBuffer.restartPrimitive();
+ if (!this.lineStarted) {
+ this.drawPoint(position);
+ } else {
+ this.draw(position, direction, normal);
+ projectedDirection.copy(direction).multiplyScalar(this.data.radius);
+ projectedPoint.copy(position).add(projectedDirection);
+ this.drawCap(projectedPoint, this.lastSegments);
+ }
+
if (this.networkedEl && NAF.utils.isMine(this.networkedEl)) {
this.data.drawBuffer.push(null);
}
@@ -177,37 +153,86 @@ AFRAME.registerComponent("networked-drawing", {
}
},
- //add a "cap" to the start or end of a drawing
- //TODO: fix this algorithm
+ //draw a cylinder from last to current segments
+ drawCylinder() {
+ this.addVertex(this.lastSegments[0]); //discarded
+ for (let i = 0; i != this.data.segments + 1; i++) {
+ this.addVertex(this.lastSegments[i % this.data.segments]);
+ this.addVertex(this.currentSegments[i % this.data.segments]);
+ }
+
+ this.sharedBuffer.restartPrimitive();
+
+ this.sharedBuffer.update();
+
+ for (var j = 0; j < this.data.segments; j++) {
+ this.lastSegments[j].copy(this.currentSegments[j]);
+ }
+ },
+
+ //draw a standalone point in space
+ drawPoint: (() => {
+ const up = new THREE.Vector3(0, 1, 0);
+ const down = new THREE.Vector3(0, -1, 0);
+ const left = new THREE.Vector3(1, 0, 0);
+ const projectedDirection = new THREE.Vector3();
+ const projectedPoint = new THREE.Vector3();
+ return function(position) {
+ projectedDirection.copy(up).multiplyScalar(this.data.radius * 0.5);
+ projectedPoint.copy(position).add(projectedDirection);
+ this.addSegments(this.lastSegments, projectedPoint, up, left, this.data.radius * 0.5);
+ if (this.initialized) {
+ this.addVertex(this.lastSegments[0]); //discarded
+ }
+ projectedDirection.copy(up).multiplyScalar(this.data.radius * 0.75);
+ projectedPoint.copy(position).add(projectedDirection);
+ this.drawCap(projectedPoint, this.lastSegments);
+ this.addVertex(this.lastSegments[0]); //discared
+ this.addSegments(this.currentSegments, position, up, left, this.data.radius * 0.75);
+ this.drawCylinder();
+ projectedDirection.copy(down).multiplyScalar(this.data.radius * 0.5);
+ projectedPoint.copy(position).add(projectedDirection);
+ this.addSegments(this.currentSegments, projectedPoint, up, left, this.data.radius * 0.5);
+ this.drawCylinder();
+ projectedDirection.copy(down).multiplyScalar(this.data.radius * 0.75);
+ projectedPoint.copy(position).add(projectedDirection);
+ this.drawCap(projectedPoint, this.lastSegments);
+ };
+ })(),
+
+ //draw a cap to start/end a line
drawCap(point, segments) {
- let j = 0;
- for (let i = 0; i < this.data.segments * 2 - 2; i++) {
- if ((i - 1) % 3 === 0) {
+ let segmentIndex = 0;
+ for (let i = 0; i < this.data.segments + 4; i++) {
+ if ((i - 1) % 4 === 0) {
this.addVertex(point);
} else {
- this.addVertex(segments[j % this.data.segments]);
- j++;
+ this.addVertex(segments[segmentIndex % this.data.segments]);
+ segmentIndex++;
}
}
+ this.sharedBuffer.restartPrimitive();
this.sharedBuffer.update();
},
+ addVertex(point) {
+ this.initialized = true;
+ this.sharedBuffer.addVertex(point.x, point.y, point.z);
+ this.sharedBuffer.addColor(this.data.color.r, this.data.color.g, this.data.color.b);
+ // const sphere = new THREE.Mesh(this.debugGeometry, this.debugMaterial);
+ // this.scene.add(sphere);
+ // sphere.position.copy(point);
+ },
+
//calculate the segments for a given point
- addSegments(segmentsList, point, forward, up) {
+ addSegments(segmentsList, point, forward, up, radius) {
const angleIncrement = Math.PI * 2 / this.data.segments;
for (let i = 0; i < this.data.segments; i++) {
const segment = segmentsList[i];
-
- this.rotatePointAroundAxis(segment, point, forward, up, angleIncrement * i, this.data.radius);
+ this.rotatePointAroundAxis(segment, point, forward, up, angleIncrement * i, radius);
}
},
- addVertex(point, normal) {
- this.initialized = true;
- this.sharedBuffer.addVertex(point.x, point.y, point.z);
- this.sharedBuffer.addColor(this.data.color.r, this.data.color.g, this.data.color.b);
- },
-
rotatePointAroundAxis: (() => {
const calculatedDirection = new THREE.Vector3();
return function(out, point, axis, up, angle, radius) {
diff --git a/src/components/tools/pen.js b/src/components/tools/pen.js
index c241b6d22..742f0b3e4 100644
--- a/src/components/tools/pen.js
+++ b/src/components/tools/pen.js
@@ -9,7 +9,7 @@ function almostEquals(epsilon, u, v) {
AFRAME.registerComponent("pen", {
schema: {
- drawFrequency: { default: 100 },
+ drawFrequency: { default: 20 },
minDistanceBetweenPoints: { default: 0.04 },
defaultDirection: { default: { x: 1, y: 0, z: 0 } },
camera: { type: "selector" },
@@ -65,7 +65,7 @@ AFRAME.registerComponent("pen", {
this.el.object3D.getWorldPosition(this.worldPosition);
const drawing = this.currentDrawing;
- if (almostEquals(0.005, this.worldPosition, this.lastPosition)) {
+ if (!almostEquals(0.005, this.worldPosition, this.lastPosition)) {
this.direction.subVectors(this.worldPosition, this.lastPosition).normalize();
this.lastPosition.copy(this.worldPosition);
}
@@ -88,7 +88,6 @@ AFRAME.registerComponent("pen", {
getNormal: (() => {
const directionToCamera = new THREE.Vector3();
const worldQuaternion = new THREE.Quaternion();
- const temp = new THREE.Vector3();
return function(normal, position, direction) {
if (this.data.camera) {
directionToCamera.subVectors(position, this.data.camera.object3D.position).normalize();
--
GitLab