caiyu/three.cad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working label

Browse Source
This commit is contained in:
howard 2021-04-04 20:52:17 -07:00
parent 9dc2de93ed
commit c9a3c088ae
10 changed files with 252 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dist/index.html vendored
View File

@ -17,8 +17,9 @@
</head> </head>
<body> <body>
<div id="react"></div>
<canvas id="c"></canvas> <canvas id="c"></canvas>
<div id="react"></div>
<div id="labels"></div>
<div id="stats"></div> <div id="stats"></div>
<script src="index.bundle.js"></script> <script src="index.bundle.js"></script>
<script src="scene.bundle.js"></script> <script src="scene.bundle.js"></script>

42
src/Scene.js
View File

@ -37,6 +37,7 @@ export class Scene {
this.canvas = document.querySelector('#c'); this.canvas = document.querySelector('#c');
this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas}); this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas});
const size = 1; const size = 1;
const near = 0; const near = 0;
const far = 100; const far = 100;
@ -62,7 +63,7 @@ export class Scene {
const pxy = new THREE.Mesh( const pxy = new THREE.Mesh(
new THREE.PlaneGeometry(5, 5), new THREE.PlaneGeometry(5, 5),
new THREE.MeshBasicMaterial({ new THREE.MeshBasicMaterial({
color: color.d, color: color.plane,
opacity: 0.2, opacity: 0.2,
side: THREE.DoubleSide, side: THREE.DoubleSide,
transparent: true, transparent: true,
@ -72,6 +73,7 @@ export class Scene {
); );
pxy.name = 'd' + nid++ pxy.name = 'd' + nid++
pxy.userData.type = 'plane'
helpersGroup.add(pxy); helpersGroup.add(pxy);
const pyz = pxy.clone().rotateY(Math.PI / 2); const pyz = pxy.clone().rotateY(Math.PI / 2);
@ -119,6 +121,7 @@ export class Scene {
this.hovered = []; this.hovered = [];
this.selected = []; this.selected = [];
this.activeSketch = null;
this.render(); this.render();
} }
@ -172,6 +175,8 @@ export class Scene {
} }
let idx, x, y, ele, pos, dims, matrix;
function render() { function render() {
this.stats.begin(); this.stats.begin();
if (this.resizeCanvas(this.renderer)) { if (this.resizeCanvas(this.renderer)) {
@ -181,6 +186,36 @@ function render() {
this.camera.updateProjectionMatrix(); this.camera.updateProjectionMatrix();
} }
this.renderer.render(this.obj3d, this.camera); 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(); this.stats.end();
} }
@ -192,11 +227,11 @@ async function addSketch() {
let sketch; 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) return;
if (references[0].name[0] == 'd') { if (references[0].userData.type == 'plane') {
sketch = new Sketch(this.camera, this.canvas, this.store) sketch = new Sketch(this.camera, this.canvas, this.store)
sketch.obj3d.matrix = references[0].matrix sketch.obj3d.matrix = references[0].matrix
sketch.plane.applyMatrix4(sketch.obj3d.matrix) sketch.plane.applyMatrix4(sketch.obj3d.matrix)
@ -216,6 +251,7 @@ async function addSketch() {
sketch.activate() sketch.activate()
this.activeSketch = sketch
sketch.obj3d.addEventListener('change', this.render); sketch.obj3d.addEventListener('change', this.render);
this.render() this.render()

21
src/app.css
View File

@ -1,42 +1,49 @@
/* @tailwind base; */ /* @tailwind base; */
@tailwind utilities; @tailwind utilities;
html, html,
body { body {
margin: 0; margin: 0;
height: 100%; height: 100%;
font-family: sans-serif; font-family: sans-serif;
overflow: hidden;
} }
#c { #c {
position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
} }
#react > div {
}
.btn-red { .btn-red {
cursor: pointer; 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 { .btn-grn {
cursor: pointer; 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 { .btn-blu {
cursor: pointer; 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 { .btn {
cursor: pointer; cursor: pointer;
@apply fill-current @apply fill-current
bg-gray-100 text-green-600 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
View File

@ -44,7 +44,11 @@ const App = () => {
const btnz = [ const btnz = [
activeSketchNid ? 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'] [FaEdit, sc.addSketch, 'Sketch']
, ,
[FaCube, () => sc.extrude(treeEntries.byNid[activeSketchNid]), 'Extrude'], [FaCube, () => sc.extrude(treeEntries.byNid[activeSketchNid]), 'Extrude'],
@ -103,6 +107,7 @@ const TreeEntry = ({ entId }) => {
onClick={() => { onClick={() => {
activeSketchNid && treeEntries[activeSketchNid].deactivate() activeSketchNid && treeEntries[activeSketchNid].deactivate()
entry.activate() entry.activate()
sc.activeSketch = entry;
}} }}
> >
<MdEdit /> <MdEdit />
@ -162,9 +167,9 @@ const TreeEntry = ({ entId }) => {
const subtract = () => { const subtract = () => {
// //Create a bsp tree from each of the meshes // //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") // 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.name && e.name[0]=='m')) return if (sc.selected.length != 2 || !sc.selected.every(e => e.userData.type == 'mesh')) return
console.log('here') // console.log('here')
const [m1, m2] = sc.selected const [m1, m2] = sc.selected
let bspA = BoolOp.fromMesh(m1) let bspA = BoolOp.fromMesh(m1)

3
src/extrude.js
View File

@ -70,13 +70,14 @@ export function extrude(sketch) {
const extrudeSettings = { depth: 8, bevelEnabled: false }; const extrudeSettings = { depth: 8, bevelEnabled: false };
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings); const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
const phong = new THREE.MeshPhongMaterial({ const phong = new THREE.MeshPhongMaterial({
color: color.m, color: color.mesh,
emissive: color.emissive, emissive: color.emissive,
flatShading: true flatShading: true
}); });
const mesh = new THREE.Mesh(geometry, phong) const mesh = new THREE.Mesh(geometry, phong)
// mesh.name = "Extrude" // mesh.name = "Extrude"
mesh.name = 'm' + nid++ mesh.name = 'm' + nid++
mesh.userData.type = 'mesh'
for (let i = 0; i < offSetPts.length; i += 2) { for (let i = 0; i < offSetPts.length; i += 2) {
if ( if (

1
src/index.js
View File

@ -20,7 +20,6 @@ function reducer(state = {}, action) {
} }
} }
case 'set-active-sketch': case 'set-active-sketch':
console.log('action',action)
return { return {
...state, activeSketchNid: action.sketch ...state, activeSketchNid: action.sketch
} }

45
src/sketcher/Sketch.js
View File

@ -3,7 +3,7 @@
import * as THREE from '../../node_modules/three/src/Three'; import * as THREE from '../../node_modules/three/src/Three';
import { drawOnClick1, drawOnClick2, drawPreClick2, drawClear } from './drawEvents' 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 { addDimension, setCoincident } from './constraintEvents'
import { get3PtArc } from './drawArc' import { get3PtArc } from './drawArc'
import { _vec2, _vec3, raycaster, awaitPts } from '../utils/shared' 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.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
this.labelContainer = document.getElementById('labels')
if (preload === undefined) { if (preload === undefined) {
this.obj3d = new THREE.Group() this.obj3d = new THREE.Group()
this.obj3d.name = "s" + nid++ this.obj3d.name = "s" + nid++
this.obj3d.userData.type = "sketch"
this.obj3d.matrixAutoUpdate = false; this.obj3d.matrixAutoUpdate = false;
this.objIdx = new Map() 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().add(new AxesHelper(2)));
this.obj3d.add(new THREE.Group()); this.obj3d.add(new THREE.Group());
this.obj3d.add(new THREE.Group()); this.obj3d.add(new THREE.Group());
this.labels = []
} else { } else {
@ -127,6 +132,7 @@ class Sketch {
this.canvas.addEventListener('pointermove', this.onHover) this.canvas.addEventListener('pointermove', this.onHover)
this.store.dispatch({ type: 'set-active-sketch', sketch: this.obj3d.name }) this.store.dispatch({ type: 'set-active-sketch', sketch: this.obj3d.name })
window.sketcher = this window.sketcher = this
} }
@ -209,17 +215,21 @@ class Sketch {
deleteSelected() { deleteSelected() {
this.selected
.filter(e => e.userData.type == 'dimension')
.forEach(e => this.constraints.has(e.name) && this.deleteConstraints(e.name))
const toDelete = this.selected
const toDelete = [...this.selected] .filter(e => e.userData.type == 'line')
.filter(e => e.type == 'Line')
.sort((a, b) => b.id - a.id) .sort((a, b) => b.id - a.id)
.map(obj => { .map(obj => {
return this.delete(obj) return this.delete(obj)
}) })
if (toDelete.length) {
this.updatePointsBuffer(toDelete[toDelete.length - 1]) this.updatePointsBuffer(toDelete[toDelete.length - 1])
}
this.updateOtherBuffers() this.updateOtherBuffers()
this.selected = [] this.selected = []
@ -227,6 +237,12 @@ class Sketch {
} }
delete(obj) { delete(obj) {
if (obj.userData.type == 'dimension') {
this.deleteConstraints(obj.name)
return
}
let link = this.linkedObjs.get(obj.userData.l_id) let link = this.linkedObjs.get(obj.userData.l_id)
if (!link) return; if (!link) return;
link = link[1] link = link[1]
@ -252,15 +268,26 @@ class Sketch {
deleteConstraints(c_id) { 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 if (idx == -1) continue
const ob = this.obj3d.children[this.objIdx.get(idx)] const ob = this.obj3d.children[this.objIdx.get(idx)]
if (ob) { if (ob) {
// ob.constraints.delete(c_id)
ob.userData.constraints.splice(ob.userData.constraints.indexOf(c_id), 1) ob.userData.constraints.splice(ob.userData.constraints.indexOf(c_id), 1)
} }
} }
this.constraints.delete(c_id) 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() { updateOtherBuffers() {
@ -315,6 +342,10 @@ class Sketch {
return _vec3 return _vec3
} }
getScreenXY(arr) {
return _vec3.set(...arr).applyMatrix4(this.obj3d.matrix).project(this.camera)
}
solve() { solve() {
const pts_buffer = const pts_buffer =

158
src/sketcher/drawDimension.js
View File

@ -1,19 +1,20 @@
import * as THREE from '../../node_modules/three/src/Three'; import * as THREE from '../../node_modules/three/src/Three';
import { color } from '../utils/shared'
const lineMaterial = new THREE.LineBasicMaterial({ const lineMaterial = new THREE.LineBasicMaterial({
linewidth: 2, linewidth: 2,
color: 0x156289, color: color.dimension,
}) })
const pointMaterial = new THREE.PointsMaterial({ const pointMaterial = new THREE.PointsMaterial({
color: 0x156289, color: color.dimension,
size: 4, size: 4,
}) })
export async function drawDimension() { export async function drawDimension() {
let pts = await this.awaitPts({ p: 2 }) let pts = await this.awaitPts({ point: 2 })
if (pts == null) return; if (pts == null) return;
@ -34,14 +35,21 @@ export async function drawDimension() {
line.userData.nids = pts.map(e => e.name) line.userData.nids = pts.map(e => e.name)
const groupLines = this.obj3d.children[1] 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 onEnd, onKey;
let add = await new Promise((res) => { let add = await new Promise((res) => {
onEnd = (e) => res(true) onEnd = (e) => res(true)
onKey = (e) => e.key == 'Escape' && res(false) onKey = (e) => e.key == 'Escape' && res(false)
@ -54,7 +62,8 @@ export async function drawDimension() {
this.canvas.removeEventListener('pointermove', onMove) this.canvas.removeEventListener('pointermove', onMove)
this.canvas.removeEventListener('pointerdown', onEnd) this.canvas.removeEventListener('pointerdown', onEnd)
window.removeEventListener('keydown', onKey) window.removeEventListener('keydown', onKey)
point.geometry.computeBoundingSphere()
line.geometry.computeBoundingSphere()
if (add) { if (add) {
this.constraints.set(++this.c_id, //??? this.constraints.set(++this.c_id, //???
[ [
@ -68,12 +77,15 @@ export async function drawDimension() {
this.updateOtherBuffers() this.updateOtherBuffers()
line.name = this.c_id line.name = this.c_id
line.userData.type = 'dimension'
point.name = this.c_id point.name = this.c_id
point.userData.type = 'dimension'
} else { } else {
[groupLines.splice(groupLines.length - 1), groupLines.splice(groupLines.length - 2).forEach(
groupPts.splice(groupLines.length - 1)].forEach(
e => { e => {
e.geometry.dispose() e.geometry.dispose()
e.material.dispose() e.material.dispose()
@ -82,28 +94,71 @@ export async function drawDimension() {
sc.render() sc.render()
} }
return 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)) nids = line.userData.nids
p2.set(..._p2.geometry.attributes.position.array.slice(0, 2))
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) => { return (e) => {
loc = this.getLocation(e) loc = this.getLocation(e)
p3.set(loc.x, loc.y) p3.set(loc.x, loc.y)
update(
line.geometry.attributes.position,
point.geometry.attributes.position
)
const linegeom = line.geometry.attributes.position point.userData.offset = hyp.toArray()
const pointgeom = point.geometry.attributes.position
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() dir = p2.clone().sub(p1).normalize()
hyp = p3.clone().sub(p1) hyp = p3.clone().sub(p1)
proj = dir.multiplyScalar(hyp.dot(dir)) proj = dir.multiplyScalar(hyp.dot(dir))
@ -128,69 +183,4 @@ export function _onMoveDimension(_p1, _p2, point, line) {
pointgeom.array.set(p3.toArray()) pointgeom.array.set(p3.toArray())
pointgeom.needsUpdate = true; 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;
}
} }

76
src/utils/mouseEvents.js
View File

@ -13,12 +13,19 @@ export function onHover(e) {
); );
let hoverPts; let hoverPts;
if (this.obj3d.name[0] == 's') { if (this.obj3d.userData.type == 'sketch') {
hoverPts = raycaster.intersectObjects(this.obj3d.children) hoverPts = raycaster.intersectObjects([...this.obj3d.children[1].children, ...this.obj3d.children])
// if (!hoverPts.length) {
// hoverPts = raycaster.intersectObjects(this.obj3d.children)
// }
} else { } else {
hoverPts = raycaster.intersectObjects(this.obj3d.children, true) hoverPts = raycaster.intersectObjects(this.obj3d.children, true)
} }
// if (hoverDim.length) {
// }
let idx = [] let idx = []
if (hoverPts.length) { if (hoverPts.length) {
let minDist = Infinity; let minDist = Infinity;
@ -35,18 +42,13 @@ export function onHover(e) {
if (!idx.length) idx.push(0) if (!idx.length) idx.push(0)
} }
if (idx.length) { if (idx.length) { // after filtering, hovered objs still exists
if (hoverPts[idx[0]].object != this.hovered[0]) { if (hoverPts[idx[0]].object != this.hovered[0]) { // if the previous hovered obj is not the same as current
// const obj = this.hovered[this.hovered.length - 1]
// if (obj && !this.selected.includes(obj)) {
// obj.material.color.set(color[obj.name[0]])
// }
for (let x = 0; x < this.hovered.length; x++) { for (let x = 0; x < this.hovered.length; x++) {
const obj = this.hovered[x] const obj = this.hovered[x]
if (obj && !this.selected.includes(obj)) { 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') // console.log('render1')
this.obj3d.dispatchEvent({ type: 'change' }) this.obj3d.dispatchEvent({ type: 'change' })
} }
} else { } else { // no hovered object after filtering
if (this.hovered.length) { if (this.hovered.length) { // if previously something was hovered, then we need to clear it
// const obj = this.hovered[this.hovered.length - 1]
// if (obj && !this.selected.includes(obj)) {
// obj.material.color.set(color[obj.name[0]])
// }
for (let x = 0; x < this.hovered.length; x++) { for (let x = 0; x < this.hovered.length; x++) {
const obj = this.hovered[x] const obj = this.hovered[x]
// console.log(obj, 'here') // console.log(obj, 'here')
if (!this.selected.includes(obj)) { if (!this.selected.includes(obj)) {
obj.material.color.set(color[obj.name[0]]) obj.material.color.set(color[obj.userData.type])
} }
} }
this.hovered = [] this.hovered = []
@ -84,7 +81,7 @@ export function onHover(e) {
} }
} }
let draggedLabel;
export function onPick(e) { export function onPick(e) {
if (this.mode || e.buttons != 1) return if (this.mode || e.buttons != 1) return
@ -92,14 +89,37 @@ export function onPick(e) {
this.selected.push(this.hovered[this.hovered.length - 1]) this.selected.push(this.hovered[this.hovered.length - 1])
if (this.hovered[0].type == "Points") { switch (this.hovered[0].userData.type) {
this.canvas.addEventListener('pointermove', this.onDrag); 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) 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 { } else {
for (let x = 0; x < this.selected.length; x++) { for (let x = 0; x < this.selected.length; x++) {
const obj = this.selected[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.obj3d.dispatchEvent({ type: 'change' })
this.selected = [] this.selected = []
@ -114,6 +134,7 @@ export function onDrag(e) {
// this.objIdx.get(obj.name) * 3 // this.objIdx.get(obj.name) * 3
// ) // )
for (let x = 0; x < this.hovered.length; x++) { for (let x = 0; x < this.hovered.length; x++) {
const obj = this.hovered[x] const obj = this.hovered[x]
this.ptsBuf.set( this.ptsBuf.set(
@ -129,12 +150,19 @@ export function onDrag(e) {
export function onRelease() { export function onRelease() {
this.canvas.removeEventListener('pointermove', this.onDrag) this.canvas.removeEventListener('pointermove', this.onDrag)
this.canvas.removeEventListener('pointermove', this.onDragDim)
this.canvas.removeEventListener('pointerup', this.onRelease) this.canvas.removeEventListener('pointerup', this.onRelease)
for (let x = 0; x < this.hovered.length; x++) { for (let x = 3; x < this.obj3d.children.length; x++) {
const obj = this.hovered[x] const obj = this.obj3d.children[x]
obj.geometry.computeBoundingSphere() 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;
} }

21
src/utils/shared.js
View File

@ -15,20 +15,21 @@ const color = {
hover: 0x00ff00, hover: 0x00ff00,
lighting: 0xFFFFFF, lighting: 0xFFFFFF,
emissive: 0x072534, emissive: 0x072534,
d: 0xf5bc42, //datums: planes point: 0x555555, //points
p: 0x555555, //points line: 0x555555, //lines
l: 0x555555, //lines mesh: 0x156289, //mesh:
m: 0x156289, //mesh: extrude dimension: 0x891d15, //
plane: 0x891d15, //
} }
const lineMaterial = new THREE.LineBasicMaterial({ const lineMaterial = new THREE.LineBasicMaterial({
linewidth: 2, linewidth: 2,
color: color.l, color: color.line,
}) })
const pointMaterial = new THREE.PointsMaterial({ const pointMaterial = new THREE.PointsMaterial({
color: color.p, color: color.point,
size: 4, size: 4,
}) })
@ -40,7 +41,8 @@ const ptObj = (n) => {
), ),
pointMaterial.clone() pointMaterial.clone()
); );
ret.name = 'p' + nid++ ret.name = "p" + nid++
ret.userData.type = 'point'
return ret return ret
} }
@ -52,6 +54,7 @@ const lineObj = (n = 1) => {
lineMaterial.clone() lineMaterial.clone()
); );
ret.name = 'l' + nid++ ret.name = 'l' + nid++
ret.userData.type = 'line'
return ret return ret
} }
@ -80,7 +83,7 @@ async function awaitPts(...criteria) {
let references = this.selected.slice() let references = this.selected.slice()
for (let ob of references) { for (let ob of references) {
const type = ob.name[0] const type = ob.userData.type
if (counter[type]) { if (counter[type]) {
counter[type] += 1; counter[type] += 1;
} else { } else {
@ -103,7 +106,7 @@ async function awaitPts(...criteria) {
}) })
references.push(pt) references.push(pt)
const type = pt.name[0] const type = pt.userData.type
if (counter[type]) { if (counter[type]) {
counter[type] += 1; counter[type] += 1;
} else { } else {