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

split sketch from sketch

Browse Source
This commit is contained in:
howard 2021-03-31 17:04:14 -07:00
parent 505cd64cb5
commit fb17612e2a
10 changed files with 92 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/Scene.js
View File

@ -26,9 +26,8 @@ const eq = (a1, a2) => {
window.nid = 0
export class Scene extends THREE.Scene {
export class Scene {
constructor(store) {
super()
this.store = store;
this.canvas = document.querySelector('#c');
@ -46,11 +45,12 @@ export class Scene extends THREE.Scene {
controls.target.set(0, 0, 0);
controls.update();
this.sketch = new THREE.Scene()
this.background = new THREE.Color(0x888888);
this.sketch.background = new THREE.Color(0x888888);
const helpersGroup = new THREE.Group();
helpersGroup.name = "helpersGroup";
this.add(helpersGroup);
this.sketch.add(helpersGroup);
const axesHelper = new THREE.AxesHelper(0.4);
helpersGroup.add(axesHelper);
@ -85,13 +85,13 @@ export class Scene extends THREE.Scene {
const intensity = 1;
const light1 = new THREE.DirectionalLight(color.lighting, intensity);
light1.position.set(10, 10, 10);
this.add(light1);
this.sketch.add(light1);
const light2 = new THREE.DirectionalLight(color.lighting, intensity);
light2.position.set(-10, -10, -5);
this.add(light2);
this.sketch.add(light2);
const ambient = new THREE.AmbientLight(color.lighting, intensity);
this.add(ambient);
this.sketch.add(ambient);
@ -101,7 +101,7 @@ export class Scene extends THREE.Scene {
this.onHover = onHover.bind(this);
this.onPick = onPick.bind(this);
this.addEventListener('change', this.render);
this.sketch.addEventListener('change', this.render);
controls.addEventListener('change', this.render);
controls.addEventListener('start', this.render);
window.addEventListener('resize', this.render);
@ -132,7 +132,7 @@ export class Scene extends THREE.Scene {
saveState() {
localStorage.setItem(
'sv', JSON.stringify([id, this.store.getState(), this.children.slice(4)])
'sv', JSON.stringify([id, this.store.getState(), this.sketch.children.slice(4)])
)
}
@ -167,7 +167,7 @@ function render() {
this.camera.right = canvas.clientWidth / canvas.clientHeight;
this.camera.updateProjectionMatrix();
}
this.renderer.render(this, this.camera);
this.renderer.render(this.sketch, this.camera);
this.stats.end();
}
@ -201,16 +201,16 @@ async function addSketch() {
}
}
const sketcher = new Sketcher(this.camera, this.canvas, this.store, nid++)
const sketcher = new Sketcher(this.camera, this.canvas, this.store)
if (references.length == 1 && references[0].name[0] == 'd') {
this.add(sketcher)
sketcher.matrix = references[0].matrix
sketcher.plane.applyMatrix4(sketcher.matrix)
sketcher.inverse = sketcher.matrix.clone().invert()
this.sketch.add(sketcher.sketch)
sketcher.sketch.matrix = references[0].matrix
sketcher.plane.applyMatrix4(sketcher.sketch.matrix)
sketcher.sketch.inverse = sketcher.sketch.matrix.clone().invert()
} else if (references.length == 3) {
this.add(sketcher)
this.sketch.add(sketcher.sketch)
sketcher.align(
...references.map(
el => new Vector3(...el.geometry.attributes.position.array).applyMatrix4(el.matrixWorld)
@ -223,7 +223,7 @@ async function addSketch() {
}
sketcher.activate()
sketcher.addEventListener('change', this.render);
sketcher.sketch.addEventListener('change', this.render);
this.render()
this.store.dispatch({ type: 'rx-sketch', obj: sketcher })

15
src/app.jsx
View File

@ -14,10 +14,6 @@ export const Root = ({ store }) => (
function treeId2Obj(id) {
// return sc.scene.getObjectById(parseInt(id.slice(1)))
return sc.getObjectByName(id)
}
const App = () => {
const dispatch = useDispatch()
@ -44,24 +40,23 @@ const App = () => {
<div className='buttons-group'>
{activeSketch ?
<button onClick={() => treeId2Obj(activeSketch).deactivate()}>
<button onClick={() => activeSketch.deactivate()}>
Exit sketch
</button> :
<button onClick={sc.addSketch}> addsketch </button>
}
<button onClick={() => sc.extrude(treeId2Obj(activeSketch))}> extrude </button>
<button onClick={() => sc.extrude(activeSketch)}> extrude </button>
{/* <button onClick={() => setState('')}> test </button> */}
</div>
<div className='feature-tree'>
{treeEntries.map((entId, idx) => (
{ treeEntries.allIds.map((entId, idx) => (
<div key={idx}
onClick={() => {
console.log('here',treeId2Obj(entId))
if (activeSketch) {
treeId2Obj(activeSketch).deactivate()
activeSketch.deactivate()
}
treeId2Obj(entId).activate()
treeEntries.byId[entId].activate()
}
}
>{entId}</div>

2
src/datums.js
View File

@ -22,7 +22,7 @@ export function add3DPoint(e) {
this.camera
);
// const hoverPts = this.raycaster.intersectObjects(this.scene.children)
// const hoverPts = this.raycaster.intersectObjects(this.sketch.children)
const hoverPts = this.raycaster.intersectObjects(this.sketcher.children)
console.log(hoverPts)

8
src/extrude.js
View File

@ -4,11 +4,13 @@ export function extrude(sketch) {
let constraints = sketch.constraints;
let linkedObjs = sketch.linkedObjs;
let children = sketch.children;
let children = sketch.sketch.children;
let objIdx = sketch.objIdx;
let visited = new Set()
let v2s = []
let offSetPts = []
function findPair(node) {
visited.add(node)
@ -87,8 +89,8 @@ export function extrude(sketch) {
mesh.matrixAutoUpdate = false;
mesh.matrix.multiply(sketch.matrix)
this.add(mesh)
mesh.matrix.multiply(sketch.sketch.matrix)
this.sketch.add(mesh)
this.render()

27
src/index.js
View File

@ -11,16 +11,17 @@ let _entId = 0
function reducer(state = {}, action) {
switch (action.type) {
case 'toggle':
return { ...state, toggle: action.payload }
case 'rx-sketch':
return {
...state, treeEntries: [...state.treeEntries, action.obj.name]
,
...state,
treeEntries: {
byId: { ...state.treeEntries.byId, [action.obj.sketch.name]: action.obj },
allIds: [...state.treeEntries.allIds, action.obj.sketch.name]
}
}
case 'set-active-sketch':
return {
...state, activeSketch: action.sketch.name
...state, activeSketch: action.sketch
}
case 'exit-sketch':
return {
@ -29,11 +30,13 @@ function reducer(state = {}, action) {
case 'rx-extrusion':
return {
...state,
treeEntries: [...state.treeEntries, action.mesh.name]
,
treeEntries: {
byId: { ...state.treeEntries.byId, [action.mesh.name]: action.mesh },
allIds: [...state.treeEntries.allIds, action.mesh.name]
},
mesh2sketch: {
...state.mesh2sketch,
[action.sketch.name]: action.mesh.name
[action.sketch.sketch.name]: action.mesh.name
}
}
case 'restore-state':
@ -47,10 +50,10 @@ function reducer(state = {}, action) {
const preloadedState = {
treeEntries: [
// 's1','m1'
]
,
treeEntries: {
byId: {},
allIds: []
}
}

62
src/sketcher/Sketcher.js
View File

@ -12,28 +12,32 @@ import { replacer, reviver } from '../utils/mapJSONReplacer'
class Sketcher extends THREE.Group {
class Sketcher {
constructor(camera, canvas, store, nid) {
super()
this.name = "s" + nid
this.matrixAutoUpdate = false;
constructor(camera, canvas, store, sketch) {
if (sketch === undefined) {
this.sketch = new THREE.Group()
this.sketch.name = "s" + nid++
this.sketch.matrixAutoUpdate = false;
} else {
this.sketch = sketch
}
this.camera = camera;
this.canvas = canvas;
this.store = store;
this.sub = new THREE.Group();
this.add(this.sub);
this.sketch.add(this.sub);
const axesHelper = new THREE.AxesHelper(2);
this.sub.add(axesHelper);
this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
// [0]:x, [1]:y, [2]:z
this.objIdx = new Map()
this.ptsBuf = new Float32Array(this.max_pts * 3).fill(NaN)
@ -99,16 +103,16 @@ class Sketcher extends THREE.Group {
te[1] = _x.y; te[5] = _y.y; te[9] = _z.y;
te[2] = _x.z; te[6] = _y.z; te[10] = _z.z;
this.quaternion.setFromRotationMatrix(_m1);
const parent = this.parent;
this.sketch.quaternion.setFromRotationMatrix(_m1);
const parent = this.sketch.parent;
_m1.extractRotation(parent.matrixWorld);
_q1.setFromRotationMatrix(_m1);
this.quaternion.premultiply(_q1.invert());
this.updateMatrix();
this.matrix.setPosition(origin)
this.sketch.quaternion.premultiply(_q1.invert());
this.sketch.updateMatrix();
this.sketch.matrix.setPosition(origin)
this.plane.applyMatrix4(this.matrix)
this.inverse = this.matrix.clone().invert()
this.plane.applyMatrix4(this.sketch.matrix)
this.sketch.inverse = this.sketch.matrix.clone().invert()
}
@ -169,7 +173,7 @@ class Sketcher extends THREE.Group {
this.updateOtherBuffers()
this.selected = []
this.dispatchEvent({ type: 'change' })
this.sketch.dispatchEvent({ type: 'change' })
}
delete(obj) {
@ -180,7 +184,7 @@ class Sketcher extends THREE.Group {
let i = this.objIdx.get(link[0]) || this.updatePoint // hacky, see drawEvent.js for updatePoint def
for (let j = 0; j < link.length; j++) {
const obj = this.children[i + j]
const obj = this.sketch.children[i + j]
obj.geometry.dispose()
obj.material.dispose()
@ -189,7 +193,7 @@ class Sketcher extends THREE.Group {
}
}
this.children.splice(i, link.length)
this.sketch.children.splice(i, link.length)
this.linkedObjs.delete(obj.userData.l_id)
@ -200,7 +204,7 @@ class Sketcher extends THREE.Group {
deleteConstraints(c_id) {
for (let idx of this.constraints.get(c_id)[2]) { //////////
if (idx == -1) continue
const ob = this.children[this.objIdx.get(idx)]
const ob = this.sketch.children[this.objIdx.get(idx)]
if (ob) {
// ob.constraints.delete(c_id)
ob.userData.constraints.splice(ob.userData.constraints.indexOf(c_id), 1)
@ -238,8 +242,8 @@ class Sketcher extends THREE.Group {
updatePointsBuffer(startingIdx = 0) {
for (let i = startingIdx; i < this.children.length; i++) {
const obj = this.children[i]
for (let i = startingIdx; i < this.sketch.children.length; i++) {
const obj = this.sketch.children[i]
this.objIdx.set(obj.name, i)
if (obj.type == "Points") {
this.ptsBuf.set(obj.geometry.attributes.position.array, 3 * i)
@ -256,7 +260,7 @@ class Sketcher extends THREE.Group {
this.camera
);
raycaster.ray.intersectPlane(this.plane, _vec3).applyMatrix4(this.inverse)
raycaster.ray.intersectPlane(this.plane, _vec3).applyMatrix4(this.sketch.inverse)
return _vec3.toArray()
}
@ -276,7 +280,7 @@ class Sketcher extends THREE.Group {
Module.HEAPF32.set(this.linksBuf, links_buffer >> 2)
Module["_solver"](
this.children.length, pts_buffer,
this.sketch.children.length, pts_buffer,
this.constraints.size, constraints_buffer,
this.linkedObjs.size, links_buffer)
@ -286,9 +290,9 @@ class Sketcher extends THREE.Group {
- we also sneak in updating lines children as well, by checking when ptsBuf[ptr] is NaN
*/
for (let i = 1, ptr = (pts_buffer >> 2) + 3; i < this.children.length; i += 1, ptr += 3) {
for (let i = 1, ptr = (pts_buffer >> 2) + 3; i < this.sketch.children.length; i += 1, ptr += 3) {
const pos = this.children[i].geometry.attributes.position;
const pos = this.sketch.children[i].geometry.attributes.position;
if (isNaN(Module.HEAPF32[ptr])) {
pos.array[0] = Module.HEAPF32[ptr - 6]
pos.array[1] = Module.HEAPF32[ptr - 5]
@ -312,7 +316,7 @@ class Sketcher extends THREE.Group {
*/
for (let [k, obj] of this.linkedObjs) {
if (obj[0] != 'arc') continue;
const [p1, p2, c, arc] = obj[1].map(e => this.children[this.objIdx.get(e)])
const [p1, p2, c, arc] = obj[1].map(e => this.sketch.children[this.objIdx.get(e)])
const points = get3PtArc(
p1.geometry.attributes.position.array,
@ -325,14 +329,16 @@ class Sketcher extends THREE.Group {
}
this.dispatchEvent({ type: 'change' })
this.sketch.dispatchEvent({ type: 'change' })
}
toJSON() {
this.userData = {
constraints: JSON.stringify(this.constraints, replacer),
linkedObjs: JSON.stringify(this.linkedObjs, replacer),
objIdx: JSON.stringify(this.objIdx, replacer)
objIdx: JSON.stringify(this.objIdx, replacer),
c_id: this.c_id,
l_id: this.l_id
}
return super.toJSON()
}

2
src/sketcher/constraintEvents.js
View File

@ -48,5 +48,5 @@ export function setCoincident() {
obj.material.color.set(0x555555)
}
this.selected = []
this.dispatchEvent({ type: 'change' })
this.sketch.dispatchEvent({ type: 'change' })
}

10
src/sketcher/drawEvents.js
View File

@ -13,8 +13,8 @@ export function drawOnClick1(e) {
this.toPush = sketchArc(mouseLoc)
}
this.updatePoint = this.children.length
this.add(...this.toPush)
this.updatePoint = this.sketch.children.length
this.sketch.add(...this.toPush)
this.linkedObjs.set(this.l_id, [this.mode, this.toPush.map(e=>e.name)])
for (let obj of this.toPush) {
@ -36,7 +36,7 @@ export function drawPreClick2(e) {
sketchArc2(mouseLoc, this.toPush)
}
this.dispatchEvent({ type: 'change' })
this.sketch.dispatchEvent({ type: 'change' })
}
export function drawOnClick2(e) {
@ -65,9 +65,9 @@ export function drawClear() {
this.canvas.removeEventListener('pointermove', this.drawPreClick2);
this.canvas.removeEventListener('pointerdown', this.drawOnClick2);
this.delete(this.children[this.updatePoint])
this.delete(this.sketch.children[this.updatePoint])
this.dispatchEvent({ type: 'change' })
this.sketch.dispatchEvent({ type: 'change' })
this.subsequent = false
}
}

4
src/sketcher/sketchLine.js
View File

@ -26,12 +26,12 @@ export function sketchLine(mouseLoc) {
this.constraints.set(++this.c_id,
[
'coincident', -1,
[this.children[this.children.length - 2].name, p1.name, -1, -1]
[this.sketch.children[this.sketch.children.length - 2].name, p1.name, -1, -1]
]
)
p1.userData.constraints.push(this.c_id)
this.children[this.children.length - 2].userData.constraints.push(this.c_id)
this.sketch.children[this.sketch.children.length - 2].userData.constraints.push(this.c_id)
}

14
src/utils/mouseEvents.js
View File

@ -13,10 +13,10 @@ export function onHover(e) {
);
let hoverPts;
if (this.name[0]=='s') {
hoverPts = raycaster.intersectObjects(this.children)
if (this.sketch.name[0]=='s') {
hoverPts = raycaster.intersectObjects(this.sketch.children)
} else {
hoverPts = raycaster.intersectObjects(this.children, true)
hoverPts = raycaster.intersectObjects(this.sketch.children, true)
}
let idx = []
@ -51,7 +51,7 @@ export function onHover(e) {
this.hovered[this.hovered.length - 1].material.color.set(color.hover)
// console.log('render1')
this.dispatchEvent({ type: 'change' })
this.sketch.dispatchEvent({ type: 'change' })
}
} else {
if (this.hovered.length) {
@ -63,7 +63,7 @@ export function onHover(e) {
this.hovered = []
// console.log('render2')
this.dispatchEvent({ type: 'change' })
this.sketch.dispatchEvent({ type: 'change' })
}
}
}
@ -85,7 +85,7 @@ export function onPick(e) {
// obj.material.color.set(0x555555)
obj.material.color.set(color[obj.name[0]])
}
this.dispatchEvent({ type: 'change' })
this.sketch.dispatchEvent({ type: 'change' })
this.selected = []
}
}
@ -102,7 +102,7 @@ export function onDrag(e) {
}
this.solve()
this.dispatchEvent({ type: 'change' })
this.sketch.dispatchEvent({ type: 'change' })
}