Skip to content
Permalink
Browse files

changed geometry deformation for clipping planes on the ripple effect…

… for square buttons - this means less geometry is created. Updated demo gif
  • Loading branch information...
shaneharris committed Jul 21, 2018
1 parent 52f56d7 commit 2e245eea62803b489ae4b9853f9065932cbb294b
BIN -968 KB (36%) demo.gif
Binary file not shown.
@@ -15,7 +15,7 @@
<a-assets>
<canvas id="textCanvas"></canvas>
</a-assets>
<a-entity id="camera" camera look-controls wasd-controls>
<a-entity id="camera" camera="near:1;far:1000" look-controls wasd-controls>
<a-entity id="cursor" cursor="rayOrigin: mouse" ui-mouse-move
raycaster="far: 30; objects: .intersectable;"></a-entity>
</a-entity>
@@ -1,6 +1,6 @@
{
"name": "aframe-material-collection",
"version": "0.1.12",
"version": "0.1.13",
"description": "Material UI based primitives and components for use in your aframe projects.",
"homepage": "https://github.com/shaneharris/aframe-material-collection",
"keywords": [
@@ -20,56 +20,83 @@ module.exports = AFRAME.registerComponent('ui-ripple',{
},
init(){
// Setup circle geometry for ripple effect
this.rippleGeometry = new THREE.CircleGeometry(0.001,this.data.segments);
this.rippleGeometry = new THREE.CircleGeometry(Math.max(this.data.size.x,this.data.size.y),this.data.segments);
this.ripple = new THREE.Mesh(this.rippleGeometry.clone(),new THREE.MeshBasicMaterial({color:this.data.color,transparent:true, opacity:0.4}));
this.ripple.scale.set(0.00001,0.00001,0.00001);
this.el.object3D.add(this.ripple);
this.el.addEventListener('click',this.click.bind(this));
this.ripple.position.set(0,0,this.data.zIndex);
// Set clipping planes if clamping to square
if(this.data.clampToSquare){

this.content_clips = [
new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), (this.data.size.y/2) ),
new THREE.Plane( new THREE.Vector3( 0, -1, 0 ), (this.data.size.y/2) ),
new THREE.Plane( new THREE.Vector3( -1, 0, 0 ), (this.data.size.x/2) ),
new THREE.Plane( new THREE.Vector3( 1, 0, 0 ), (this.data.size.x/2) )
];
}
},
click(e){
if(this.isRippling){
// Throttle clicks.
return e.preventDefault();
}
this.isRippling = true;
// Set clipping planes if clamping to square
if(this.data.clampToSquare){
this.setRippleClips(this.ripple.material);
}
// Animate the size of the circle ripple from the center of the entity.
this.tweenSize(this.ripple.geometry);
// Fade the circle out as it ripples.
this.tweenOpacity(this.ripple.material);
},
setRippleClips(){
// update content clips world positions from this current element.
this.content_clips[0].set(new THREE.Vector3( 0, 1, 0 ), (this.data.size.y/2));
this.content_clips[1].set(new THREE.Vector3( 0, -1, 0 ), (this.data.size.y/2));
this.content_clips[2].set(new THREE.Vector3( -1, 0, 0 ), (this.data.size.x/2));
this.content_clips[3].set(new THREE.Vector3( 1, 0, 0 ), (this.data.size.x/2));
this.el.sceneEl.object3D.updateMatrixWorld();
this.content_clips[0].applyMatrix4(this.el.object3D.matrixWorld);
this.content_clips[1].applyMatrix4(this.el.object3D.matrixWorld);
this.content_clips[2].applyMatrix4(this.el.object3D.matrixWorld);
this.content_clips[3].applyMatrix4(this.el.object3D.matrixWorld);
this.ripple.material.clippingPlanes = this.el._content_clips?this.el._content_clips.concat(this.content_clips):this.content_clips;
this.ripple.material.clipShadows = true;
this.ripple.material.needsUpdate = true;
},
tweenSize(geometry){
let _this = this;
new TWEEN.Tween({x:0})
.to({ x: Math.max(this.data.size.x,this.data.size.y)}, this.data.duration)
new TWEEN.Tween({x:0.00001})
.to({ x: 1}, this.data.duration)
.onUpdate(function(){
// Update the vertices and clamp if need be to lock to a rectangle shape.
for ( let i = 0, l = geometry.vertices.length; i < l; i ++ ) {
let vertex = geometry.vertices[ i ];
vertex.normalize().multiplyScalar( this.x );
if(_this.data.clampToSquare){
if(vertex.x>_this.data.size.x/2){
vertex.x = _this.data.size.x/2;
}
if(vertex.x<-_this.data.size.x/2){
vertex.x = -_this.data.size.x/2;
}
if(vertex.y>_this.data.size.y/2){
vertex.y = _this.data.size.y/2;
}
if(vertex.y<-_this.data.size.y/2){
vertex.y = -_this.data.size.y/2;
}
}
}
geometry.verticesNeedUpdate = true;
_this.ripple.scale.set(this.x,this.x,this.x);
// // Update the vertices and clamp if need be to lock to a rectangle shape.
// for ( let i = 0, l = geometry.vertices.length; i < l; i ++ ) {
// let vertex = geometry.vertices[ i ];
// vertex.normalize().multiplyScalar( this.x );
// // if(_this.data.clampToSquare){
// // if(vertex.x>_this.data.size.x/2){
// // vertex.x = _this.data.size.x/2;
// // }
// // if(vertex.x<-_this.data.size.x/2){
// // vertex.x = -_this.data.size.x/2;
// // }
// // if(vertex.y>_this.data.size.y/2){
// // vertex.y = _this.data.size.y/2;
// // }
// // if(vertex.y<-_this.data.size.y/2){
// // vertex.y = -_this.data.size.y/2;
// // }
// // }
// }
// geometry.verticesNeedUpdate = true;
})
.onComplete(()=>{
// Reset geometry after ripple
this.el.object3D.remove(this.ripple);
this.ripple.geometry = this.rippleGeometry.clone();
this.el.object3D.add(this.ripple);
_this.ripple.scale.set(0.00001,0.00001,0.00001);
// Reset throttle flag.
console.log('rippling done');
this.isRippling = false;
})
.easing(TWEEN.Easing.Exponential.Out).start();
@@ -83,7 +110,6 @@ module.exports = AFRAME.registerComponent('ui-ripple',{
})
.onComplete(()=>{
material.opacity = 0.4;
console.log('fading done');
})
.easing(TWEEN.Easing.Exponential.Out).start();
}
@@ -24,7 +24,7 @@ module.exports = AFRAME.registerComponent('ui-scroll-pane', {
this.scrollBarWidth = this.rail.getAttribute('width');
this.container.setAttribute('position',(-this.data.width/2)+' '+((this.data.height/2))+' 0');
this.rail.setAttribute('position',((this.data.width/2)+this.data.scrollPadding)+' 0 0.0002');
this.handle.setAttribute('position',((this.data.width/2)+this.data.scrollPadding)+' 0 0.0004');
this.handle.setAttribute('position',((this.data.width/2)+this.data.scrollPadding)+' 0 0.0005');
this.el.sceneEl.renderer.localClippingEnabled = true;
// Setup content clips.
this.content_clips = [
@@ -45,7 +45,7 @@ module.exports = AFRAME.registerComponent('ui-scroll-pane', {
let scroll_pos = THREE.Math.clamp(pos.y-this.handlePos,min,max);
let scroll_perc = 1-((scroll_pos-min)/(max-min));
this.container.object3D.position.y = ((this.content_height-this.data.height)*scroll_perc)+(this.data.height/2);
this.handle.setAttribute('position',((this.data.width/2)+this.data.scrollPadding)+' '+scroll_pos+' 0.0004');
this.handle.setAttribute('position',((this.data.width/2)+this.data.scrollPadding)+' '+scroll_pos+' 0.0005');
}
};
// Start scroll
@@ -81,7 +81,7 @@ module.exports = AFRAME.registerComponent('ui-scroll-pane', {
this.handle.setAttribute('height',this.data.height*this.handleSize);
this.handle.setAttribute('width',this.handleSize===1?0.00000001:0.1);
this.rail.setAttribute('color',this.handleSize===1?'#efefef':'#fff');
this.handle.setAttribute('position',((this.data.width/2)+this.data.scrollPadding)+' '+(this.data.height-(this.data.height*this.handleSize))/2+' 0.0004');
this.handle.setAttribute('position',((this.data.width/2)+this.data.scrollPadding)+' '+(this.data.height-(this.data.height*this.handleSize))/2+' 0.0005');
});

},
@@ -95,7 +95,6 @@ module.exports = AFRAME.registerComponent('ui-scroll-pane', {
this.backgroundPanel.setAttribute('position','0 0 -0.013');
this.backgroundPanel.setAttribute('visible',false);
this.el.appendChild(this.backgroundPanel);
console.log(this.data.contentBack);

// Add scroll bar rail.
this.rail = document.createElement('a-plane');
@@ -16,8 +16,6 @@ module.exports = AFRAME.registerPrimitive('a-ui-button', AFRAME.utils.extendDeep
material: {
color: '#009688',
shader: 'flat',
side: 'double',
transparent: true,
},
"ui-btn":{},
"ui-rounded":{borderRadius:0.005},
@@ -16,8 +16,6 @@ module.exports = AFRAME.registerPrimitive('a-ui-fab-button', AFRAME.utils.extend
material: {
color: '#009688',
shader: 'flat',
side: 'double',
transparent: true,
},
"ui-btn":{},
"ui-ripple":{size:{x:0.2,y:0.2},zIndex:0.002,fadeDelay:300,duration:500},
@@ -15,8 +15,6 @@ module.exports = AFRAME.registerPrimitive('a-ui-fab-button-small', AFRAME.utils.
material: {
color: '#009688',
shader: 'flat',
side: 'double',
transparent: true,
},
"ui-btn":{},
"ui-ripple":{size:{x:0.25,y:0.25},zIndex:-0.001,color:'#ff0000'},

0 comments on commit 2e245ee

Please sign in to comment.
You can’t perform that action at this time.