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

View File

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

View File

@ -2,10 +2,10 @@
import * as THREE from '../node_modules/three/src/Three'; 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 { 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 { setCoincident, setOrdinate, setTangent } from './constraintEvents'
import { get3PtArc } from './drawArc' import { get3PtArc } from './drawArc'
import { replacer, reviver } from './utils' import { replacer, reviver } from './utils'
@ -143,6 +143,7 @@ class Sketch {
this.onRelease = onRelease.bind(this); this.onRelease = onRelease.bind(this);
this.onKeyPress = this.onKeyPress.bind(this); this.onKeyPress = this.onKeyPress.bind(this);
this.setHover = setHover.bind(this);
} }

View File

@ -1,5 +1,5 @@
import * as THREE from '../node_modules/three/src/Three'; import * as THREE from '../node_modules/three/src/Three';
import { raycaster, color, hoverColor } from './shared'; import { raycaster, setHover } from './shared';
import { onDimMoveEnd } from './drawDimension' import { onDimMoveEnd } from './drawDimension'
let ptLoc let ptLoc
@ -18,7 +18,7 @@ export function onHover(e) {
let hoverPts; let hoverPts;
if (this.obj3d.userData.type != 'sketch') { 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) raycaster.layers.set(1)
hoverPts = raycaster.intersectObjects(this.obj3d.children, true) hoverPts = raycaster.intersectObjects(this.obj3d.children, true)
} else { } else {
@ -75,12 +75,10 @@ export function onHover(e) {
3 * hoverPts[idx[x]].index, 3 * hoverPts[idx[x]].index,
3 * hoverPts[idx[x]].index + 3 3 * hoverPts[idx[x]].index + 3
) )
// const pp = this.obj3d.children[0].children[this.fptIdx % 3] this.selpoints[0].geometry.attributes.position.array.set(ptLoc)
const pp = this.obj3d.children[0].children[0] this.selpoints[0].matrix = obj.parent.matrix
pp.geometry.attributes.position.array.set(ptLoc) this.selpoints[0].geometry.attributes.position.needsUpdate = true
pp.matrix = obj.parent.matrix this.selpoints[0].visible = true
pp.geometry.attributes.position.needsUpdate = true
pp.visible = true
obj = hoverPts[idx[x]].index obj = hoverPts[idx[x]].index
} }
@ -120,30 +118,49 @@ export function onPick(e) {
if (this.hovered.length) { if (this.hovered.length) {
let obj = this.hovered[this.hovered.length - 1] 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') { const idx = this.selected.indexOf(obj)
this.selected.push(obj) if (idx == -1) {
} else { this.selected.push(
if (typeof obj == 'object') { obj
)
setHover(obj, 1)
} else { } else {
const pp = this.obj3d.children[0].children[this.fptIdx % 3 + 1] this.selected.splice(idx, 1, obj)
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.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; return;
} }
@ -157,7 +174,6 @@ export function onPick(e) {
) )
this.canvas.addEventListener('pointermove', this.onDragDim); this.canvas.addEventListener('pointermove', this.onDragDim);
this.canvas.addEventListener('pointerup', () => { this.canvas.addEventListener('pointerup', () => {
console.log('heree')
onDimMoveEnd(this.obj3d.children[1].children[idx]) onDimMoveEnd(this.obj3d.children[1].children[idx])
this.onRelease() 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() { export function onRelease() {
this.canvas.removeEventListener('pointermove', this.onDrag) this.canvas.removeEventListener('pointermove', this.onDrag)

View File

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

View File

@ -148,7 +148,38 @@ async function awaitSelection(...criteria) {
return null 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 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 }