Skip to content

Commit

Permalink
dragging mostly works now
Browse files Browse the repository at this point in the history
  • Loading branch information
@NGimbal
NGimbal committed Feb 3, 2021
1 parent b0f8f11 commit 03466e0
Show file tree
Hide file tree
Showing 7 changed files with 347 additions and 240 deletions.
12 changes: 12 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,8 @@
"private": true,
"devDependencies": {
"lerna": "^3.22.1"
},
"dependencies": {
"three": "^0.125.2"
}
}
273 changes: 154 additions & 119 deletions packages/viewer/example/demo.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/viewer/example/demo.js.map
View file

Large diffs are not rendered by default.

257 changes: 152 additions & 105 deletions packages/viewer/src/modules/SectionBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,105 +13,111 @@ import SelectionHelper from './SelectionHelper'
*
*/

const verts = {

}
// indices to verts in this.box
// these allow for drawing of box edges
const edges = [
[0,1], [1,3],
[3,2], [2,0],
[4,6], [6,7],
[7,5], [5,4],
[2,7], [0,5],
[1,4], [3,6]
]

export default class SectionBox {
constructor(viewer){
this.viewer = viewer

this.display = new THREE.Group()
this.displayBox = new THREE.Group()
this.displayEdges = new THREE.Group()
this.displayHover = new THREE.Group()

this.display.add(this.displayBox)
this.display.add(this.displayEdges)
this.display.add(this.displayHover)

this.viewer.scene.add(this.display)

// basic display of the section box
this.boxMaterial = new THREE.MeshBasicMaterial({
transparent:true,
color: 0xffe842,
opacity: 0.25
})

// the box itself, this might not be displayed as a mesh
this.box = new THREE.BoxGeometry(2,2,2)
this.mesh = new THREE.Mesh(this.box, this.boxMaterial)
this.display = new THREE.Group()
this.display.add(this.mesh)
this.boxGeo = new THREE.BoxGeometry(2,2,2)
this.boxMesh = new THREE.Mesh(this.boxGeo, this.boxMaterial)
this.boxMesh.name = 'section-box'
this.displayBox.add(this.boxMesh)

this.hover = new THREE.Group() // meshes to indicate hover
this.hoverPlane = new THREE.Vector3() // normal of plane being hovered
this.display.add(this.hover)
this.lineMaterial = new THREE.LineDashedMaterial({
color: 0x000000,
linewidth: 4,
})

// going to have to do an update edges thing at some point
edges.map(val => {
let pts = [this.boxGeo.vertices[val[0]].clone(),
this.boxGeo.vertices[val[1]].clone()]
let geo = new THREE.BufferGeometry().setFromPoints(pts)
let line = new THREE.Line(geo, this.lineMaterial)
this.displayEdges.add(line)
})

this.viewer.scene.add(this.display)
this.hoverPlane = new THREE.Vector3() // normal of plane being hovered

this.selectionHelper = new SelectionHelper( this.viewer, {subset:[this.mesh], hover:true} )
this.mouseDown = new THREE.Vector3() // mouseDown on begin drag
this.selectionHelper = new SelectionHelper( this.viewer, {subset:'section-box', hover:true} )

this.planes = [
new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 1 ), // left
new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 1 ), // in
new THREE.Plane( new THREE.Vector3( 0, 0, - 1 ), 1 ), // down
new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), 1 ), // right
new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), 1 ), // out
new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), 1 ) // up
];
this.mouseDown = new THREE.Vector3() // mouseDown on begin drag
this.dragging = false

this.planes = [{
// left, x negative
plane: new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), -1 ),
indices: [5,4,6,7],
},{
// in, y negative
plane:new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), -1 ),
indices: [2,3,6,7],
},{
// down, z negative
plane:new THREE.Plane( new THREE.Vector3( 0, 0, - 1 ), -1 ),
indices: [1,3,6,4],
},{
// right, x positive
plane:new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), -1 ),
indices: [0,1,3,2],
},{
// out, y positive
plane:new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), -1 ),
indices: [5,4,1,0],
},{
// up, z positive
plane:new THREE.Plane( new THREE.Vector3( 0, 0, 1 ), -1 ),
indices: [0,2,7,5],
}];

