difficulty merging
howard
parent
636f8bc560
commit
f46e0790f3
|
|
@ -10,8 +10,7 @@ import { setCoincident, setOrdinate } from './constraintEvents'
|
|||
import { get3PtArc } from './drawArc'
|
||||
import { replacer, reviver } from './utils'
|
||||
import { AxesHelper } from './sketchAxes'
|
||||
import { drawDimension, _onMoveDimension, setDimLines, updateDim, drawAngle } from './drawDimension';
|
||||
import { updateAng } from './drawAngle';
|
||||
import { drawDimension, _onMoveDimension, setDimLines, updateDim } from './drawDimension';
|
||||
|
||||
|
||||
|
||||
|
|
@ -129,13 +128,9 @@ class Sketch {
|
|||
this.drawOnClick2 = drawOnClick2.bind(this);
|
||||
|
||||
this.drawDimension = drawDimension.bind(this)
|
||||
this.drawAngle = drawAngle.bind(this)
|
||||
this._onMoveDimension = _onMoveDimension.bind(this)
|
||||
// this._onMoveAngle = _onMoveAngle.bind(this)
|
||||
this.setDimLines = setDimLines.bind(this)
|
||||
// this.setAngLines = setAngLines.bind(this)
|
||||
this.updateDim = updateDim.bind(this)
|
||||
this.updateAng = updateAng.bind(this)
|
||||
|
||||
this.awaitSelection = awaitSelection.bind(this);
|
||||
|
||||
|
|
|
|||
299
src/drawAngle.js
299
src/drawAngle.js
|
|
@ -1,299 +0,0 @@
|
|||
import * as THREE from '../node_modules/three/src/Three';
|
||||
import { color } from './shared'
|
||||
|
||||
const lineMaterial = new THREE.LineBasicMaterial({
|
||||
linewidth: 2,
|
||||
color: color.dimension,
|
||||
})
|
||||
|
||||
|
||||
const pointMaterial = new THREE.PointsMaterial({
|
||||
color: color.dimension,
|
||||
size: 4,
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const divisions = 12
|
||||
|
||||
|
||||
|
||||
export function updateAng(c_id) {
|
||||
return (ev_focus) => {
|
||||
let value = ev_focus.target.textContent
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key == 'Enter') {
|
||||
e.preventDefault()
|
||||
const ent = this.constraints.get(c_id)
|
||||
ent[1] = parseFloat(ev_focus.target.textContent)
|
||||
value = ent[1]
|
||||
this.constraints.set(c_id, ent)
|
||||
this.updateOtherBuffers()
|
||||
this.solve()
|
||||
sc.render()
|
||||
ev_focus.target.blur()
|
||||
this.updateBoundingSpheres()
|
||||
} else if (e.key == 'Escape') {
|
||||
ev_focus.target.textContent = value
|
||||
getSelection().empty()
|
||||
ev_focus.target.blur()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// let ids, _l1, _l2
|
||||
// export function _onMoveAngle(point, line) {
|
||||
|
||||
// ids = line.userData.ids
|
||||
|
||||
// _l1 = this.obj3d.children[this.objIdx.get(ids[0])].geometry.attributes.position.array
|
||||
// _l2 = this.obj3d.children[this.objIdx.get(ids[1])].geometry.attributes.position.array
|
||||
|
||||
// let loc;
|
||||
|
||||
// return (e) => {
|
||||
// loc = this.getLocation(e)
|
||||
|
||||
// p3.set(loc.x, loc.y)
|
||||
|
||||
// update(
|
||||
// line.geometry.attributes.position,
|
||||
// point.geometry.attributes.position,
|
||||
// _l1, _l2
|
||||
// )
|
||||
|
||||
// // point.userData.offset = tagOffset.toArray() // save offset vector from center
|
||||
// // point.userData.offset = tagOffset // save offset vector from center
|
||||
// // tagOffset = undefined
|
||||
|
||||
// sc.render()
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// export function setAngLines() {
|
||||
|
||||
// const restoreLabels = this.labelContainer.childElementCount == 0;
|
||||
|
||||
// const dims = this.obj3d.children[1].children
|
||||
|
||||
// let point, dist;
|
||||
// for (let i = 0; i < dims.length; i += 2) {
|
||||
// // if (restoreLabels) {
|
||||
// // point = dims[i + 1] // point node is at i+1
|
||||
// // dist = this.constraints.get(point.name)[1]
|
||||
// // point.label = document.createElement('div');
|
||||
// // point.label.textContent = dist.toFixed(3);
|
||||
// // point.label.contentEditable = true;
|
||||
// // this.labelContainer.append(point.label)
|
||||
|
||||
// // point.label.addEventListener('focus', this.updateAng(this.c_id))
|
||||
// // }
|
||||
|
||||
// ids = dims[i].userData.ids
|
||||
|
||||
// _l1 = this.obj3d.children[this.objIdx.get(ids[0])].geometry.attributes.position.array
|
||||
// _l2 = this.obj3d.children[this.objIdx.get(ids[1])].geometry.attributes.position.array
|
||||
|
||||
|
||||
// tagOffset = dims[i + 1].userData.offset
|
||||
// p3.set(_l1[0] + tagOffset[0], _l1[1] + tagOffset[1])
|
||||
|
||||
|
||||
// update(
|
||||
// dims[i].geometry.attributes.position,
|
||||
// dims[i + 1].geometry.attributes.position,
|
||||
// _l1,
|
||||
// _l2
|
||||
// )
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
|
||||
|
||||
export function findIntersection(q, s, p, r) {
|
||||
/*
|
||||
Based on: https://stackoverflow.com/questions/563198/
|
||||
|
||||
q+s p+r
|
||||
\/__________ q+u*s
|
||||
/\
|
||||
/ \
|
||||
p q
|
||||
|
||||
u = (q − p) × r / (r × s)
|
||||
when r × s = 0, the lines are either colinear or parallel
|
||||
|
||||
function returns u
|
||||
for "real" intersection to exist, 0<u<1
|
||||
*/
|
||||
const q_minus_p = q.clone().sub(p);
|
||||
const r_cross_s = r.cross(s);
|
||||
if (r_cross_s === 0) return null; //either colinear or parallel
|
||||
return q_minus_p.cross(r) / r_cross_s;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
_l2:[x0,y0,z0,x1,y1,z1]
|
||||
/
|
||||
p3:tag-""/-.
|
||||
tagOffset[1]-->| \
|
||||
|__ . _|__ _l1:[x0,y0,z0,x1,y1,z1]
|
||||
tagOffset[0]----^ ^--center
|
||||
|
||||
vecArr = [
|
||||
0: _l1 origin
|
||||
1: _l1 disp
|
||||
2: _l2 origin
|
||||
3: _l2 disp
|
||||
4: center
|
||||
5: tag offset from center
|
||||
]
|
||||
*/
|
||||
|
||||
const vecArr = Array(6)
|
||||
for (var i = 0; i < vecArr.length; i++) vecArr[i] = new THREE.Vector2();
|
||||
const a = Array(3)
|
||||
const p3 = new THREE.Vector2()
|
||||
let tagOffset
|
||||
|
||||
const getAngle = (Obj3dLines) => {
|
||||
for (let i = 0; i < 2; i++) {
|
||||
const arr = Obj3dLines[i].geometry.attributes.position.array
|
||||
vecArr[2 * i].set(...arr.slice(0, 2))
|
||||
vecArr[2 * i + 1].set(arr[3] - arr[0], arr[4] - arr[1])
|
||||
}
|
||||
const a1 = Math.atan2(vecArr[1].y, vecArr[1].x)
|
||||
const a2 = Math.atan2(vecArr[3].y, vecArr[3].x)
|
||||
|
||||
let deltaAngle = Math.abs(a2 - a1)
|
||||
if (deltaAngle > Math.PI) {
|
||||
deltaAngle = Math.PI * 2 - deltaAngle
|
||||
}
|
||||
return deltaAngle / Math.PI * 180
|
||||
}
|
||||
|
||||
// function update(linegeom, pointgeom, _l1, _l2) {
|
||||
|
||||
// let i = 0;
|
||||
// for (; i < 4;) {
|
||||
// const arr = i == 0 ? _l1 : _l2
|
||||
// vecArr[i++].set(arr[0], arr[1])
|
||||
// vecArr[i++].set(arr[3] - arr[0], arr[4] - arr[1])
|
||||
// }
|
||||
|
||||
// const centerScalar = findIntersection(...vecArr.slice(0, 4))
|
||||
// const center = vecArr[4].addVectors(vecArr[0], vecArr[1].clone().multiplyScalar(centerScalar))
|
||||
|
||||
// // if (tagOffset === undefined) {
|
||||
// // vecArr[5].subVectors(p3, center)
|
||||
// // } else {
|
||||
// // p3.set(center.x + tagOffset[0], center.y + tagOffset[1])
|
||||
// // }
|
||||
// vecArr[5].subVectors(p3, center)
|
||||
|
||||
// const tagRadius = vecArr[5].length()
|
||||
|
||||
// /*
|
||||
// if tag is more than 90 deg away from midline, we shift everything by 180
|
||||
|
||||
// a: array that describes absolute angular position of angle start, angle end, and tag
|
||||
|
||||
// a[2]:
|
||||
// tag a[1]:angle end
|
||||
// \ | /
|
||||
// \ | /
|
||||
// ___\|/___ a[0]+dA/2:midline
|
||||
// / \
|
||||
// / \
|
||||
// / \
|
||||
// a[0]:angle start
|
||||
// */
|
||||
|
||||
// for (let j = 1, i = 0; j < vecArr.length; j += 2, i++) {
|
||||
// a[i] = Math.atan2(vecArr[j].y, vecArr[j].x)
|
||||
// }
|
||||
|
||||
// let dA = unreflex(a[1] - a[0])
|
||||
|
||||
|
||||
// let tagtoMidline = unreflex(a[2] - (a[0] + dA / 2))
|
||||
|
||||
// let shift = Math.abs(tagtoMidline) < Math.PI / 2 ? 0 : Math.PI;
|
||||
|
||||
// let tA1 = unreflex(a[2] - (a[0] + shift))
|
||||
// let tA2 = unreflex(a[2] - (a[0] + dA + shift))
|
||||
|
||||
|
||||
// let a1, deltaAngle;
|
||||
// if (dA * tA1 < 0) {
|
||||
// a1 = a[0] + tA1 + shift
|
||||
// deltaAngle = dA - tA1
|
||||
// } else if (dA * tA2 > 0) {
|
||||
// a1 = a[0] + shift
|
||||
// deltaAngle = dA + tA2
|
||||
// } else {
|
||||
// a1 = a[0] + shift
|
||||
// deltaAngle = dA
|
||||
// }
|
||||
|
||||
// let points = linegeom.array
|
||||
|
||||
// let d = 0;
|
||||
// points[d++] = center.x + tagRadius * Math.cos(a1)
|
||||
// points[d++] = center.y + tagRadius * Math.sin(a1)
|
||||
// d++
|
||||
|
||||
// const angle = a1 + (1 / divisions) * deltaAngle
|
||||
// points[d++] = center.x + tagRadius * Math.cos(angle)
|
||||
// points[d++] = center.y + tagRadius * Math.sin(angle)
|
||||
// d++
|
||||
|
||||
// for (i = 2; i <= divisions; i++) {
|
||||
// points[d++] = points[d - 4]
|
||||
// points[d++] = points[d - 4]
|
||||
// d++
|
||||
// const angle = a1 + (i / divisions) * deltaAngle
|
||||
// points[d++] = center.x + tagRadius * Math.cos(angle)
|
||||
// points[d++] = center.y + tagRadius * Math.sin(angle)
|
||||
// d++
|
||||
// }
|
||||
|
||||
|
||||
// for (i = 0; i < 2; i++) {
|
||||
// points[d++] = vecArr[2 * i].x
|
||||
// points[d++] = vecArr[2 * i].y
|
||||
// d++
|
||||
// points[d++] = center.x + tagRadius * Math.cos(a[i] + shift)
|
||||
// points[d++] = center.y + tagRadius * Math.sin(a[i] + shift)
|
||||
// d++
|
||||
// }
|
||||
|
||||
// linegeom.needsUpdate = true;
|
||||
|
||||
// pointgeom.array.set(p3.toArray())
|
||||
// pointgeom.needsUpdate = true;
|
||||
|
||||
|
||||
// }
|
||||
|
||||
|
||||
// const twoPi = Math.PI * 2
|
||||
// const negTwoPi = - Math.PI * 2
|
||||
// const negPi = - Math.PI
|
||||
|
||||
// function unreflex(angle) {
|
||||
// if (angle > Math.PI) {
|
||||
// angle = negTwoPi + angle
|
||||
// } else if (angle < negPi) {
|
||||
// angle = twoPi + angle
|
||||
// }
|
||||
// return angle
|
||||
// }
|
||||
|
|
@ -14,7 +14,6 @@ const pointMaterial = new THREE.PointsMaterial({
|
|||
|
||||
|
||||
export async function drawDimension(cc) {
|
||||
//////////
|
||||
let selection
|
||||
if (cc == 'd') {
|
||||
selection = await this.awaitSelection({ point: 2 }, { point: 1, line: 1 })
|
||||
|
|
@ -22,8 +21,6 @@ export async function drawDimension(cc) {
|
|||
selection = await this.awaitSelection({ line: 2 })
|
||||
}
|
||||
|
||||
/////////
|
||||
|
||||
if (selection == null) return;
|
||||
|
||||
let line;
|
||||
|
|
@ -45,7 +42,6 @@ export async function drawDimension(cc) {
|
|||
|
||||
|
||||
|
||||
|
||||
const point = new THREE.Points(
|
||||
new THREE.BufferGeometry().setAttribute('position',
|
||||
new THREE.Float32BufferAttribute(3, 3)
|
||||
|
|
@ -64,6 +60,7 @@ export async function drawDimension(cc) {
|
|||
|
||||
if (cc == 'd') {
|
||||
if (selection.every(e => e.userData.type == 'point')) {
|
||||
dimVal = 0;
|
||||
for (let i = 0; i < 3; i++) {
|
||||
dimVal += (selection[0].geometry.attributes.position.array[i] - selection[1].geometry.attributes.position.array[i]) ** 2
|
||||
}
|
||||
|
|
@ -93,6 +90,7 @@ export async function drawDimension(cc) {
|
|||
const onMove = this._onMoveDimension(point, line)
|
||||
|
||||
point.label = document.createElement('div');
|
||||
console.log(dimVal, 'dim')
|
||||
point.label.textContent = dimVal.toFixed(3);
|
||||
point.label.contentEditable = true;
|
||||
this.labelContainer.append(point.label)
|
||||
|
|
@ -256,7 +254,6 @@ export function setDimLines() {
|
|||
_p2 = this.obj3d.children[this.objIdx.get(ids[1])].geometry.attributes.position.array
|
||||
|
||||
|
||||
let offset = dims[i + 1].userData.offset
|
||||
|
||||
|
||||
update(
|
||||
|
|
@ -264,7 +261,7 @@ export function setDimLines() {
|
|||
dims[i + 1].geometry.attributes.position,
|
||||
_p1,
|
||||
_p2,
|
||||
offset
|
||||
dims[i + 1].userData.offset
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -538,108 +535,7 @@ function unreflex(angle) {
|
|||
|
||||
|
||||
|
||||
export async function drawAngle() {
|
||||
/////////
|
||||
let selection = await this.awaitSelection({ line: 2 })
|
||||
//////////
|
||||
|
||||
if (selection == null) return;
|
||||
|
||||
const line = new THREE.LineSegments(
|
||||
new THREE.BufferGeometry().setAttribute('position',
|
||||
new THREE.Float32BufferAttribute(Array((divisions + 2) * 2 * 3).fill(-0.001), 3)
|
||||
),
|
||||
lineMaterial.clone()
|
||||
);
|
||||
|
||||
const point = new THREE.Points(
|
||||
new THREE.BufferGeometry().setAttribute('position',
|
||||
new THREE.Float32BufferAttribute(3, 3)
|
||||
),
|
||||
pointMaterial.clone()
|
||||
)
|
||||
|
||||
line.userData.ids = selection.map(e => e.name)
|
||||
|
||||
line.layers.enable(2)
|
||||
point.layers.enable(2)
|
||||
|
||||
|
||||
/////////////
|
||||
let angle = getAngle(selection)
|
||||
//////////
|
||||
|
||||
|
||||
|
||||
|
||||
this.obj3d.children[1].add(line).add(point)
|
||||
const onMove = this._onMoveDimension(point, line)
|
||||
|
||||
point.label = document.createElement('div');
|
||||
point.label.textContent = angle.toFixed(3);
|
||||
point.label.contentEditable = true;
|
||||
this.labelContainer.append(point.label)
|
||||
|
||||
let onEnd, onKey;
|
||||
let add = await new Promise((res) => {
|
||||
onEnd = (e) => {
|
||||
point.userData.offset = vecArr[5].toArray()
|
||||
res(true)
|
||||
}
|
||||
onKey = (e) => e.key == 'Escape' && res(false)
|
||||
|
||||
this.canvas.addEventListener('pointermove', onMove)
|
||||
this.canvas.addEventListener('pointerdown', onEnd)
|
||||
window.addEventListener('keydown', onKey)
|
||||
})
|
||||
|
||||
this.canvas.removeEventListener('pointermove', onMove)
|
||||
this.canvas.removeEventListener('pointerdown', onEnd)
|
||||
window.removeEventListener('keydown', onKey)
|
||||
point.geometry.computeBoundingSphere()
|
||||
line.geometry.computeBoundingSphere()
|
||||
|
||||
if (add) {
|
||||
|
||||
this.constraints.set(++this.c_id,
|
||||
[
|
||||
'angle', angle,
|
||||
[-1, -1, selection[0].name, selection[1].name]
|
||||
]
|
||||
)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
selection[0].userData.constraints.push(this.c_id)
|
||||
selection[1].userData.constraints.push(this.c_id)
|
||||
|
||||
this.updateOtherBuffers()
|
||||
|
||||
line.name = this.c_id
|
||||
line.userData.type = 'dimension'
|
||||
point.name = this.c_id
|
||||
point.userData.type = 'dimension'
|
||||
|
||||
point.label.addEventListener('focus', this.updateAng(this.c_id))
|
||||
|
||||
} else {
|
||||
|
||||
this.obj3d.children[1].children.splice(this.obj3d.children[1].length - 2, 2).forEach(
|
||||
e => {
|
||||
e.geometry.dispose()
|
||||
e.material.dispose()
|
||||
}
|
||||
)
|
||||
this.labelContainer.removeChild(this.labelContainer.lastChild);
|
||||
sc.render()
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
const getAngle = (Obj3dLines) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue