433 lines
10 KiB
JavaScript
433 lines
10 KiB
JavaScript
import * as THREE from '../node_modules/three/src/Three';
|
|
|
|
import { Sketch } from './Sketch'
|
|
import { extrude, flipBufferGeometryNormals } from './extrude'
|
|
import { onHover, onPick, clearSelection } from './mouseEvents';
|
|
import { _vec2, _vec3, color, awaitSelection, setHover, custPtMat } from './shared'
|
|
import { AxesHelper } from './axes'
|
|
|
|
|
|
import { TrackballControls } from '../extlib/trackball'
|
|
import CSG from "../extlib/three-csg"
|
|
import { STLExporter } from '../extlib/stl'
|
|
|
|
|
|
let stats
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
const { default: d } = require('../extlib/stats.module.js')
|
|
stats = new d();
|
|
// document.getElementById('stats').appendChild(stats.dom);
|
|
}
|
|
|
|
|
|
window.loader = new THREE.ObjectLoader();
|
|
window.STLexp = new STLExporter();
|
|
|
|
window.id = 0
|
|
|
|
|
|
|
|
export class Scene {
|
|
constructor(store) {
|
|
this.sid = 1
|
|
this.mid = 1
|
|
|
|
this.canvas = document.querySelector('#c');
|
|
|
|
this.rect = this.canvas.getBoundingClientRect().toJSON()
|
|
|
|
this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas });
|
|
this.store = store
|
|
|
|
const size = 1;
|
|
const near = -1;
|
|
const far = 1000;
|
|
this.camera = new THREE.OrthographicCamera(-size, size, size, -size, near, far);
|
|
this.camera.zoom = 0.008;
|
|
const cameraDist = 500
|
|
const xzAngle = 30 * Math.PI / 180
|
|
this.camera.position.set(
|
|
cameraDist * Math.sin(xzAngle),
|
|
cameraDist * Math.tan(30 * Math.PI / 180),
|
|
cameraDist * Math.cos(xzAngle)
|
|
);
|
|
|
|
this.camera.layers.enable(3)
|
|
|
|
this.controls = new TrackballControls(this.camera, this.canvas);
|
|
this.controls.target.set(0, 0, 0);
|
|
this.controls.update();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.obj3d = new THREE.Scene() ///////
|
|
|
|
// this.obj3d.background = new THREE.Color(color.background);
|
|
const helpersGroup = new THREE.Group();
|
|
helpersGroup.name = "helpers";
|
|
this.obj3d.add(helpersGroup);
|
|
|
|
|
|
for (let i = 0; i < 4; i++) {
|
|
const freePt = new THREE.Points(
|
|
new THREE.BufferGeometry().setAttribute('position',
|
|
new THREE.Float32BufferAttribute(3, 3)
|
|
),
|
|
// pointMaterial.clone()
|
|
custPtMat.clone()
|
|
)
|
|
|
|
freePt.matrixAutoUpdate = false
|
|
freePt.visible = false
|
|
freePt.renderOrder=1
|
|
// freePt.depthTest = false
|
|
freePt.userData.type = 'selpoint'
|
|
helpersGroup.add(freePt);
|
|
}
|
|
this.selpoints = this.obj3d.children[0].children
|
|
this.fptIdx = 0;
|
|
this.fptObj = {}
|
|
|
|
|
|
const planeGeom = new THREE.PlaneGeometry(50, 50)
|
|
const pxy = new THREE.Mesh(
|
|
planeGeom,
|
|
new THREE.MeshBasicMaterial({
|
|
color: color.plane,
|
|
opacity: 0.02,
|
|
side: THREE.DoubleSide,
|
|
transparent: true,
|
|
depthWrite: false,
|
|
toneMapped: false
|
|
})
|
|
);
|
|
pxy.add(
|
|
new THREE.LineSegments(
|
|
new THREE.EdgesGeometry(planeGeom),
|
|
new THREE.LineBasicMaterial({ color: color.planeBorder })
|
|
)
|
|
)
|
|
pxy.userData.type = 'plane'
|
|
pxy.layers.enable(1)
|
|
pxy.children[0].layers.disable(1)
|
|
const pyz = pxy.clone().rotateY(Math.PI / 2);
|
|
const pxz = pxy.clone().rotateX(-Math.PI / 2);
|
|
helpersGroup.add(pxy);
|
|
[pxz, pyz].forEach(e => {
|
|
e.traverse(f => f.material = f.material.clone())
|
|
helpersGroup.add(e);
|
|
});
|
|
|
|
this.axes = new AxesHelper(this.camera.zoom)
|
|
this.axes.visible = false
|
|
helpersGroup.add(this.axes);
|
|
|
|
|
|
const dist = 500
|
|
const light1 = new THREE.PointLight(color.lighting, 0.7);
|
|
light1.position.set(dist, dist, dist);
|
|
helpersGroup.add(light1);
|
|
const light2 = new THREE.PointLight(color.lighting, 0.7);
|
|
light2.position.set(-dist, -dist, -dist);
|
|
helpersGroup.add(light2);
|
|
|
|
|
|
this.render = render.bind(this)
|
|
this.addSketch = addSketch.bind(this)
|
|
this.onHover = onHover.bind(this)
|
|
this.onPick = onPick.bind(this)
|
|
this.clearSelection = clearSelection.bind(this)
|
|
this.setHover = setHover.bind(this)
|
|
this.awaitSelection = awaitSelection.bind(this)
|
|
this.extrude = this.extrude.bind(this)
|
|
|
|
|
|
this.obj3d.addEventListener('change', this.render);
|
|
this.controls.addEventListener('change', this.render);
|
|
this.controls.addEventListener('start', this.render);
|
|
window.addEventListener('resize', this.render);
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
this.stats = stats
|
|
}
|
|
|
|
|
|
|
|
this.hovered = [];
|
|
this.activeSketch = null;
|
|
|
|
this.selected = [];
|
|
this.mode = '';
|
|
this.store.subscribe(this.reduxCallback.bind(this))
|
|
|
|
this.render();
|
|
}
|
|
|
|
reduxCallback() {
|
|
const currSelected = this.store.getState().ui.selectedList
|
|
const currMode = this.store.getState().ui.mode
|
|
if (currSelected !== this.selected) {
|
|
this.selected = currSelected
|
|
}
|
|
if (currMode !== this.mode) {
|
|
this.mode = currMode
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
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;
|
|
}
|
|
|
|
|
|
clearScene() {
|
|
const deleted = this.obj3d.children.splice(1)
|
|
|
|
for (let i = 0; i < deleted.length; i++) {
|
|
deleted[i].traverse((obj) => {
|
|
if (obj.geometry) obj.geometry.dispose()
|
|
if (obj.material) obj.material.dispose()
|
|
})
|
|
}
|
|
}
|
|
|
|
newPart() {
|
|
this.clearScene()
|
|
window.id = 0
|
|
this.sid = 1
|
|
this.mid = 1
|
|
}
|
|
|
|
loadState(file) { //uglyyy
|
|
|
|
this.clearScene()
|
|
|
|
const [curid, cursid, curmid, state] = JSON.parse(
|
|
file
|
|
)
|
|
|
|
window.id = curid
|
|
this.sid = cursid
|
|
this.mid = curmid
|
|
|
|
const entries = state.byId
|
|
for (let k in entries) {
|
|
|
|
if (k[0] == 's') {
|
|
entries[k].obj3d = loader.parse(entries[k].obj3d)
|
|
this.obj3d.add(entries[k].obj3d)
|
|
entries[k] = new Sketch(this, entries[k])
|
|
entries[k].obj3d.addEventListener('change', this.render) // !! took 3 hours to realize
|
|
|
|
} else if (k[0] == 'e') {
|
|
|
|
entries[k] = loader.parse(state.byId[k])
|
|
|
|
if (entries[k].userData.inverted) {
|
|
flipBufferGeometryNormals(entries[k].geometry)
|
|
}
|
|
|
|
this.obj3d.add(entries[k])
|
|
|
|
} else {
|
|
entries[k] = loader.parse(state.byId[k])
|
|
|
|
this.obj3d.add(entries[k])
|
|
|
|
}
|
|
}
|
|
|
|
return state
|
|
}
|
|
|
|
loadSketch(string) {
|
|
let entry = JSON.parse(string)
|
|
entry.obj3d = loader.parse(entry.obj3d)
|
|
|
|
// this.obj3d.add(entry.obj3d)
|
|
|
|
entry = new Sketch(this, entry)
|
|
entry.obj3d.addEventListener('change', this.render)
|
|
|
|
return entry
|
|
}
|
|
|
|
extrude(sketch, depth) {
|
|
const mesh = extrude(sketch, depth)
|
|
mesh.name = 'e' + this.mid++
|
|
|
|
this.obj3d.add(mesh)
|
|
|
|
return mesh
|
|
}
|
|
|
|
boolOp(m1, m2, op) {
|
|
let bspA = CSG.fromMesh(m1)
|
|
let bspB = CSG.fromMesh(m2)
|
|
m1.visible = false
|
|
m2.visible = false
|
|
m1.traverse(e => e.layers.disable(1))
|
|
m2.traverse(e => e.layers.disable(1))
|
|
|
|
|
|
let bspResult, opChar;
|
|
switch (op) {
|
|
case 's':
|
|
bspResult = bspA.subtract(bspB)
|
|
opChar = "-"
|
|
break;
|
|
case 'u':
|
|
bspResult = bspA.union(bspB)
|
|
opChar = "\u222a"
|
|
break;
|
|
case 'i':
|
|
bspResult = bspA.intersect(bspB)
|
|
opChar = "\u2229"
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
let mesh = CSG.toMesh(bspResult, m1.matrix, m1.material)
|
|
mesh.userData.type = 'mesh'
|
|
mesh.userData.featureInfo = [m1.name, m2.name, op]
|
|
|
|
mesh.name = `(${m1.name} ${opChar} ${m2.name})`
|
|
mesh.layers.enable(1)
|
|
|
|
const vertices = new THREE.Points(mesh.geometry, new THREE.PointsMaterial());
|
|
vertices.visible = false
|
|
vertices.userData.type = 'point'
|
|
vertices.layers.enable(1)
|
|
|
|
mesh.add(vertices)
|
|
|
|
return mesh
|
|
|
|
}
|
|
|
|
refreshNode(id, { byId, tree }) {
|
|
let curId
|
|
let que = [id]
|
|
let idx = 0
|
|
// let newNodes = {}
|
|
|
|
while (idx < que.length) {
|
|
curId = que[idx++]
|
|
|
|
if (byId[curId].userData) { // if it is a mesh
|
|
const info = byId[curId].userData.featureInfo
|
|
let newNode
|
|
if (info.length == 2) {
|
|
newNode = extrude(byId[info[0]], info[1])
|
|
} else if (info.length == 3) {
|
|
newNode = this.boolOp(byId[info[0]], byId[info[1]], info[2])
|
|
}
|
|
byId[curId].geometry.copy(newNode.geometry)
|
|
byId[curId].geometry.parameters = newNode.geometry.parameters // took 2 hours to figure out
|
|
|
|
}
|
|
|
|
for (let k in tree[curId]) {
|
|
que.push(k)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
let idx, x, y, ele, pos, dims, matrix;
|
|
function render() {
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
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.controls.handleResize()
|
|
Object.assign(this.rect, this.canvas.getBoundingClientRect().toJSON())
|
|
|
|
}
|
|
|
|
|
|
if (this.axes) this.axes.resize(this.camera.zoom)
|
|
|
|
this.renderer.render(this.obj3d, this.camera);
|
|
|
|
if (this.activeSketch) {
|
|
dims = this.activeSketch.dimGroup.children
|
|
matrix = this.activeSketch.obj3d.matrix
|
|
|
|
for (idx = 1; idx < dims.length; idx += 2) {
|
|
ele = dims[idx]
|
|
|
|
pos = _vec3.set(
|
|
...ele.geometry.attributes.position.array
|
|
).applyMatrix4(matrix).project(this.camera)
|
|
|
|
x = (pos.x * .5 + .5) * this.canvas.clientWidth + 10 + this.rect.left;
|
|
y = (pos.y * -.5 + .5) * this.canvas.clientHeight + this.rect.top;
|
|
|
|
ele.label.style.transform = `translate(0%, -50%) translate(${x}px,${y}px)`;
|
|
}
|
|
}
|
|
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
this.stats.end();
|
|
}
|
|
}
|
|
|
|
|
|
function addSketch() {
|
|
|
|
let sketch;
|
|
|
|
if (this.selected.length == 3 && this.selected.every(e => e.userData.type == 'selpoint')) {
|
|
sketch = new Sketch(this)
|
|
this.obj3d.add(sketch.obj3d)
|
|
sketch.align(
|
|
...this.selected.map(
|
|
el => new THREE.Vector3(...el.geometry.attributes.position.array).applyMatrix4(el.matrixWorld)
|
|
)
|
|
)
|
|
} else if (this.selected.length && this.selected[0].userData.type == 'plane') {
|
|
sketch = new Sketch(this)
|
|
sketch.obj3d.matrix = this.selected[0].matrix
|
|
sketch.plane.applyMatrix4(sketch.obj3d.matrix)
|
|
sketch.obj3d.inverse = sketch.obj3d.matrix.clone().invert()
|
|
this.obj3d.add(sketch.obj3d)
|
|
|
|
} else {
|
|
return
|
|
}
|
|
|
|
this.newSketch = true
|
|
|
|
this.clearSelection()
|
|
sketch.obj3d.addEventListener('change', this.render);
|
|
return sketch
|
|
}
|
|
|
|
// window.sc = new Scene(store)
|