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

clean up hovering

master
howard 2021-04-14 19:11:55 -07:00
parent 33f1a20281
commit bdf1871b44
5 changed files with 121 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/Scene.js
View File

@ -7,8 +7,8 @@ import { Sketch } from './Sketch'
import Stats from '../lib/stats.module.js';
import { extrude } from './extrude'
import { onHover, onPick, setHover } from './mouseEvents';
import { _vec2, _vec3, color, awaitSelection, ptObj } from './shared'
import { onHover, onPick } from './mouseEvents';
import { _vec2, _vec3, color, awaitSelection, ptObj, setHover } from './shared'
import { AxesHelper } from './axes'
@ -70,9 +70,9 @@ export class Scene {
freePt.visible = false
freePt.depthTest = false
freePt.userData.type = 'selpoint'
helpersGroup.add(freePt);
}
this.selpoints = this.obj3d.children[0].children
this.fptIdx = 0;
this.fptObj = {}
@ -196,27 +196,20 @@ export class Scene {
clearSelection() {
for (let x = 0, obj; x < this.selected.length; x++) {
obj = this.selected[x]
if (obj.userData.type == 'sketch') continue
if (obj.userData.type == 'plane') {
obj.material.opacity = 0.05
obj.children[0].material.color.set(color['planeBorder'])
if (obj.userData.type == 'selpoint') {
obj.visible = false
} else {
obj.material.color.set(color[obj.userData.type])
setHover(obj, 0)
}
if (obj.userData.type == 'selpoint') obj.visible = false
}
this.selected = []
for (let x = 0; x < this.hovered.length; x++) {
const obj = this.hovered[x]
obj.material.color.set(color[obj.userData.type])
if (obj.userData.type == 'plane') {
obj.material.opacity = 0.05
obj.children[0].material.color.set(color['planeBorder'])
} else {
obj.material.color.set(color[obj.userData.type])
}
setHover(obj, 0)
}
}
@ -370,7 +363,7 @@ async function addSketch() {
}
window.sc = new Scene(store)
// sc.loadState()
sc.loadState()
// sc.camera.layers.enable(1)
// rc.layers.set(1)

5
src/Sketch.js
View File

@ -2,10 +2,10 @@
import * as THREE from '../node_modules/three/src/Three';
import { _vec2, _vec3, raycaster, awaitSelection, ptObj } from './shared'
import { _vec2, _vec3, raycaster, awaitSelection, ptObj, setHover } from './shared'
import { drawOnClick1, drawOnClick2, drawPreClick2, drawOnClick3, drawPreClick3, drawClear, drawPoint } from './drawEvents'
import { onHover, onDrag, onPick, onRelease } from './mouseEvents'
import { onHover, onDrag, onPick, onRelease} from './mouseEvents'
import { setCoincident, setOrdinate, setTangent } from './constraintEvents'
import { get3PtArc } from './drawArc'
import { replacer, reviver } from './utils'
@ -143,6 +143,7 @@ class Sketch {
this.onRelease = onRelease.bind(this);
this.onKeyPress = this.onKeyPress.bind(this);
this.setHover = setHover.bind(this);
}

114
src/mouseEvents.js
View File

@ -1,5 +1,5 @@
import * as THREE from '../node_modules/three/src/Three';
import { raycaster, color, hoverColor } from './shared';
import { raycaster, setHover } from './shared';
import { onDimMoveEnd } from './drawDimension'
let ptLoc
@ -18,7 +18,7 @@ export function onHover(e) {
let hoverPts;
if (this.obj3d.userData.type != 'sketch') {
this.obj3d.children[0].children[0].visible = false // hide selpoint[0] before each redraw
this.selpoints[0].visible = false // hide selpoint[0] before each redraw
raycaster.layers.set(1)
hoverPts = raycaster.intersectObjects(this.obj3d.children, true)
} else {
@ -75,12 +75,10 @@ export function onHover(e) {
3 * hoverPts[idx[x]].index,
3 * hoverPts[idx[x]].index + 3
)
// const pp = this.obj3d.children[0].children[this.fptIdx % 3]
const pp = this.obj3d.children[0].children[0]
pp.geometry.attributes.position.array.set(ptLoc)
pp.matrix = obj.parent.matrix
pp.geometry.attributes.position.needsUpdate = true
pp.visible = true
this.selpoints[0].geometry.attributes.position.array.set(ptLoc)
this.selpoints[0].matrix = obj.parent.matrix
this.selpoints[0].geometry.attributes.position.needsUpdate = true
this.selpoints[0].visible = true
obj = hoverPts[idx[x]].index
}
@ -120,30 +118,49 @@ export function onPick(e) {
if (this.hovered.length) {
let obj = this.hovered[this.hovered.length - 1]
// if (sc.selected.includes(obj3d)) continue
if (typeof obj != 'object') {
const pp = this.selpoints[this.fptIdx % 3 + 1]
const p0 = this.selpoints[0]
pp.geometry.attributes.position.array.set(p0.geometry.attributes.position.array)
pp.matrix = p0.matrix
pp.geometry.attributes.position.needsUpdate = true
pp.visible = true
obj = pp
this.fptIdx++
if (this.obj3d.userData.type == 'sketch') {
this.selected.push(obj)
} else {
if (typeof obj == 'object') {
setHover(obj, 1)
const idx = this.selected.indexOf(obj)
if (idx == -1) {
this.selected.push(
obj
)
} else {
const pp = this.obj3d.children[0].children[this.fptIdx % 3 + 1]
const p0 = this.obj3d.children[0].children[0]
pp.geometry.attributes.position.array.set(p0.geometry.attributes.position.array)
pp.matrix = p0.matrix
pp.geometry.attributes.position.needsUpdate = true
pp.visible = true
obj = pp
this.fptObj[obj] = this.fptIdx
this.fptIdx++
this.selected.splice(idx, 1, obj)
}
this.obj3d.dispatchEvent({ type: 'change' })
this.selected.push(obj)
} else {
const idx = this.selected.indexOf(obj)
if (idx == -1) {
this.selected.push(
obj
)
this.setHover(obj, 1)
} else {
this.setHover(this.selected[idx], 0)
this.selected.splice(idx, 1)
}
}
this.obj3d.dispatchEvent({ type: 'change' })
if (this.obj3d.userData.type != 'sketch') {
return;
}
@ -157,7 +174,6 @@ export function onPick(e) {
)
this.canvas.addEventListener('pointermove', this.onDragDim);
this.canvas.addEventListener('pointerup', () => {
console.log('heree')
onDimMoveEnd(this.obj3d.children[1].children[idx])
this.onRelease()
})
@ -215,47 +231,7 @@ export function onDrag(e) {
}
export function setHover(obj, state, meshHover = true) {
let colObj, visible
if (state == 1) {
colObj = hoverColor
visible = true
} else {
colObj = color
visible = false
}
switch (obj.userData.type) {
case 'plane':
obj.material.opacity = colObj.opacity
obj.children[0].material.color.set(colObj['planeBorder'])
break;
case 'sketch':
obj.visible = visible
break;
case 'mesh':
if (meshHover) {
obj.material.emissive.set(colObj.emissive)
} else {
break
}
default:
obj.material.color.set(colObj[obj.userData.type])
break;
}
// if (obj.userData.type == 'plane') {
// obj.material.opacity = colObj.opacity
// obj.children[0].material.color.set(colObj['planeBorder'])
// } else if (obj.userData.type != 'mesh') {
// obj.material.color.set(colObj[obj.userData.type])
// } else if (meshHover) {
// obj.material.emissive.set(colObj.emissive)
// obj.material.color.set(colObj[obj.userData.type])
// }
}
export function onRelease() {
this.canvas.removeEventListener('pointermove', this.onDrag)

23
src/react/tree.jsx
View File

@ -54,6 +54,7 @@ const TreeEntry = ({ entId }) => {
sketch.activate()
sc.clearSelection()
sc.activeSketch = sketch;
sc.render()
}
}}
@ -63,18 +64,32 @@ const TreeEntry = ({ entId }) => {
sc.render()
}}
onPointerLeave={() => {
if (visible & obj3d.userData.type == 'sketch') return
// if (visible & obj3d.userData.type == 'sketch') return
if (sc.selected.includes(obj3d) || sc.activeSketch && sc.activeSketch.name == obj3d.name) return
sc.setHover(obj3d, 0)
sc.render()
}}
onClick={() => {
// if (obj3d.userData.type == 'mesh') {
// console.log(obj3d, sc.selected)
const idx = sc.selected.indexOf(obj3d)
if (idx == -1) {
sc.selected.push(
obj3d
)
sc.render()
sc.setHover(obj3d, 1)
} else {
sc.setHover(sc.selected[idx], 0)
sc.selected.splice(idx, 1)
}
// sc.selected.push(
// obj3d
// )
// }
sc.render()
}}
>
<Icon className='h-full w-auto p-1.5' />
@ -97,7 +112,7 @@ const TreeEntry = ({ entId }) => {
onClick={(e) => {
e.stopPropagation()
console.log('hide')
dispatch({ type: "set-entry-visibility", obj: {[entId]:false} })
dispatch({ type: "set-entry-visibility", obj: { [entId]: false } })
obj3d.visible = false;
if (obj3d.userData.type == 'mesh') {
obj3d.traverse((e) => e.layers.disable(1))
@ -113,7 +128,7 @@ const TreeEntry = ({ entId }) => {
e.stopPropagation()
console.log('show')
obj3d.visible = true;
dispatch({ type: "set-entry-visibility", obj: {[entId]:true} })
dispatch({ type: "set-entry-visibility", obj: { [entId]: true } })
if (obj3d.userData.type == 'mesh') {
obj3d.traverse((e) => {
e.layers.enable(1)

55
src/shared.js
View File

@ -17,14 +17,14 @@ const color = {
emissive: 0x072534,
meshTempHover: 0x9DCFED,
point: 0xffffff,
selpoint: 0xff0000,
line: 0xffffff,
mesh: 0x9DCFED,
dimension: 0x0000ff,
point: 0xffffff,
selpoint: 0xff0000,
line: 0xffffff,
mesh: 0x9DCFED,
dimension: 0x0000ff,
plane: 0xffff00,
planeBorder: 0x2e2e00,
plane: 0xffff00,
planeBorder: 0x2e2e00,
opacity: 0.02
}
@ -32,11 +32,11 @@ const hoverColor = {
emissive: 0x343407,
point: 0x00ff00,
selpoint: 0xff0000,
line: 0x00ff00,
mesh: 0xFAB601,
dimension: 0x00ff00,
line: 0x00ff00,
mesh: 0xFAB601,
dimension: 0x00ff00,
plane: 0xffff00,
plane: 0xffff00,
planeBorder: 0x919100,
opacity: 0.06
}
@ -148,7 +148,38 @@ async function awaitSelection(...criteria) {
return null
}
function setHover(obj, state, meshHover = true) {
let colObj = state == 1 ? hoverColor : color
switch (obj.userData.type) {
case 'plane':
obj.material.opacity = colObj.opacity
obj.children[0].material.color.set(colObj['planeBorder'])
break;
case 'sketch':
obj.traverse(ele => {
if (ele.userData.type == 'line') {
ele.material.color.set(colObj['line'])
}
})
break;
case 'mesh':
if (meshHover) {
obj.material.emissive.set(colObj.emissive)
} else {
break
}
default:
obj.material.color.set(colObj[obj.userData.type])
break;
}
}
window.rc = raycaster
export { lineMaterial, pointMaterial, _vec2, _vec3, raycaster, color, hoverColor, ptObj, lineObj, awaitSelection }
export { lineMaterial, pointMaterial, _vec2, _vec3, raycaster, color, hoverColor, ptObj, lineObj, awaitSelection, setHover }