// helpers for projection stuff
this.elem1 = document.createElement('div');
document.querySelector('#renderer').append(this.elem1);
this.elem1.style.backgroundColor = 'red'
this.elem1.style.width = '25px'
this.elem1.style.height = '25px'
this.elem1.style.borderRadius = '15px'
this.elem1.style.width = '10px'
this.elem1.style.height = '10px'
this.elem1.style.borderRadius = '5px'
this.elem1.style.position = 'absolute'

this.elem2 = document.createElement('div');
document.querySelector('#renderer').append(this.elem2);
this.elem2.style.backgroundColor = 'blue'
this.elem2.style.width = '25px'
this.elem2.style.height = '25px'
this.elem2.style.borderRadius = '15px'
this.elem2.style.width = '10px'
this.elem2.style.height = '10px'
this.elem2.style.borderRadius = '5px'
this.elem2.style.position = 'absolute'

// this.planeHelpers = this.planes.map( p => new THREE.PlaneHelper( p, 2, 0x000000 ) );
// this.planeHelpers.forEach( ph => {
// // ph.visible = false;
// this.display.add( ph );
// } );

// this.viewer.renderer.localClippingEnabled = true;

let planeGeometry = new THREE.PlaneGeometry(4, 4)

for(let i = 0; i < this.planes; i++){
let plane = this.planes[i]

// this.stencilGroup = createPlaneStencilGroup( this.viewer.sceneManager.objects , plane, i + 1 );

let planeMat = new THREE.MeshStandardMaterial( {

color: 0xE91E63,
metalness: 0.1,
roughness: 0.75,
clippingPlanes: planes.filter( p => p !== plane ),

stencilWrite: true,
stencilRef: 0,
stencilFunc: THREE.NotEqualStencilFunc,
stencilFail: THREE.ReplaceStencilOp,
stencilZFail: THREE.ReplaceStencilOp,
stencilZPass: THREE.ReplaceStencilOp,

} );

let planeObject = new THREE.Mesh( planeGeometry, planeMat);
this.display.add(planeObject)
// planeObject.onAfterRender = function ( renderer ) {
// renderer.clearStencil()
// }

// planeObject.renderOrder = i + 1.1;
// object.add( stencilGroup );
// poGroup.add( po );
// planeObjects.push( po );
// scene.add( poGroup );
}
// plane helpers
this.planeHelpers = this.planes.map( p => this.display.add(new THREE.PlaneHelper( p.plane, 2, 0x000000 ) ));

