working label
This commit is contained in:
howard
parent
9dc2de93ed
commit
c9a3c088ae
3
dist/index.html
vendored
3
dist/index.html
vendored
@ -17,8 +17,9 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="react"></div>
|
||||
<canvas id="c"></canvas>
|
||||
<div id="react"></div>
|
||||
<div id="labels"></div>
|
||||
<div id="stats"></div>
|
||||
<script src="index.bundle.js"></script>
|
||||
<script src="scene.bundle.js"></script>
|
||||
|
||||
42
src/Scene.js
42
src/Scene.js
@ -37,6 +37,7 @@ export class Scene {
|
||||
this.canvas = document.querySelector('#c');
|
||||
this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas});
|
||||
|
||||
|
||||
const size = 1;
|
||||
const near = 0;
|
||||
const far = 100;
|
||||
@ -62,7 +63,7 @@ export class Scene {
|
||||
const pxy = new THREE.Mesh(
|
||||
new THREE.PlaneGeometry(5, 5),
|
||||
new THREE.MeshBasicMaterial({
|
||||
color: color.d,
|
||||
color: color.plane,
|
||||
opacity: 0.2,
|
||||
side: THREE.DoubleSide,
|
||||
transparent: true,
|
||||
@ -72,6 +73,7 @@ export class Scene {
|
||||
);
|
||||
|
||||
pxy.name = 'd' + nid++
|
||||
pxy.userData.type = 'plane'
|
||||
helpersGroup.add(pxy);
|
||||
|
||||
const pyz = pxy.clone().rotateY(Math.PI / 2);
|
||||
@ -119,6 +121,7 @@ export class Scene {
|
||||
|
||||
this.hovered = [];
|
||||
this.selected = [];
|
||||
this.activeSketch = null;
|
||||
|
||||
this.render();
|
||||
}
|
||||
@ -172,6 +175,8 @@ export class Scene {
|
||||
|
||||
}
|
||||
|
||||
|
||||
let idx, x, y, ele, pos, dims, matrix;
|
||||
function render() {
|
||||
this.stats.begin();
|
||||
if (this.resizeCanvas(this.renderer)) {
|
||||
@ -181,6 +186,36 @@ function render() {
|
||||
this.camera.updateProjectionMatrix();
|
||||
}
|
||||
this.renderer.render(this.obj3d, this.camera);
|
||||
|
||||
// const sketch = this.store.
|
||||
if (this.activeSketch) {
|
||||
dims = this.activeSketch.obj3d.children[1].children
|
||||
matrix = this.activeSketch.obj3d.matrix
|
||||
|
||||
for (idx = 1; idx < dims.length; idx += 2) {
|
||||
ele = dims[idx]
|
||||
|
||||
pos = _vec3.set(
|
||||
...ele.geometry.attributes.position.array
|
||||
).applyMatrix4(matrix).project(this.camera)
|
||||
|
||||
x = (pos.x * .5 + .5) * this.canvas.clientWidth + 10;
|
||||
y = (pos.y * -.5 + .5) * this.canvas.clientHeight;
|
||||
|
||||
// console.log(i, ele)
|
||||
// ele.label.style.transform = `translate(-50%, -50%) translate(${x+20}px,${y}px)`;
|
||||
ele.label.style.transform = `translate(0%, -50%) translate(${x}px,${y}px)`;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.stats.end();
|
||||
}
|
||||
|
||||
@ -192,11 +227,11 @@ async function addSketch() {
|
||||
|
||||
let sketch;
|
||||
|
||||
const references = await this.awaitPts({ p: 3 }, { d: 1 });
|
||||
const references = await this.awaitPts({ point: 3 }, { plane: 1 });
|
||||
|
||||
if (!references) return;
|
||||
|
||||
if (references[0].name[0] == 'd') {
|
||||
if (references[0].userData.type == 'plane') {
|
||||
sketch = new Sketch(this.camera, this.canvas, this.store)
|
||||
sketch.obj3d.matrix = references[0].matrix
|
||||
sketch.plane.applyMatrix4(sketch.obj3d.matrix)
|
||||
@ -216,6 +251,7 @@ async function addSketch() {
|
||||
|
||||
|
||||
sketch.activate()
|
||||
this.activeSketch = sketch
|
||||
|
||||
sketch.obj3d.addEventListener('change', this.render);
|
||||
this.render()
|
||||
|
||||
21
src/app.css
21
src/app.css
@ -1,42 +1,49 @@
|
||||
/* @tailwind base; */
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
font-family: sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#c {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#react > div {
|
||||
|
||||
}
|
||||
|
||||
.btn-red {
|
||||
cursor: pointer;
|
||||
@apply bg-red-500 hover:bg-red-600 text-gray-50
|
||||
@apply bg-red-500 hover:bg-red-600 text-gray-50;
|
||||
}
|
||||
|
||||
.btn-grn {
|
||||
cursor: pointer;
|
||||
@apply bg-green-500 hover:bg-green-600 text-gray-50
|
||||
@apply bg-green-500 hover:bg-green-600 text-gray-50;
|
||||
}
|
||||
|
||||
.btn-blu {
|
||||
cursor: pointer;
|
||||
@apply bg-blue-500 hover:bg-blue-600 text-gray-50
|
||||
@apply bg-blue-500 hover:bg-blue-600 text-gray-50;
|
||||
}
|
||||
|
||||
|
||||
#labels > div {
|
||||
position: absolute;
|
||||
border: solid 1px black;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
@apply fill-current
|
||||
bg-gray-100 text-green-600
|
||||
hover:bg-gray-200 hover:text-green-700
|
||||
hover:bg-gray-200 hover:text-green-700;
|
||||
}
|
||||
|
||||
|
||||
|
||||
13
src/app.jsx
13
src/app.jsx
@ -44,7 +44,11 @@ const App = () => {
|
||||
|
||||
const btnz = [
|
||||
activeSketchNid ?
|
||||
[MdDone, () => treeEntries.byNid[activeSketchNid].deactivate(), 'Finish'] :
|
||||
[MdDone, () => {
|
||||
treeEntries.byNid[activeSketchNid].deactivate()
|
||||
sc.activeSketch = null
|
||||
// sc.activeDim = this.activeSketch.obj3d.children[1].children
|
||||
}, 'Finish'] :
|
||||
[FaEdit, sc.addSketch, 'Sketch']
|
||||
,
|
||||
[FaCube, () => sc.extrude(treeEntries.byNid[activeSketchNid]), 'Extrude'],
|
||||
@ -103,6 +107,7 @@ const TreeEntry = ({ entId }) => {
|
||||
onClick={() => {
|
||||
activeSketchNid && treeEntries[activeSketchNid].deactivate()
|
||||
entry.activate()
|
||||
sc.activeSketch = entry;
|
||||
}}
|
||||
>
|
||||
<MdEdit />
|
||||
@ -162,9 +167,9 @@ const TreeEntry = ({ entId }) => {
|
||||
|
||||
const subtract = () => {
|
||||
// //Create a bsp tree from each of the meshes
|
||||
console.log(sc.selected.length !=2 || !sc.selected.every(e=>e.name && e.name[0]=='m'),"wtf")
|
||||
if (sc.selected.length !=2 || !sc.selected.every(e=>e.name && e.name[0]=='m')) return
|
||||
console.log('here')
|
||||
// console.log(sc.selected.length != 2 || !sc.selected.every(e => e.userData.type == 'mesh'), "wtf")
|
||||
if (sc.selected.length != 2 || !sc.selected.every(e => e.userData.type == 'mesh')) return
|
||||
// console.log('here')
|
||||
const [m1, m2] = sc.selected
|
||||
|
||||
let bspA = BoolOp.fromMesh(m1)
|
||||
|
||||
@ -70,13 +70,14 @@ export function extrude(sketch) {
|
||||
const extrudeSettings = { depth: 8, bevelEnabled: false };
|
||||
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
|
||||
const phong = new THREE.MeshPhongMaterial({
|
||||
color: color.m,
|
||||
color: color.mesh,
|
||||
emissive: color.emissive,
|
||||
flatShading: true
|
||||
});
|
||||
const mesh = new THREE.Mesh(geometry, phong)
|
||||
// mesh.name = "Extrude"
|
||||
mesh.name = 'm' + nid++
|
||||
mesh.userData.type = 'mesh'
|
||||
|
||||
for (let i = 0; i < offSetPts.length; i += 2) {
|
||||
if (
|
||||
|
||||
@ -20,7 +20,6 @@ function reducer(state = {}, action) {
|
||||
}
|
||||
}
|
||||
case 'set-active-sketch':
|
||||
console.log('action',action)
|
||||
return {
|
||||
...state, activeSketchNid: action.sketch
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import * as THREE from '../../node_modules/three/src/Three';
|
||||
|
||||
import { drawOnClick1, drawOnClick2, drawPreClick2, drawClear } from './drawEvents'
|
||||
import { onHover, onDrag, onPick, onRelease } from '../utils/mouseEvents'
|
||||
import { onHover, onDrag, onDragDim, onPick, onRelease } from '../utils/mouseEvents'
|
||||
import { addDimension, setCoincident } from './constraintEvents'
|
||||
import { get3PtArc } from './drawArc'
|
||||
import { _vec2, _vec3, raycaster, awaitPts } from '../utils/shared'
|
||||
@ -31,10 +31,13 @@ class Sketch {
|
||||
|
||||
this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
|
||||
|
||||
this.labelContainer = document.getElementById('labels')
|
||||
|
||||
if (preload === undefined) {
|
||||
|
||||
this.obj3d = new THREE.Group()
|
||||
this.obj3d.name = "s" + nid++
|
||||
this.obj3d.userData.type = "sketch"
|
||||
this.obj3d.matrixAutoUpdate = false;
|
||||
|
||||
this.objIdx = new Map()
|
||||
@ -48,6 +51,8 @@ class Sketch {
|
||||
this.obj3d.add(new THREE.Group().add(new AxesHelper(2)));
|
||||
this.obj3d.add(new THREE.Group());
|
||||
this.obj3d.add(new THREE.Group());
|
||||
|
||||
this.labels = []
|
||||
} else {
|
||||
|
||||
|
||||
@ -127,6 +132,7 @@ class Sketch {
|
||||
this.canvas.addEventListener('pointermove', this.onHover)
|
||||
this.store.dispatch({ type: 'set-active-sketch', sketch: this.obj3d.name })
|
||||
|
||||
|
||||
window.sketcher = this
|
||||
}
|
||||
|
||||
@ -209,17 +215,21 @@ class Sketch {
|
||||
|
||||
deleteSelected() {
|
||||
|
||||
this.selected
|
||||
.filter(e => e.userData.type == 'dimension')
|
||||
.forEach(e => this.constraints.has(e.name) && this.deleteConstraints(e.name))
|
||||
|
||||
|
||||
const toDelete = [...this.selected]
|
||||
.filter(e => e.type == 'Line')
|
||||
const toDelete = this.selected
|
||||
.filter(e => e.userData.type == 'line')
|
||||
.sort((a, b) => b.id - a.id)
|
||||
.map(obj => {
|
||||
return this.delete(obj)
|
||||
})
|
||||
|
||||
|
||||
if (toDelete.length) {
|
||||
this.updatePointsBuffer(toDelete[toDelete.length - 1])
|
||||
}
|
||||
|
||||
this.updateOtherBuffers()
|
||||
|
||||
this.selected = []
|
||||
@ -227,6 +237,12 @@ class Sketch {
|
||||
}
|
||||
|
||||
delete(obj) {
|
||||
|
||||
if (obj.userData.type == 'dimension') {
|
||||
this.deleteConstraints(obj.name)
|
||||
return
|
||||
}
|
||||
|
||||
let link = this.linkedObjs.get(obj.userData.l_id)
|
||||
if (!link) return;
|
||||
link = link[1]
|
||||
@ -252,15 +268,26 @@ class Sketch {
|
||||
|
||||
|
||||
deleteConstraints(c_id) {
|
||||
for (let idx of this.constraints.get(c_id)[2]) { //////////
|
||||
for (let idx of this.constraints.get(c_id)[2]) { // clean on contraint references
|
||||
if (idx == -1) continue
|
||||
const ob = this.obj3d.children[this.objIdx.get(idx)]
|
||||
if (ob) {
|
||||
// ob.constraints.delete(c_id)
|
||||
ob.userData.constraints.splice(ob.userData.constraints.indexOf(c_id), 1)
|
||||
}
|
||||
}
|
||||
this.constraints.delete(c_id)
|
||||
|
||||
for (let i = 0; i < this.obj3d.children[1].children.length; i++) {
|
||||
if (this.obj3d.children[1].children[i].name == c_id) {
|
||||
this.obj3d.children[1].children.splice(i, i + 2).forEach(
|
||||
e => {
|
||||
e.geometry.dispose()
|
||||
e.material.dispose()
|
||||
}
|
||||
)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateOtherBuffers() {
|
||||
@ -315,6 +342,10 @@ class Sketch {
|
||||
return _vec3
|
||||
}
|
||||
|
||||
getScreenXY(arr) {
|
||||
return _vec3.set(...arr).applyMatrix4(this.obj3d.matrix).project(this.camera)
|
||||
}
|
||||
|
||||
solve() {
|
||||
|
||||
const pts_buffer =
|
||||
|
||||
@ -1,19 +1,20 @@
|
||||
import * as THREE from '../../node_modules/three/src/Three';
|
||||
import { color } from '../utils/shared'
|
||||
|
||||
const lineMaterial = new THREE.LineBasicMaterial({
|
||||
linewidth: 2,
|
||||
color: 0x156289,
|
||||
color: color.dimension,
|
||||
})
|
||||
|
||||
|
||||
const pointMaterial = new THREE.PointsMaterial({
|
||||
color: 0x156289,
|
||||
color: color.dimension,
|
||||
size: 4,
|
||||
})
|
||||
|
||||
|
||||
export async function drawDimension() {
|
||||
let pts = await this.awaitPts({ p: 2 })
|
||||
let pts = await this.awaitPts({ point: 2 })
|
||||
|
||||
if (pts == null) return;
|
||||
|
||||
@ -34,14 +35,21 @@ export async function drawDimension() {
|
||||
line.userData.nids = pts.map(e => e.name)
|
||||
|
||||
const groupLines = this.obj3d.children[1]
|
||||
const groupPts = this.obj3d.children[2]
|
||||
groupLines.add(line)
|
||||
groupPts.add(point)
|
||||
|
||||
const onMove = this._onMoveDimension(...pts, point, line)
|
||||
groupLines.add(line)
|
||||
groupLines.add(point)
|
||||
|
||||
const onMove = this._onMoveDimension(point, line)
|
||||
|
||||
|
||||
|
||||
point.label = document.createElement('div');
|
||||
point.label.textContent = '10000';
|
||||
this.labelContainer.append(point.label)
|
||||
|
||||
|
||||
|
||||
let onEnd, onKey;
|
||||
|
||||
let add = await new Promise((res) => {
|
||||
onEnd = (e) => res(true)
|
||||
onKey = (e) => e.key == 'Escape' && res(false)
|
||||
@ -54,7 +62,8 @@ export async function drawDimension() {
|
||||
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, //???
|
||||
[
|
||||
@ -68,12 +77,15 @@ export async function drawDimension() {
|
||||
this.updateOtherBuffers()
|
||||
|
||||
line.name = this.c_id
|
||||
line.userData.type = 'dimension'
|
||||
point.name = this.c_id
|
||||
point.userData.type = 'dimension'
|
||||
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
[groupLines.splice(groupLines.length - 1),
|
||||
groupPts.splice(groupLines.length - 1)].forEach(
|
||||
groupLines.splice(groupLines.length - 2).forEach(
|
||||
e => {
|
||||
e.geometry.dispose()
|
||||
e.material.dispose()
|
||||
@ -82,28 +94,71 @@ export async function drawDimension() {
|
||||
sc.render()
|
||||
}
|
||||
|
||||
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
const p1 = new THREE.Vector2()
|
||||
const p2 = new THREE.Vector2()
|
||||
const p3 = new THREE.Vector2()
|
||||
let dir, hyp, proj, perp, p1e, p2e, nids, _p1, _p2, _p3;
|
||||
|
||||
export function _onMoveDimension(_p1, _p2, point, line) {
|
||||
export function _onMoveDimension(point, line) {
|
||||
|
||||
p1.set(..._p1.geometry.attributes.position.array.slice(0, 2))
|
||||
p2.set(..._p2.geometry.attributes.position.array.slice(0, 2))
|
||||
nids = line.userData.nids
|
||||
|
||||
let dir, hyp, proj, perp, p1e, p2e, loc;
|
||||
_p1 = this.obj3d.children[sketcher.objIdx.get(nids[0])].geometry.attributes.position.array
|
||||
_p2 = this.obj3d.children[sketcher.objIdx.get(nids[1])].geometry.attributes.position.array
|
||||
|
||||
p1.set(_p1[0], _p1[1])
|
||||
p2.set(_p2[0], _p2[1])
|
||||
|
||||
let loc;
|
||||
|
||||
return (e) => {
|
||||
loc = this.getLocation(e)
|
||||
|
||||
p3.set(loc.x, loc.y)
|
||||
|
||||
update(
|
||||
line.geometry.attributes.position,
|
||||
point.geometry.attributes.position
|
||||
)
|
||||
|
||||
const linegeom = line.geometry.attributes.position
|
||||
const pointgeom = point.geometry.attributes.position
|
||||
point.userData.offset = hyp.toArray()
|
||||
|
||||
sc.render()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export function updateDimLines() {
|
||||
|
||||
|
||||
const groupLines = this.obj3d.children[1].children
|
||||
|
||||
for (let i = 0; i < groupLines.length; i += 2) {
|
||||
|
||||
nids = groupLines[i].userData.nids
|
||||
|
||||
_p1 = this.obj3d.children[sketcher.objIdx.get(nids[0])].geometry.attributes.position.array
|
||||
_p2 = this.obj3d.children[sketcher.objIdx.get(nids[1])].geometry.attributes.position.array
|
||||
_p3 = groupLines[i + 1].geometry.attributes.position.array
|
||||
const offset = groupLines[i + 1].userData.offset
|
||||
|
||||
p1.set(_p1[0], _p1[1])
|
||||
p2.set(_p2[0], _p2[1])
|
||||
p3.set(_p1[0] + offset[0], _p1[1] + offset[1])
|
||||
|
||||
|
||||
update(
|
||||
groupLines[i].geometry.attributes.position,
|
||||
groupLines[i + 1].geometry.attributes.position
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function update(linegeom, pointgeom) {
|
||||
dir = p2.clone().sub(p1).normalize()
|
||||
hyp = p3.clone().sub(p1)
|
||||
proj = dir.multiplyScalar(hyp.dot(dir))
|
||||
@ -128,69 +183,4 @@ export function _onMoveDimension(_p1, _p2, point, line) {
|
||||
|
||||
pointgeom.array.set(p3.toArray())
|
||||
pointgeom.needsUpdate = true;
|
||||
|
||||
|
||||
point.userData.offset = hyp.toArray()
|
||||
|
||||
sc.render()
|
||||
}
|
||||
}
|
||||
|
||||
const p1 = new THREE.Vector2()
|
||||
const p2 = new THREE.Vector2()
|
||||
const p3 = new THREE.Vector2()
|
||||
|
||||
export function updateDimLines() {
|
||||
|
||||
|
||||
let dir, hyp, proj, perp, p1e, p2e;
|
||||
let nids, _p1, _p2, _p3, offset;
|
||||
|
||||
const groupLines = this.obj3d.children[1].children
|
||||
const groupPts = this.obj3d.children[2].children
|
||||
|
||||
for (let i = 0; i < groupLines.length; i++) {
|
||||
|
||||
nids = groupLines[i].userData.nids
|
||||
// console.log(sketcher.objIdx.get(nid[0]), 'heeeeeeee')
|
||||
|
||||
_p1 = this.obj3d.children[sketcher.objIdx.get(nids[0])].geometry.attributes.position.array
|
||||
_p2 = this.obj3d.children[sketcher.objIdx.get(nids[1])].geometry.attributes.position.array
|
||||
_p3 = groupPts[i].geometry.attributes.position.array
|
||||
offset = groupPts[i].userData.offset
|
||||
|
||||
p1.set(_p1[0], _p1[1])
|
||||
p2.set(_p2[0], _p2[1])
|
||||
p3.set(_p1[0] + offset[0], _p1[1] + offset[1])
|
||||
|
||||
|
||||
const linegeom = groupLines[i].geometry.attributes.position
|
||||
const pointgeom = groupPts[i].geometry.attributes.position
|
||||
|
||||
dir = p2.clone().sub(p1).normalize()
|
||||
hyp = p3.clone().sub(p1)
|
||||
proj = dir.multiplyScalar(hyp.dot(dir))
|
||||
perp = hyp.sub(proj)
|
||||
|
||||
p1e = p1.clone().add(perp).toArray()
|
||||
p2e = p2.clone().add(perp).toArray()
|
||||
|
||||
linegeom.array.set(p1.toArray(), 0)
|
||||
linegeom.array.set(p1e, 3)
|
||||
|
||||
linegeom.array.set(p1e, 6)
|
||||
linegeom.array.set(p2e, 9)
|
||||
|
||||
linegeom.array.set(p2e, 12)
|
||||
linegeom.array.set(p2.toArray(), 15)
|
||||
|
||||
linegeom.array.set(p1e, 18)
|
||||
linegeom.array.set(p3.toArray(), 21)
|
||||
|
||||
linegeom.needsUpdate = true;
|
||||
|
||||
pointgeom.array.set(p3.toArray())
|
||||
pointgeom.needsUpdate = true;
|
||||
}
|
||||
|
||||
}
|
||||
@ -13,12 +13,19 @@ export function onHover(e) {
|
||||
);
|
||||
|
||||
let hoverPts;
|
||||
if (this.obj3d.name[0] == 's') {
|
||||
hoverPts = raycaster.intersectObjects(this.obj3d.children)
|
||||
if (this.obj3d.userData.type == 'sketch') {
|
||||
hoverPts = raycaster.intersectObjects([...this.obj3d.children[1].children, ...this.obj3d.children])
|
||||
|
||||
// if (!hoverPts.length) {
|
||||
// hoverPts = raycaster.intersectObjects(this.obj3d.children)
|
||||
// }
|
||||
} else {
|
||||
hoverPts = raycaster.intersectObjects(this.obj3d.children, true)
|
||||
}
|
||||
|
||||
// if (hoverDim.length) {
|
||||
// }
|
||||
|
||||
let idx = []
|
||||
if (hoverPts.length) {
|
||||
let minDist = Infinity;
|
||||
@ -35,18 +42,13 @@ export function onHover(e) {
|
||||
if (!idx.length) idx.push(0)
|
||||
}
|
||||
|
||||
if (idx.length) {
|
||||
if (hoverPts[idx[0]].object != this.hovered[0]) {
|
||||
|
||||
// const obj = this.hovered[this.hovered.length - 1]
|
||||
// if (obj && !this.selected.includes(obj)) {
|
||||
// obj.material.color.set(color[obj.name[0]])
|
||||
// }
|
||||
if (idx.length) { // after filtering, hovered objs still exists
|
||||
if (hoverPts[idx[0]].object != this.hovered[0]) { // if the previous hovered obj is not the same as current
|
||||
|
||||
for (let x = 0; x < this.hovered.length; x++) {
|
||||
const obj = this.hovered[x]
|
||||
if (obj && !this.selected.includes(obj)) {
|
||||
obj.material.color.set(color[obj.name[0]])
|
||||
obj.material.color.set(color[obj.userData.type])
|
||||
}
|
||||
}
|
||||
|
||||
@ -61,19 +63,14 @@ export function onHover(e) {
|
||||
// console.log('render1')
|
||||
this.obj3d.dispatchEvent({ type: 'change' })
|
||||
}
|
||||
} else {
|
||||
if (this.hovered.length) {
|
||||
|
||||
// const obj = this.hovered[this.hovered.length - 1]
|
||||
// if (obj && !this.selected.includes(obj)) {
|
||||
// obj.material.color.set(color[obj.name[0]])
|
||||
// }
|
||||
} else { // no hovered object after filtering
|
||||
if (this.hovered.length) { // if previously something was hovered, then we need to clear it
|
||||
|
||||
for (let x = 0; x < this.hovered.length; x++) {
|
||||
const obj = this.hovered[x]
|
||||
// console.log(obj, 'here')
|
||||
if (!this.selected.includes(obj)) {
|
||||
obj.material.color.set(color[obj.name[0]])
|
||||
obj.material.color.set(color[obj.userData.type])
|
||||
}
|
||||
}
|
||||
this.hovered = []
|
||||
@ -84,7 +81,7 @@ export function onHover(e) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let draggedLabel;
|
||||
export function onPick(e) {
|
||||
if (this.mode || e.buttons != 1) return
|
||||
|
||||
@ -92,14 +89,37 @@ export function onPick(e) {
|
||||
|
||||
this.selected.push(this.hovered[this.hovered.length - 1])
|
||||
|
||||
if (this.hovered[0].type == "Points") {
|
||||
this.canvas.addEventListener('pointermove', this.onDrag);
|
||||
switch (this.hovered[0].userData.type) {
|
||||
case 'dimension':
|
||||
const idx = this.obj3d.children[1].children.indexOf(this.hovered[0])
|
||||
if (idx % 2) {
|
||||
|
||||
this.onDragDim = this._onMoveDimension(
|
||||
this.obj3d.children[1].children[idx],
|
||||
this.obj3d.children[1].children[idx - 1],
|
||||
)
|
||||
this.canvas.addEventListener('pointermove', this.onDragDim);
|
||||
this.canvas.addEventListener('pointerup', this.onRelease)
|
||||
}
|
||||
|
||||
draggedLabel = this.obj3d.children[1].children[idx].label
|
||||
console.log(draggedLabel)
|
||||
draggedLabel.style.zIndex = -1;
|
||||
break;
|
||||
case 'point':
|
||||
|
||||
this.canvas.addEventListener('pointermove', this.onDrag);
|
||||
this.canvas.addEventListener('pointerup', this.onRelease)
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
} else {
|
||||
for (let x = 0; x < this.selected.length; x++) {
|
||||
const obj = this.selected[x]
|
||||
obj.material.color.set(color[obj.name[0]])
|
||||
obj.material.color.set(color[obj.userData.type])
|
||||
}
|
||||
this.obj3d.dispatchEvent({ type: 'change' })
|
||||
this.selected = []
|
||||
@ -114,6 +134,7 @@ export function onDrag(e) {
|
||||
// this.objIdx.get(obj.name) * 3
|
||||
// )
|
||||
|
||||
|
||||
for (let x = 0; x < this.hovered.length; x++) {
|
||||
const obj = this.hovered[x]
|
||||
this.ptsBuf.set(
|
||||
@ -129,12 +150,19 @@ export function onDrag(e) {
|
||||
|
||||
export function onRelease() {
|
||||
this.canvas.removeEventListener('pointermove', this.onDrag)
|
||||
this.canvas.removeEventListener('pointermove', this.onDragDim)
|
||||
this.canvas.removeEventListener('pointerup', this.onRelease)
|
||||
|
||||
for (let x = 0; x < this.hovered.length; x++) {
|
||||
const obj = this.hovered[x]
|
||||
for (let x = 3; x < this.obj3d.children.length; x++) {
|
||||
const obj = this.obj3d.children[x]
|
||||
obj.geometry.computeBoundingSphere()
|
||||
}
|
||||
|
||||
for (let x = 0; x < this.obj3d.children[1].children.length; x++) {
|
||||
const obj = this.obj3d.children[1].children[x]
|
||||
obj.geometry.computeBoundingSphere()
|
||||
}
|
||||
|
||||
draggedLabel.style.zIndex = 0;
|
||||
}
|
||||
|
||||
|
||||
@ -15,20 +15,21 @@ const color = {
|
||||
hover: 0x00ff00,
|
||||
lighting: 0xFFFFFF,
|
||||
emissive: 0x072534,
|
||||
d: 0xf5bc42, //datums: planes
|
||||
p: 0x555555, //points
|
||||
l: 0x555555, //lines
|
||||
m: 0x156289, //mesh: extrude
|
||||
point: 0x555555, //points
|
||||
line: 0x555555, //lines
|
||||
mesh: 0x156289, //mesh:
|
||||
dimension: 0x891d15, //
|
||||
plane: 0x891d15, //
|
||||
}
|
||||
|
||||
const lineMaterial = new THREE.LineBasicMaterial({
|
||||
linewidth: 2,
|
||||
color: color.l,
|
||||
color: color.line,
|
||||
})
|
||||
|
||||
|
||||
const pointMaterial = new THREE.PointsMaterial({
|
||||
color: color.p,
|
||||
color: color.point,
|
||||
size: 4,
|
||||
})
|
||||
|
||||
@ -40,7 +41,8 @@ const ptObj = (n) => {
|
||||
),
|
||||
pointMaterial.clone()
|
||||
);
|
||||
ret.name = 'p' + nid++
|
||||
ret.name = "p" + nid++
|
||||
ret.userData.type = 'point'
|
||||
return ret
|
||||
}
|
||||
|
||||
@ -52,6 +54,7 @@ const lineObj = (n = 1) => {
|
||||
lineMaterial.clone()
|
||||
);
|
||||
ret.name = 'l' + nid++
|
||||
ret.userData.type = 'line'
|
||||
return ret
|
||||
}
|
||||
|
||||
@ -80,7 +83,7 @@ async function awaitPts(...criteria) {
|
||||
let references = this.selected.slice()
|
||||
|
||||
for (let ob of references) {
|
||||
const type = ob.name[0]
|
||||
const type = ob.userData.type
|
||||
if (counter[type]) {
|
||||
counter[type] += 1;
|
||||
} else {
|
||||
@ -103,7 +106,7 @@ async function awaitPts(...criteria) {
|
||||
})
|
||||
|
||||
references.push(pt)
|
||||
const type = pt.name[0]
|
||||
const type = pt.userData.type
|
||||
if (counter[type]) {
|
||||
counter[type] += 1;
|
||||
} else {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user