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

working 3pt plane

master
howard 2021-03-28 05:00:31 -07:00
parent e661020dc8
commit cbe34ab4c3
18 changed files with 483 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dist/index.html vendored
View File

@ -30,9 +30,7 @@
display: block;
}
#react {
position: absolute;
}
</style>
</head>

31
package-lock.json generated
View File

@ -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",

3
package.json
View File

@ -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",

194
src/Renderer.js Normal file
View File

@ -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)
}

21
src/app.jsx
View File

@ -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 }) => (
<Provider store={store}>
<App></App>
</Provider>
);
const App = () => {
const dispatch = useDispatch()
const sketches = useSelector(state => state.sketches)
return <>
<div>in the world where</div>
<button onClick={() => dispatch({ type: 'toggle', payload: true })}> true</button>
<button onClick={() => dispatch({ type: 'toggle', payload: false })}> false </button>
<button onClick={renderInst.addSketch}> addsketch </button>
<div className='feature-tree'>
{sketches.map((e, idx) => (
<div key={idx}>{e}</div>
))}
</div>
</>
}
}

7
src/app.scss
View File

@ -1,4 +1,9 @@
div {
#react {
position: absolute;
}
.feature-tree {
color: red;
position: absolute;
right:0;

74
src/datums.js Normal file
View File

@ -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()
}
}
}

111
src/index.js
View File

@ -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')
);
});

120
src/sketcher/Sketcher.js
View File

@ -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(

6
src/sketcher/drawEvents.js
View File

@ -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

43
src/sketcher/extrude.js
View File

@ -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
}

41
src/sketcher/pickEvents.js
View File

@ -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()
}
}

3
src/sketcher/sketchArc.js
View File

@ -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++) {

4
src/sketcher/sketchLine.js
View File

@ -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)
}

0
src/utils.js
View File

2
src/OrbitControls.js → src/utils/OrbitControls.js
View File

@ -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.

0
src/stats.module.js → src/utils/stats.module.js
View File

5
src/trackball.js → src/utils/trackball.js
View File

@ -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;