From cbe34ab4c339181d0a9a49a10edf8d5badd4c299 Mon Sep 17 00:00:00 2001 From: howard Date: Sun, 28 Mar 2021 05:00:31 -0700 Subject: [PATCH] working 3pt plane --- dist/index.html | 4 +- package-lock.json | 31 +++++ package.json | 3 +- src/Renderer.js | 194 +++++++++++++++++++++++++++++++ src/app.jsx | 21 +++- src/app.scss | 7 +- src/datums.js | 74 ++++++++++++ src/index.js | 111 ++---------------- src/sketcher/Sketcher.js | 120 ++++++++++++------- src/sketcher/drawEvents.js | 6 +- src/sketcher/extrude.js | 43 +++++-- src/sketcher/pickEvents.js | 41 ++++--- src/sketcher/sketchArc.js | 3 +- src/sketcher/sketchLine.js | 4 +- src/utils.js | 0 src/{ => utils}/OrbitControls.js | 2 +- src/{ => utils}/stats.module.js | 0 src/{ => utils}/trackball.js | 5 +- 18 files changed, 483 insertions(+), 186 deletions(-) create mode 100644 src/Renderer.js create mode 100644 src/datums.js delete mode 100644 src/utils.js rename src/{ => utils}/OrbitControls.js (99%) rename src/{ => utils}/stats.module.js (100%) rename src/{ => utils}/trackball.js (99%) diff --git a/dist/index.html b/dist/index.html index 1ab0c76..b291631 100644 --- a/dist/index.html +++ b/dist/index.html @@ -30,9 +30,7 @@ display: block; } - #react { - position: absolute; - } + diff --git a/package-lock.json b/package-lock.json index 46c54cf..8aa7238 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "react-dom": "^17.0.2", "react-redux": "^7.2.3", "redux": "^4.0.5", + "redux-logger": "^3.0.6", "sass": "^1.32.8", "sass-loader": "^11.0.1", "stats-js": "^1.0.1", @@ -1841,6 +1842,12 @@ "node": ">=0.10" } }, + "node_modules/deep-diff": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz", + "integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ=", + "dev": true + }, "node_modules/deep-equal": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz", @@ -5090,6 +5097,15 @@ "symbol-observable": "^1.2.0" } }, + "node_modules/redux-logger": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz", + "integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=", + "dev": true, + "dependencies": { + "deep-diff": "^0.3.5" + } + }, "node_modules/regenerator-runtime": { "version": "0.13.7", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz", @@ -9065,6 +9081,12 @@ "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", "dev": true }, + "deep-diff": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz", + "integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ=", + "dev": true + }, "deep-equal": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz", @@ -11599,6 +11621,15 @@ "symbol-observable": "^1.2.0" } }, + "redux-logger": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz", + "integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=", + "dev": true, + "requires": { + "deep-diff": "^0.3.5" + } + }, "regenerator-runtime": { "version": "0.13.7", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz", diff --git a/package.json b/package.json index 4bae82e..889fead 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "start": "webpack serve --config webpack.dev.js", "build": "webpack --config webpack.prod.js", "get-bundle-size": "webpack --profile --json > stats.json --config webpack.prod.js && webpack-bundle-analyzer stats.json dist/", - "deploy": "webpack --config webpack.prod.js && gh-pages -d dist -t true" + "deploy": "webpack --config webpack.prod.js && gh-pages -d dist -t true -m" }, "devDependencies": { "@babel/preset-react": "^7.12.13", @@ -14,6 +14,7 @@ "react-dom": "^17.0.2", "react-redux": "^7.2.3", "redux": "^4.0.5", + "redux-logger": "^3.0.6", "sass": "^1.32.8", "sass-loader": "^11.0.1", "stats-js": "^1.0.1", diff --git a/src/Renderer.js b/src/Renderer.js new file mode 100644 index 0000000..5c496c4 --- /dev/null +++ b/src/Renderer.js @@ -0,0 +1,194 @@ + + + +import * as THREE from 'three/src/Three'; +// import { OrbitControls } from './utils/OrbitControls' +import { TrackballControls } from './utils/trackball' +import { Sketcher } from './sketcher/Sketcher' +import Stats from './utils/stats.module.js'; + +import { add3DPoint } from './datums' + + +export function Renderer(store) { + this.store = store + this.stats = new Stats(); + this.stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom + document.getElementById('stats').appendChild(this.stats.dom); + + this.canvas = document.querySelector('#c'); + this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas }); + + this.scene = new THREE.Scene(); + this.raycaster = new THREE.Raycaster(); + + window.scene = this.scene; + this.scene.background = new THREE.Color(0xb0b0b0); + + const helpersGroup = new THREE.Group(); + helpersGroup.name= "helpersGroup" + this.scene.add(helpersGroup); + const axesHelper = new THREE.AxesHelper(5); + helpersGroup.add(axesHelper); + + const size = 1; + const near = 0; + const far = 100; + this.camera = new THREE.OrthographicCamera(-size, size, size, -size, near, far); + this.camera.zoom = 0.1; + this.camera.position.set(0, 0, 50); + + // const controls = new OrbitControls(camera, view1Elem); + const controls = new TrackballControls(this.camera, this.canvas); + controls.target.set(0, 0, 0); + controls.update() + + + + const color = 0xFFFFFF; + const intensity = 1; + const light1 = new THREE.DirectionalLight(color, intensity); + light1.position.set(10, 10, 10); + this.scene.add(light1); + + const light2 = new THREE.DirectionalLight(color, intensity); + light2.position.set(-10, -10, -5); + this.scene.add(light2); + const ambient = new THREE.AmbientLight(color, intensity); + this.scene.add(ambient); + + + + + // this.defaultPlanes = [ + // new THREE.Plane(new THREE.Vector3(0, 0, 1), 0), + // new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), + // new THREE.Plane(new THREE.Vector3(1, 0, 0), 0), + // ] + + // this.defaultPlanes.forEach(pl => { + // const helper = new THREE.PlaneHelper(pl, 10, 0xffffff) + // this.scene.add(helper); + // }) + + + + + + + + + const unsubscribe = store.subscribe(handleChange.bind(this)) + + let state; + function handleChange() { + let prevState = state + state = store.getState() + + // if (prevState.sketches.length < state.sketches.length) { + + + // } + + // if (state.toggle) { + // window.addEventListener('keydown', this.sketcher.onKeyPress) + // canvas.addEventListener('pointerdown', this.sketcher.onPick) + // canvas.addEventListener('pointermove', this.sketcher.onHover) + // canvas.removeEventListener('pointerdown', this.add3DPoint) + // } else { + // window.removeEventListener('keydown', this.sketcher.onKeyPress) + // canvas.removeEventListener('pointerdown', this.sketcher.onPick) + // canvas.removeEventListener('pointermove', this.sketcher.onHover) + // canvas.addEventListener('pointerdown', this.add3DPoint) + // } + + } + + + + this.hovered = [] + this.selected = new Set() + + this.render = render.bind(this) + this.resizeCanvas = resizeCanvas.bind(this) + this.addSketch = addSketch.bind(this) + // this.waitPoint = waitPoint.bind(this) + + controls.addEventListener('change', this.render); + controls.addEventListener('start', this.render); + window.addEventListener('resize', this.render); + this.render() +} + +function render() { + this.stats.begin(); + if (this.resizeCanvas(this.renderer)) { + const canvas = this.renderer.domElement; + this.camera.left = -canvas.clientWidth / canvas.clientHeight; + this.camera.right = canvas.clientWidth / canvas.clientHeight; + this.camera.updateProjectionMatrix(); + } + this.renderer.render(scene, this.camera); + this.stats.end(); +} + +function resizeCanvas(renderer) { + const canvas = renderer.domElement; + const width = canvas.clientWidth; + const height = canvas.clientHeight; + const needResize = canvas.width !== width || canvas.height !== height; + if (needResize) { + renderer.setSize(width, height, false); + } + return needResize; +} + + +async function addSketch() { + + const result = [] + for (let i = 0; i < 3; i++) { + const pt = await new Promise((res, rej) => { + this.canvas.addEventListener('pointerdown', (e) => res(getPoint(e, this.camera)), { once: true }) + }) + result.push(pt) + } + + const sketcher = new Sketcher(this.camera, this.canvas, this.store) + this.scene.add(sketcher) + + sketcher.align(...result) + + + + window.addEventListener('keydown', sketcher.onKeyPress) + this.canvas.addEventListener('pointerdown', sketcher.onPick) + this.canvas.addEventListener('pointermove', sketcher.onHover) + + sketcher.addEventListener('change', this.render); + + // window.sketcher = sketcher + + this.store.dispatch({ type: 'rx-new-sketch', idx: this.scene.children.length - 1 }) + +} + +async function down2() { + const result = [] + for (let i = 0; i < 3; i++) { + const pt = await new Promise((res, rej) => { + this.canvas.addEventListener('pointermove', (e) => res(getPoint(e, this.camera)), { once: true }) + }) + result.push(pt) + } +} + + + +function getPoint(e, camera) { + const mouse = new THREE.Vector2( + (e.clientX / window.innerWidth) * 2 - 1, + - (e.clientY / window.innerHeight) * 2 + 1 + ) + return new THREE.Vector3(mouse.x, mouse.y, 0).unproject(camera) +} \ No newline at end of file diff --git a/src/app.jsx b/src/app.jsx index 815180b..7db1857 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,19 +1,32 @@ import React from 'react'; -import { Provider } from 'react-redux'; import './app.scss' +import { Provider, useDispatch, useSelector } from 'react-redux' +import { renderInst } from './index' + export const Root = ({ store }) => ( ); - const App = () => { + const dispatch = useDispatch() + const sketches = useSelector(state => state.sketches) return <> -
in the world where
+ + + + +
+ {sketches.map((e, idx) => ( +
{e}
+ ))} +
+ -} \ No newline at end of file +} + diff --git a/src/app.scss b/src/app.scss index a11d119..24d9503 100644 --- a/src/app.scss +++ b/src/app.scss @@ -1,4 +1,9 @@ -div { + +#react { + position: absolute; +} + +.feature-tree { color: red; position: absolute; right:0; diff --git a/src/datums.js b/src/datums.js new file mode 100644 index 0000000..d103649 --- /dev/null +++ b/src/datums.js @@ -0,0 +1,74 @@ +import * as THREE from '../node_modules/three/src/Three'; + + + + +export function add3DPoint(e) { + + // const mouse = new THREE.Vector2( + // (e.clientX / window.innerWidth) * 2 - 1, + // - (e.clientY / window.innerHeight) * 2 + 1 + // ) + + // console.log(new THREE.Vector3(mouse.x, mouse.y, 0).unproject(this.camera)) + + // this.raycaster.ray.intersectPlane(this.plane, this.target).applyMatrix4(this.inverse) + + this.raycaster.setFromCamera( + new THREE.Vector2( + (e.clientX / window.innerWidth) * 2 - 1, + - (e.clientY / window.innerHeight) * 2 + 1 + ), + this.camera + ); + + // const hoverPts = this.raycaster.intersectObjects(this.scene.children) + const hoverPts = this.raycaster.intersectObjects(this.sketcher.children) + + console.log(hoverPts) + + let idx = [] + if (hoverPts.length) { + let minDist = Infinity; + for (let i = 0; i < hoverPts.length; i++) { + if (!hoverPts[i].distanceToRay) continue; + if (hoverPts[i].distanceToRay < minDist) { + minDist = hoverPts[i].distanceToRay + idx = [i] + } else if (hoverPts[i].distanceToRay == minDist) { + idx.push(i) + } + } + if (!idx.length) idx.push(0) + } + + if (idx.length) { + if (hoverPts[idx[0]].object != this.hovered[0]) { + + for (let ob of this.hovered) { + if (ob && !this.selected.has(ob)) { + ob.material.color.set(0x555555) + } + } + this.hovered = [] + + for (let i of idx) { + hoverPts[i].object.material.color.set(0x00FFFF) + this.hovered.push(hoverPts[i].object) + } + // console.log('render1') + this.render() + } + } else { + if (this.hovered.length) { + for (let ob of this.hovered) { + if (ob && !this.selected.has(ob)) { + ob.material.color.set(0x555555) + } + } + this.hovered = [] + // console.log('render2') + this.render() + } + } +} diff --git a/src/index.js b/src/index.js index f2e8701..942517f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,124 +1,35 @@ - -import * as THREE from '../node_modules/three/src/Three'; -import { OrbitControls } from './OrbitControls' -import { TrackballControls } from './trackball' -import { Sketcher } from './sketcher/Sketcher' -import Stats from './stats.module.js'; import ReactDOM from 'react-dom' import React from 'react' import { createStore, applyMiddleware } from 'redux' +import logger from 'redux-logger' import { Root } from './app.jsx' - - -function main(store) { - var stats = new Stats(); - stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom - document.getElementById('stats').appendChild(stats.dom); - - const canvas = document.querySelector('#c'); - const renderer = new THREE.WebGLRenderer({ canvas }); - - const scene = new THREE.Scene(); - window.scene = scene; - scene.background = new THREE.Color(0xb0b0b0); - - const helpersGroup = new THREE.Group(); - scene.add(helpersGroup); - const axesHelper = new THREE.AxesHelper(5); - helpersGroup.add(axesHelper); - - const size = 1; - const near = 5; - const far = 50; - const camera = new THREE.OrthographicCamera(-size, size, size, -size, near, far); - camera.zoom = 0.1; - camera.position.set(0, 0, 30); - - // const controls = new OrbitControls(camera, view1Elem); - const controls = new TrackballControls(camera, canvas); - controls.target.set(0, 0, 0); - controls.update() +import { Renderer } from "./Renderer" - const color = 0xFFFFFF; - const intensity = 1; - const light1 = new THREE.DirectionalLight(color, intensity); - light1.position.set(10, 10, 10); - scene.add(light1); - - const light2 = new THREE.DirectionalLight(color, intensity); - light2.position.set(-10, -10, -5); - scene.add(light2); - - const ambient = new THREE.AmbientLight(color, intensity); - scene.add(ambient); - - - const sketchPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0); - const sketcher = new Sketcher(camera, canvas, sketchPlane) - window.sketcher = sketcher - scene.add(sketcher) - - - function resizeRendererToDisplaySize(renderer) { - const canvas = renderer.domElement; - const width = canvas.clientWidth; - const height = canvas.clientHeight; - const needResize = canvas.width !== width || canvas.height !== height; - if (needResize) { - renderer.setSize(width, height, false); - } - return needResize; - } - - function render() { - stats.begin(); - if (resizeRendererToDisplaySize(renderer)) { - const canvas = renderer.domElement; - camera.left = -canvas.clientWidth / canvas.clientHeight; - camera.right = canvas.clientWidth / canvas.clientHeight; - camera.updateProjectionMatrix(); - } - renderer.render(scene, camera); - stats.end(); - } - controls.addEventListener('change', render); - controls.addEventListener('start', render); - sketcher.addEventListener('change', render); - window.addEventListener('resize', render); - render(); -} - -function todos(state = [], action) { +function reducer(state = {}, action) { switch (action.type) { - case 'ADD_TODO': - return state.concat([action.text]) + case 'toggle': + return { ...state, toggle: action.payload } + case 'rx-new-sketch': + return { ...state, sketches: [...state.sketches, action.idx] } default: return state } } -const store = createStore(todos, ['Use Redux']) - -store.dispatch({ - type: 'ADD_TODO', - text: 'Read the docs' -}) - -console.log(store.getState()) +export const store = createStore(reducer, {sketches:[]}, applyMiddleware(logger)) +window.store = store; -// main(store); -main(store); + +export const renderInst = new Renderer(store); document.addEventListener('DOMContentLoaded', () => { - ReactDOM.render( React.createElement(Root, { store: store }, null) , document.getElementById('react') ); - }); diff --git a/src/sketcher/Sketcher.js b/src/sketcher/Sketcher.js index e1e2efd..c13ae7f 100644 --- a/src/sketcher/Sketcher.js +++ b/src/sketcher/Sketcher.js @@ -21,23 +21,25 @@ const pointMaterial = new THREE.PointsMaterial({ }) class Sketcher extends THREE.Group { - constructor(camera, domElement, plane) { + constructor(camera, domElement, store) { super() this.camera = camera; this.domElement = domElement; this.matrixAutoUpdate = false; + this.store = store; - this.plane = plane; + this.sub = new THREE.Group(); + this.add(this.sub); + + this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0); this.sketchNormal = new THREE.Vector3(0, 0, 1) - this.orientSketcher(plane) - this.add(new THREE.PlaneHelper(this.plane, 1, 0xffff00)); - this.sketch = new THREE.Group(); - this.add(this.sketch); - this.raycaster = new THREE.Raycaster(); - this.raycaster.params.Line.threshold = 0.8; - this.raycaster.params.Points.threshold = 1.5; + const axesHelper = new THREE.AxesHelper(2); + this.sub.add(axesHelper); + + + // [0]:x, [1]:y, [2]:z this.objIdx = new Map() @@ -76,28 +78,61 @@ class Sketcher extends THREE.Group { this.onKeyPress = this.onKeyPress.bind(this); - window.addEventListener('keydown', this.onKeyPress) - domElement.addEventListener('pointerdown', this.onPick) - domElement.addEventListener('pointermove', this.onHover) + // window.addEventListener('keydown', this.onKeyPress) + // domElement.addEventListener('pointerdown', this.onPick) + // domElement.addEventListener('pointermove', this.onHover) + + this.raycaster = new THREE.Raycaster(); + this.raycaster.params.Line.threshold = 0.8; + this.raycaster.params.Points.threshold = 1.5; + this.selected = new Set() + this.hovered = [] this.mode = "" this.subsequent = false; - this.selected = new Set() - this.hovered = [] this.target = new THREE.Vector3(); } - orientSketcher() { - const theta = this.sketchNormal.angleTo(this.plane.normal) - const axis = this.sketchNormal.clone().cross(this.plane.normal).normalize() - const rot = new THREE.Matrix4().makeRotationAxis(axis, theta) - const trans = new THREE.Matrix4().makeTranslation(0, 0, this.plane.constant) - this.matrix = rot.multiply(trans) // world matrix will auto update in next render + + + align(origin, x_dir, y_dir) { + // this.updateWorldMatrix(true, false); + + const up = new THREE.Vector3().subVectors(y_dir, origin).normalize(); + + const _m1 = new THREE.Matrix4() + + const te = _m1.elements; + + const _x = new THREE.Vector3().subVectors(x_dir, origin).normalize(); + + const _z = new THREE.Vector3().crossVectors(_x, up).normalize(); + + const _y = new THREE.Vector3().crossVectors(_z, _x); + + te[0] = _x.x; te[4] = _y.x; te[8] = _z.x; + 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; + _m1.extractRotation(parent.matrixWorld); + const _q1 = new THREE.Quaternion().setFromRotationMatrix(_m1); + this.quaternion.premultiply(_q1.invert()); + + this.updateMatrix(); + this.matrix.setPosition(origin) + + this.plane.applyMatrix4(this.matrix) + this.inverse = this.matrix.clone().invert() } + + onKeyPress(e) { switch (e.key) { case 'Escape': @@ -127,23 +162,13 @@ class Sketcher extends THREE.Group { case 'e': extrude.call(this) break; - case '=': - this.plane.applyMatrix4(new Matrix4().makeRotationY(0.1)) - this.orientSketcher() - this.dispatchEvent({ type: 'change' }) - break; - case '-': - this.plane.applyMatrix4(new Matrix4().makeRotationY(-0.1)) - this.orientSketcher() - this.dispatchEvent({ type: 'change' }) - break; } } deleteSelected() { - let minI = this.sketch.children.length; + let minI = this.children.length; for (let obj of this.selected) { minI = Math.min(minI, this.delete(obj)) @@ -197,10 +222,10 @@ class Sketcher extends THREE.Group { if (!link) return Infinity; link = link[1] - let i = this.sketch.children.indexOf(link[0]) + let i = this.children.indexOf(link[0]) for (let j = 0; j < link.length; j++) { - const obj = this.sketch.children[i + j] + const obj = this.children[i + j] obj.geometry.dispose() obj.material.dispose() @@ -209,7 +234,7 @@ class Sketcher extends THREE.Group { } } - this.sketch.children.splice(i, link.length) + this.children.splice(i, link.length) this.linkedObjs.delete(obj.l_id) @@ -217,8 +242,8 @@ class Sketcher extends THREE.Group { } updatePointsBuffer(startingIdx = 0) { - for (let i = startingIdx; i < this.sketch.children.length; i++) { - const obj = this.sketch.children[i] + for (let i = startingIdx; i < this.children.length; i++) { + const obj = this.children[i] this.objIdx.set(obj.id, i) if (obj.type == "Points") { this.ptsBuf.set(obj.geometry.attributes.position.array, 3 * i) @@ -258,18 +283,20 @@ class Sketcher extends THREE.Group { Module.HEAPF32.set(this.linksBuf, links_buffer >> 2) Module["_solver"]( - this.sketch.children.length, pts_buffer, + this.children.length, pts_buffer, this.constraints.size, constraints_buffer, this.linkedObjs.size, links_buffer) - let ptr = pts_buffer >> 2; + /* + - loop to update all the children that are points + - we skip first triplet because it refers to a non-geometry child + - 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 = 0; i < this.sketch.children.length; i += 1) { - - const pos = this.sketch.children[i].geometry.attributes.position; + const pos = this.children[i].geometry.attributes.position; if (isNaN(Module.HEAPF32[ptr])) { - pos.array[0] = Module.HEAPF32[ptr - 6] pos.array[1] = Module.HEAPF32[ptr - 5] pos.array[3] = Module.HEAPF32[ptr - 3] @@ -278,7 +305,7 @@ class Sketcher extends THREE.Group { pos.array[0] = Module.HEAPF32[ptr] pos.array[1] = Module.HEAPF32[ptr + 1] } - ptr += 3; + pos.needsUpdate = true; } @@ -286,9 +313,12 @@ class Sketcher extends THREE.Group { Module._free(links_buffer) Module._free(constraints_buffer) - + /* + arcs were not updated in above loop, we go through all arcs linkedObjs + and updated based on the control pts (which were updated in loop above) + */ for (let [k, obj] of this.linkedObjs) { - if (obj[0] == 'line') continue; + if (obj[0] != 'arc') continue; const [p1, p2, c, arc] = obj[1] const points = get3PtArc( diff --git a/src/sketcher/drawEvents.js b/src/sketcher/drawEvents.js index d83789b..20d3e82 100644 --- a/src/sketcher/drawEvents.js +++ b/src/sketcher/drawEvents.js @@ -13,8 +13,8 @@ export function drawOnClick1(e) { this.toPush = sketchArc(mouseLoc) } - this.updatePoint = this.sketch.children.length - this.sketch.add(...this.toPush) + this.updatePoint = this.children.length + this.add(...this.toPush) this.linkedObjs.set(this.l_id, [this.mode, this.toPush]) for (let obj of this.toPush) { @@ -65,7 +65,7 @@ export function drawClear() { this.domElement.removeEventListener('pointermove', this.drawPreClick2); this.domElement.removeEventListener('pointerdown', this.drawOnClick2); - this.delete(this.sketch.children[this.sketch.children.length - 1]) + this.delete(this.children[this.children.length - 1]) this.dispatchEvent({ type: 'change' }) this.subsequent = false diff --git a/src/sketcher/extrude.js b/src/sketcher/extrude.js index 8400a33..85cd7ea 100644 --- a/src/sketcher/extrude.js +++ b/src/sketcher/extrude.js @@ -6,7 +6,7 @@ export function extrude() { let constraints = this.constraints; let linkedObjs = this.linkedObjs; - let children = this.sketch.children; + let children = this.children; let visited = new Set() let v2s = [] @@ -26,7 +26,7 @@ export function extrude() { for (let i = 0; i < 2; i++) { let d = linkedObj[1][i] if (d == -1 || d == node) continue; - if (d == children[0]) { + if (d == children[1]) { console.log('pair found') }; findTouching(d) @@ -52,19 +52,48 @@ export function extrude() { } - findPair(children[0]) + findPair(children[1]) const shape = new THREE.Shape(v2s); - const extrudeSettings = { depth: 8, bevelEnabled: false}; + const extrudeSettings = { depth: 8, bevelEnabled: false }; const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings); - const phong = new THREE.MeshPhongMaterial( { color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true } ); + const phong = new THREE.MeshPhongMaterial({ color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true }); const mesh = new THREE.Mesh(geometry, phong); + + + const wireframe = new THREE.WireframeGeometry(geometry); + + + + + const pointMaterial = new THREE.PointsMaterial({ + color: 0x555555, + size: 4, + }) + + + + + const pts = new THREE.Points(wireframe, pointMaterial); + this.add(pts) + + + + // const line = new THREE.LineSegments( wireframe ); + // line.material.depthTest = true; + // line.material.linewidth = 4; + + // line.material.opacity = 0.25; + // // line.material.transparent = true; + // line.material.transparent = false; + // this.add(line) + this.add(mesh) - this.dispatchEvent({ type: 'change' }) - // this.sketch.visible = false + this.dispatchEvent({ type: 'change' }) + // this.visible = false } diff --git a/src/sketcher/pickEvents.js b/src/sketcher/pickEvents.js index 869badd..cad9aae 100644 --- a/src/sketcher/pickEvents.js +++ b/src/sketcher/pickEvents.js @@ -11,9 +11,10 @@ export function onHover(e) { this.camera ); - const hoverPts = this.raycaster.intersectObjects(this.sketch.children) - + const hoverPts = this.raycaster.intersectObjects(this.children) + let idx = [] + console.log(hoverPts) if (hoverPts.length) { let minDist = Infinity; for (let i = 0; i < hoverPts.length; i++) { @@ -31,28 +32,35 @@ export function onHover(e) { if (idx.length) { if (hoverPts[idx[0]].object != this.hovered[0]) { - for (let ob of this.hovered) { - if (ob && !this.selected.has(ob)) { - ob.material.color.set(0x555555) + for (let x = 0; x < this.hovered.length; x++) { + const obj = this.hovered[x] + if (obj && !this.selected.has(obj)) { + obj.material.color.set(0x555555) } } this.hovered = [] - for (let i of idx) { + console.log(idx.length) + for (let x = 0; x < idx.length; x++) { + const i = idx[x] hoverPts[i].object.material.color.set(0x00ff00) this.hovered.push(hoverPts[i].object) } + // console.log('render1') this.dispatchEvent({ type: 'change' }) } } else { if (this.hovered.length) { - for (let ob of this.hovered) { - if (ob && !this.selected.has(ob)) { - ob.material.color.set(0x555555) + + for (let x = 0; x < this.hovered.length; x++) { + const obj = this.hovered[x] + if (obj && !this.selected.has(obj)) { + obj.material.color.set(0x555555) } } this.hovered = [] + // console.log('render2') this.dispatchEvent({ type: 'change' }) } @@ -65,8 +73,9 @@ export function onPick(e) { if (this.hovered.length) { - for (let h of this.hovered) { - this.selected.add(h) + for (let x = 0; x < this.hovered.length; x++) { + const obj = this.hovered[x] + this.selected.add(obj) } if (this.hovered[0].type == "Points") { @@ -85,10 +94,11 @@ export function onPick(e) { export function onDrag(e) { const mouseLoc = this.getLocation(e); - for (let h of this.hovered) { + for (let x = 0; x < this.hovered.length; x++) { + const obj = this.hovered[x] this.ptsBuf.set( mouseLoc, - this.objIdx.get(h.id) * 3 + this.objIdx.get(obj.id) * 3 ) } @@ -101,8 +111,9 @@ export function onRelease() { this.domElement.removeEventListener('pointermove', this.onDrag) this.domElement.removeEventListener('pointerup', this.onRelease) - for (let ii of this.hovered) { - ii.geometry.computeBoundingSphere() + for (let x = 0; x < this.hovered.length; x++) { + const obj = this.hovered[x] + obj.geometry.computeBoundingSphere() } } diff --git a/src/sketcher/sketchArc.js b/src/sketcher/sketchArc.js index 952173a..e1b198c 100644 --- a/src/sketcher/sketchArc.js +++ b/src/sketcher/sketchArc.js @@ -101,8 +101,9 @@ export function get3PtArc(p1, p2, c, divisions = 36) { const radius = Math.sqrt(v1[0] ** 2 + v1[1] ** 2) let deltaAngle = a2 - a1 - if (deltaAngle <0) deltaAngle += Math.PI*2 + if (deltaAngle <=0) deltaAngle += Math.PI*2 // console.log(deltaAngle) + let points = new Float32Array((divisions + 1) * 3) for (let d = 0; d <= divisions; d++) { diff --git a/src/sketcher/sketchLine.js b/src/sketcher/sketchLine.js index 7c32e32..72b4cef 100644 --- a/src/sketcher/sketchLine.js +++ b/src/sketcher/sketchLine.js @@ -41,12 +41,12 @@ export function sketchLine(mouseLoc) { this.constraints.set(++this.c_id, [ 'coincident', -1, - [this.sketch.children[this.sketch.children.length - 2], p1, -1, -1] + [this.children[this.children.length - 2], p1, -1, -1] ] ) p1.constraints.add(this.c_id) - this.sketch.children[this.sketch.children.length - 2].constraints.add(this.c_id) + this.children[this.children.length - 2].constraints.add(this.c_id) } diff --git a/src/utils.js b/src/utils.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/OrbitControls.js b/src/utils/OrbitControls.js similarity index 99% rename from src/OrbitControls.js rename to src/utils/OrbitControls.js index a47b294..c03d422 100644 --- a/src/OrbitControls.js +++ b/src/utils/OrbitControls.js @@ -6,7 +6,7 @@ import { TOUCH, Vector2, Vector3 -} from '../node_modules/three/src/Three'; +} from '../../node_modules/three/src/Three'; // This set of controls performs orbiting, dollying (zooming), and panning. diff --git a/src/stats.module.js b/src/utils/stats.module.js similarity index 100% rename from src/stats.module.js rename to src/utils/stats.module.js diff --git a/src/trackball.js b/src/utils/trackball.js similarity index 99% rename from src/trackball.js rename to src/utils/trackball.js index eb0f74e..d86bd10 100644 --- a/src/trackball.js +++ b/src/utils/trackball.js @@ -4,7 +4,7 @@ import { Quaternion, Vector2, Vector3 -} from '../node_modules/three/src/Three'; +} from '../../node_modules/three/src/Three'; var TrackballControls = function ( object, domElement ) { @@ -25,8 +25,7 @@ var TrackballControls = function ( object, domElement ) { this.rotateSpeed = 3.0; this.zoomSpeed = 1.2; - // this.panSpeed = 89.5; - this.panSpeed = 70; + this.panSpeed = 41.6; this.noRotate = false; this.noZoom = false;