Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

HoverScale Improvements #204

Open
NGenesis wants to merge 4 commits into
base: master
Choose a base branch
from
Open

HoverScale Improvements #204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
87a7cee
Updated to AltspaceSDK v2.4.5
May 28, 2017
2f6986f
Added eventListener property to HoverScale behavior to allow other ob…
May 28, 2017
30b4693
Revert "Updated to AltspaceSDK v2.4.5"
May 28, 2017
67648f0
Added test case for HoverScale.
Jun 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions examples/tests/behaviors-hoverscale.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>HoverScale Test</title>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r84/build/three.js"></script>
<script src="../../dist/altspace.js"></script>
</head>
<body>
<script>
if (!window.altspace || !window.altspace.inClient) {
document.write('<h3>To view this example, please open this page in <a href="http://altvr.com"> AltspaceVR </a></h3>');
}

var sim = new altspace.utilities.Simulation();

altspace.getEnclosure().then(function(enclosure) {
enclosure.requestFullspace().then(function() {
// Hovering over boxTarget will affect the scale of boxTarget
// Hovering over boxNeutral or boxTrigger will not affect the scale of boxTarget
var boxTrigger = new THREE.Mesh(new THREE.BoxBufferGeometry(0.8, 0.8, 0.3), new THREE.MeshBasicMaterial({ color: 'blue' }));
var boxNeutral = new THREE.Mesh(new THREE.BoxBufferGeometry(0.8, 0.8, 0.3), new THREE.MeshBasicMaterial({ color: 'green' }));
boxNeutral.position.x = 1;
var boxTarget = new THREE.Mesh(new THREE.BoxBufferGeometry(2, 0.5, 0.3), new THREE.MeshBasicMaterial({ color: 'red' }));
boxTarget.position.set(0.5, -0.8, 0);
boxTarget.addBehavior(new altspace.utilities.behaviors.HoverScale({ scale: 1.2, duration: 150 }));

var boxes = new THREE.Group();
boxes.position.set(-2.5, 2, 0);
boxes.add(boxTrigger, boxNeutral, boxTarget);
sim.scene.add(boxes);

// Hovering over boxTrigger, boxNeutral or boxTarget will affect the scale of boxTrigger, boxNeutral and boxTarget
var boxTrigger = new THREE.Mesh(new THREE.BoxBufferGeometry(0.8, 0.8, 0.3), new THREE.MeshBasicMaterial({ color: 'blue' }));
var boxNeutral = new THREE.Mesh(new THREE.BoxBufferGeometry(0.8, 0.8, 0.3), new THREE.MeshBasicMaterial({ color: 'green' }));
boxNeutral.position.x = 1;
var boxTarget = new THREE.Mesh(new THREE.BoxBufferGeometry(2, 0.5, 0.3), new THREE.MeshBasicMaterial({ color: 'red' }));
boxTarget.position.set(0.5, -0.8, 0);

var boxes = new THREE.Group();
boxes.position.set(0, 2, 0);
boxes.add(boxTrigger, boxNeutral, boxTarget);
boxes.addBehavior(new altspace.utilities.behaviors.HoverScale({ scale: 1.2, duration: 150 }));
sim.scene.add(boxes);

// Hovering over boxTrigger will affect the scale of boxTarget
// Hovering over boxNeutral or boxTarget will not affect the scale of boxTarget
var boxTrigger = new THREE.Mesh(new THREE.BoxBufferGeometry(0.8, 0.8, 0.3), new THREE.MeshBasicMaterial({ color: 'blue' }));
var boxNeutral = new THREE.Mesh(new THREE.BoxBufferGeometry(0.8, 0.8, 0.3), new THREE.MeshBasicMaterial({ color: 'green' }));
boxNeutral.position.x = 1;
var boxTarget = new THREE.Mesh(new THREE.BoxBufferGeometry(2, 0.5, 0.3), new THREE.MeshBasicMaterial({ color: 'red' }));
boxTarget.position.set(0.5, -0.8, 0);
boxTarget.addBehavior(new altspace.utilities.behaviors.HoverScale({ scale: 1.2, duration: 150, eventListener: boxTrigger }));

var boxes = new THREE.Group();
boxes.position.set(2.5, 2, 0);
boxes.add(boxTrigger, boxNeutral, boxTarget);
sim.scene.add(boxes);
});
});
</script>
</body>
</html>
16 changes: 10 additions & 6 deletions src/utilities/behaviors/HoverScale.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import Behavior from './Behavior';
* @param {Number} [config.scale=1.15] A scaling factor that will be applied to the object's initial scale when the cursor hovers over it.
* @param {Number} [config.duration=75] Duration the scaling effect is intended to take to complete, in milliseconds.
* @param {Boolean} [config.revertOnDispose=true] Specifies whether the object's original scale should be restored when the behavior has been destroyed.
* @param {Object} [config.eventListener=null] Specifies an optional object that will listen for cursor events. By default the object that the behavior is attached to will be used as the event listener.
* @extends module:altspace/utilities/behaviors.Behavior
* @memberof module:altspace/utilities/behaviors
*/
Expand All @@ -20,7 +21,7 @@ class HoverScale extends Behavior
{
super();
this.config = Object.assign(
{scale: 1.15, duration: 75, revertOnDispose: true},
{scale: 1.15, duration: 75, revertOnDispose: true, eventListener: null},
config
);

Expand All @@ -30,11 +31,12 @@ class HoverScale extends Behavior
this.progress = 1;
this.srcScale = null;
this.destScale = null;
this.eventListener = null;

this.onHoverStateChange = (() => {
[this.srcScale, this.destScale] = [this.destScale, this.srcScale];
this.progress = 1 - this.progress;
this.elapsedTime = this.config.duration - this.elapsedTime;
this.elapsedTime = this.config.duration * this.progress;
}).bind(this);
}

Expand All @@ -52,8 +54,9 @@ class HoverScale extends Behavior
this.progress = 1;
this.elapsedTime = this.config.duration;

this.object3d.addEventListener('cursorenter', this.onHoverStateChange);
this.object3d.addEventListener('cursorleave', this.onHoverStateChange);
this.eventListener = this.config.eventListener || this.object3d;
this.eventListener.addEventListener('cursorenter', this.onHoverStateChange);
this.eventListener.addEventListener('cursorleave', this.onHoverStateChange);
}

update(deltaTime)
Expand All @@ -70,8 +73,8 @@ class HoverScale extends Behavior

dispose()
{
this.object3d.removeEventListener('cursorenter', this.onHoverStateChange);
this.object3d.removeEventListener('cursorleave', this.onHoverStateChange);
this.eventListener.removeEventListener('cursorenter', this.onHoverStateChange);
this.eventListener.removeEventListener('cursorleave', this.onHoverStateChange);

// Restore Original Object Scale Before Behavior Was Applied
if(this.config.revertOnDispose)
Expand All @@ -81,6 +84,7 @@ class HoverScale extends Behavior
this.srcScale = null;
this.destScale = null;
this.object3d = null;
this.eventListener = null;
}


Expand Down