this.hoverMat = new THREE.MeshStandardMaterial( {
color: 0xE91E63,
Expand All @@ -121,25 +127,28 @@ export default class SectionBox {

this.selectionHelper.on('hovered', (obj, e) => {

if(obj.length === 0) {
this.hover.clear()
if(obj.length === 0 && !this.dragging) {
this.displayHover.clear()
this.hoverPlane = new THREE.Vector3()
// need a this.dragging probably
this.viewer.controls.enabled = true
this.viewer.renderer.domElement.style.cursor = 'default'
return;
} else if (this.dragging){
return
}

let index = this.planes.findIndex(p => p.normal.equals(obj[0].face.normal))
let index = this.planes.findIndex(p => p.plane.normal.equals(obj[0].face.normal))
if(index < 0) return // this should never be the case?
let plane = this.planes[index]
let plane = this.planes[index].plane

if(plane.normal.equals(this.hoverPlane)) return
this.hoverPlane = plane.normal.clone()

this.hover.clear()
this.displayHover.clear()

let n = plane.normal.clone()
let c = plane.constant
let c = plane.constant * -1

// TODO: set plane geometry size by box size
let hoverGeo = new THREE.PlaneGeometry(2,2)
Expand All @@ -149,45 +158,83 @@ export default class SectionBox {
hoverGeo.translate(n.x * (c + 0.01), n.y * (c + 0.01), n.z * (c + 0.01))
let hoverMesh = new THREE.Mesh(hoverGeo, this.hoverMat)

this.hover.add(hoverMesh)
this.displayHover.add(hoverMesh)
this.viewer.renderer.domElement.style.cursor = 'pointer';

this.mouseDown = new THREE.Vector3(e.x, e.y, e.y);
})

this.selectionHelper.on('object-clicked', (e) => {
console.log('clicked!')
console.log(e)
// this.selectionHelper.on('object-clicked', (e) => {
// // console.log("object-clicked")

// })

this.viewer.renderer.domElement.addEventListener('pointerup', (e) => {
this.mouseDown = new THREE.Vector3()
this.viewer.controls.enabled = true
this.dragging = false
})

this.selectionHelper.on('object-drag', (obj, e) => {
if(this.selectionHelper.orbiting === true) return
this.viewer.controls.enabled = false
// exit if we don't have a valide hoverPlane
// this shouldn't be happening
if(this.hoverPlane.equals(new THREE.Vector3())) return

this.viewer.controls.enabled = false
this.dragging = true

if(this.mouseDown.equals(new THREE.Vector3())) this.mouseDown = new THREE.Vector3(e.x, e.y, 0.0)
console.log("4")

this.viewer.renderer.domElement.style.cursor = 'move';

let index = this.planes.findIndex(p => p.normal.equals(obj[0].face.normal))
let plane = this.planes[index]
let tempV1 = plane.normal.clone().multiplyScalar(plane.constant)
// get screen space vector of plane normal
// project mouse displacement vector onto it
// move plane by that much
let index = this.planes.findIndex(p => p.plane.normal.equals(this.hoverPlane))
let planeObj = this.planes[index]
let plane = planeObj.plane

let tempV2 = tempV1.clone().multiplyScalar(2)

if(this.hover.children.length < 1) return

tempV1.project(this.viewer.camera)
tempV2.project(this.viewer.camera)

let x = (tempV1.x * .5 + 0.5) * this.viewer.renderer.domElement.clientWidth
let y = (tempV1.y * .5 + 0.5) * this.viewer.renderer.domElement.clientHeight * -1
console.log("x: ", x, "y: ", y)
// this should be a property of viewer
let resolution = new THREE.Vector3(this.viewer.renderer.domElement.clientWidth, -1 * this.viewer.renderer.domElement.clientHeight, 0)

// screen space normal vector
let ssNorm = plane.normal.clone().multiplyScalar(plane.constant)
ssNorm.project(this.viewer.camera)
// convert to screen pixel coords
ssNorm.multiplyScalar(0.5).addScalar(0.5).multiply(resolution)
ssNorm.setComponent(2, 0.0).normalize()
console.log(ssNorm)

// mouse displacement
let mD = this.mouseDown.clone().sub(new THREE.Vector3(e.x, e.y, 0.0))
let mag = mD.length()
mD.normalize()
console.log(mD)

// quantity of mD on ssNorm
let d = (ssNorm.dot(mD) / ssNorm.lengthSq())
console.log(d)
let displacement = new THREE.Vector3(d,d,d).multiply(plane.normal).multiplyScalar(mag)
plane.translate(displacement)
console.log(displacement)

this.boxMesh.geometry.vertices.map((v,i) => {
if(!planeObj.indices.includes(i)) return
this.boxMesh.geometry.vertices[i].add(displacement)
})
this.boxMesh.geometry.verticesNeedUpdate = true
console.log("5")
//https://threejsfundamentals.org/threejs/lessons/threejs-align-html-elements-to-3d.html
let ssNormStart = plane.normal.clone().multiplyScalar(plane.constant)
let ssNormEnd = ssNormStart.clone().multiplyScalar(2)
ssNormStart.project(this.viewer.camera)
ssNormEnd.project(this.viewer.camera)

let x = (ssNormStart.x * .5 + 0.5) * this.viewer.renderer.domElement.clientWidth
let y = (ssNormStart.y * .5 + 0.5) * this.viewer.renderer.domElement.clientHeight
this.elem1.style.transform = `translate(-50%,-50%) translate(${x}px,${y}px)`

x = (tempV2.x * .5 + 0.5) * this.viewer.renderer.domElement.clientWidth
y = (tempV2.y * .5 + 0.5) * this.viewer.renderer.domElement.clientHeight * -1
console.log("x: ", x, "y: ", y)
x = (ssNormEnd.x * .5 + 0.5) * this.viewer.renderer.domElement.clientWidth
y = (ssNormEnd.y * .5 + 0.5) * this.viewer.renderer.domElement.clientHeight * -1
this.elem2.style.transform = `translate(-50%,-50%) translate(${x}px,${y}px)`

// this looks promising - will have to figure out how to move stuff next
})
}

Expand Down
Loading

0 comments on commit 03466e0

Please sign in to comment.