Skip to content

Commit

Permalink
Merge pull request #55 from brown-ccv/clean-aframe
Browse files Browse the repository at this point in the history
Clean aframe
  • Loading branch information
RobertGemmaJr committed Jan 28, 2022
2 parents fbcc8c0 + cd867a5 commit ea6d116
Show file tree
Hide file tree
Showing 16 changed files with 1,271 additions and 1,653 deletions.
682 changes: 341 additions & 341 deletions example/package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion example/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ function App() {
}

const StyledVolumeViewer = styled(VolumeViewer)`
height: 75vh;
height: 76vh;
`;

const Main = styled.main`
Expand Down
925 changes: 427 additions & 498 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,6 @@
"dependencies": {
"@reach/listbox": "^0.16.2",
"aframe": "^1.2.0",
"aframe-event-set-component": "^5.0.0",
"aframe-orbit-controls": "^1.3.0",
"d3-scale": "^4.0.2",
"rc-slider": "^9.7.4"
},
Expand Down
30 changes: 16 additions & 14 deletions src/Aframe/ccvLibVolumeShader.js → src/Aframe/Shader.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
THREE.ShaderLib["ccvLibVolumeRenderShader"] = {
/* globals THREE */

THREE.ShaderLib["ModelShader"] = {
uniforms: {
slice: { value: 1.0 },
dim: { value: 1.0 },
clipPlane: { value: new THREE.Matrix4() },
box_max: { value: new THREE.Vector3(1, 1, 1) },
box_min: { value: new THREE.Vector3(0, 0, 0) },
channel: { value: 1 },
clipping: { value: false },
threshold: { value: 1 },
clipPlane: { value: new THREE.Matrix4() },
controllerPoseMatrix: { value: new THREE.Matrix4() },
depth: { value: null },
dim: { value: 1.0 },
grabMesh: { value: false },
intensity: { value: 1.0 },
multiplier: { value: 1 },
P_inv: { value: new THREE.Matrix4() },
slice: { value: 1.0 },
step_size: { value: new THREE.Vector3(1, 1, 1) },
channel: { value: 1 },
threshold: { value: 1 },
u_data: { value: null },
u_lut: { value: null },
useLut: { value: true },
viewPort: { value: new THREE.Vector2() },
P_inv: { value: new THREE.Matrix4() },
u_data: { value: null },
depth: { value: null },
zScale: { value: 1.0 },
controllerPoseMatrix: { value: new THREE.Matrix4() },
grabMesh: { value: false },
box_min: { value: new THREE.Vector3(0, 0, 0) },
box_max: { value: new THREE.Vector3(1, 1, 1) },
intensity: { value: 1.0 },
},

vertexShader: [
Expand Down
73 changes: 20 additions & 53 deletions src/Aframe/arcball-camera.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* globals AFRAME THREE*/
/* globals AFRAME THREE*/
import "./arcball-controller.js";

let bind = AFRAME.utils.bind;
const bind = AFRAME.utils.bind;

AFRAME.registerComponent("arcball-camera", {
dependencies: ["camera"],
Expand All @@ -11,93 +11,62 @@ AFRAME.registerComponent("arcball-camera", {
},

init: function () {
let el = this.el;
this.vrcam = document.querySelector("#camera");
const el = this.el;

this.oldPosition = new THREE.Vector3();
this.oldMatrix = new THREE.Matrix4();
this.meshObjectHandler = document.getElementById("volumeCube").object3D;

// Create controls
this.controls = new THREE.TrackballControls(
el.getObject3D("camera"),
el.sceneEl.renderer.domElement
);

this.meshObjectHandler = document.getElementById("volumeCube").object3D;
this.controls.rotateSpeed = 1.0;
this.controls.zoomSpeed = 1.2;
this.controls.panSpeed = 0.8;
this.oldPosition = new THREE.Vector3();
this.oldMatrix = new THREE.Matrix4();

this.debugPosition = false;

this.bindMethods();
this.onWindowResize = this.onWindowResize.bind(this);

// Bind functions and add event listeners
this.onEnterVR = bind(this.onEnterVR, this);
this.onExitVR = bind(this.onExitVR, this);
el.sceneEl.addEventListener("enter-vr", this.onEnterVR);
el.sceneEl.addEventListener("exit-vr", this.onExitVR);

window.addEventListener("resize", this.onWindowResize, false);

// Move camera to initial position
el.getObject3D("camera").position.copy(this.data.initialPosition);

// Set the pointer to grab/grabbing when over the vr canvas
const aCanvas = document.querySelector(".a-canvas");
aCanvas.style.cursor = "grab";

document.addEventListener("mousedown", () => {
aCanvas.style.cursor = "grabbing";
});
document.addEventListener("mouseup", () => {
aCanvas.style.cursor = "grab";
});
},

onWindowResize() {},

bindMethods: function () {
this.onEnterVR = bind(this.onEnterVR, this);
this.onExitVR = bind(this.onExitVR, this);
},

onEnterVR: function () {
let el = this.el;
this.debugPosition = true;
const el = this.el;
if (
!AFRAME.utils.device.checkHeadsetConnected() &&
!AFRAME.utils.device.isMobile()
) {
return;
}

this.controls.enabled = false;
if (el.hasAttribute("look-controls")) {
el.setAttribute("look-controls", "enabled", true);

// Store position from before VR and move to origin
this.oldMatrix.copy(this.meshObjectHandler.matrixWorld);
this.oldPosition.copy(el.getObject3D("camera").position);
el.getObject3D("camera").position.set(0, 0, 0);
}
},

update: function (oldData) {
let controls = this.controls;
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
},

onExitVR: function () {
console.log("exit VR");
let el = this.el;
this.debugPosition = false;
const el = this.el;

if (
!AFRAME.utils.device.checkHeadsetConnected() &&
!AFRAME.utils.device.isMobile()
) {
return;
}
this.controls.enabled = true;
el.getObject3D("camera").position.set(0, 0, 2);
console.log(
"this.meshObjectHandler.el.getAttribute('loader').meshPosition"
);
let mesh = this.meshObjectHandler.el.getAttribute("loader").meshPosition;
console.log(mesh);
el.getObject3D("camera").position.set(this.oldPosition);

if (el.hasAttribute("look-controls")) {
el.setAttribute("look-controls", "enabled", false);
Expand All @@ -108,8 +77,6 @@ AFRAME.registerComponent("arcball-camera", {
if (this.controls.enabled) {
this.controls.update();
}
if (this.debugPosition) {
}
},

remove: function () {
Expand Down
43 changes: 28 additions & 15 deletions src/Aframe/buttons-check.js
Original file line number Diff line number Diff line change
@@ -1,27 +1,40 @@
/* globals AFRAME */

// TODO: Change vars to triggerDown and gripDown
AFRAME.registerComponent("buttons-check", {
schema: {
clipPlane: { type: "boolean", default: false },
grabObject: { type: "boolean", default: false },
},

init: function () {
this.el.addEventListener("gripdown", (evt) => {
this.data.clipPlane = true;
});

this.el.addEventListener("gripup", (evt) => {
this.data.clipPlane = false;
});
this.onGripDown = this.onGripDown.bind(this);
this.onGripUp = this.onGripDown.bind(this);
this.onTriggerDown = this.onTriggerDown.bind(this);
this.onTriggerUp = this.onTriggerUp.bind(this);
this.el.addEventListener("gripdown", this.onGripDown);
this.el.addEventListener("gripup", this.onGripUp);
this.el.addEventListener("triggerdown", this.onTriggerDown);
this.el.addEventListener("triggerup", this.onTriggerUp);
},

this.el.addEventListener("triggerdown", (evt) => {
this.data.grabObject = true;
console.log(this.data.grabObject);
});
remove: function () {
this.el.removeEventListener("gripdown", this.onGripDown);
this.el.removeEventListener("gripup", this.onGripUp);
this.el.removeEventListener("triggerdown", this.onTriggerDown);
this.el.removeEventListener("triggerup", this.onTriggerUp);
},

this.el.addEventListener("triggerup", (evt) => {
this.data.grabObject = false;
console.log(this.data.grabObject);
});
onGripDown: function (e) {
this.data.clipPlane = true;
},
onGripUp: function (e) {
this.data.clipPlane = false;
},
onTriggerDown: function (e) {
this.data.grabObject = true;
},
onTriggerUp: function (e) {
this.data.grabObject = false;
},
});
22 changes: 22 additions & 0 deletions src/Aframe/collider-check.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/* globals AFRAME */

AFRAME.registerComponent("collider-check", {
dependencies: ["raycaster", "buttons-check"],

schema: {
intersecting: { type: "boolean", default: false },
},

init: function () {
this.onCollide = this.onCollide.bind(this);
this.el.addEventListener("raycaster-intersection", this.onCollide);
},

onCollide: function (e) {
this.data.intersecting = true;
},

remove: function () {
this.el.removeEventListener("raycaster-intersection", this.onCollide);
},
});
42 changes: 0 additions & 42 deletions src/Aframe/cursor-listener.js

This file was deleted.

20 changes: 20 additions & 0 deletions src/Aframe/entity-collider-check.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/* globals AFRAME */

AFRAME.registerComponent("entity-collider-check", {
schema: {
intersected: { type: "boolean", default: false },
},

init: function () {
this.onCollide = this.onCollide.bind(this);
this.el.addEventListener("raycaster-intersected", this.onCollide);
},

remove: function () {
this.el.removeEventListener("raycaster-intersected", this.onCollide);
},

onCollide: function (e) {
this.data.intersected = true;
},
});
Loading

0 comments on commit ea6d116

Please sign in to comment.