link component: allows setting previewDistance (#4425)

* removes event listeners when WebXR session ends * link component: allows setting previewDistance * link component: previewDistance has mininum; link-traversal example clearer * link component: previewDistance set automatically from scale * link component: default preview distance is now constant, not magic number * Remove unnecessary assignment --------- Co-authored-by: Diego Marcos <[email protected]>
aframevr · Nov 21, 2024 · 8163478 · 8163478
1 parent 2782f33
commit 8163478
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/docs/components/link.md b/docs/components/link.md
@@ -68,7 +68,7 @@ We also provide a link primitive with a different syntax:
 | highlightedColor    | Border color when highlighted.                                                                                                               | '#24CAFF'     |
 | href                | Destination URL where the link points to.                                                                                                    | ''            |
 | image               | 360&deg; image used as scene preview in the portal. Can be a selector to an `<img>` element or a URL.                                        | ''            |
-| on                  | Event to listen to that triggers link traversal.                                                                                             | 'click'        |
+| on                  | Event to listen to that triggers link traversal.                                                                                             | 'click'       |
 | peekMode            | Whether the 360&deg; image is fully expanded for preview.                                                                                    | false         |
 | title               | Text displayed on the link. The `href` or page URL is used if not defined.                                                                   | ''            |
 | titleColor          | Color of the text displayed on the link.                                                                                                     | white         |

diff --git a/src/components/link.js b/src/components/link.js
@@ -1,6 +1,7 @@
 var registerComponent = require('../core/component').registerComponent;
 var registerShader = require('../core/shader').registerShader;
 var THREE = require('../lib/three');
+var DEFAULT_PREVIEW_DISTANCE = 15.0;
 
 /**
  * Link component. Connect experiences and traverse between them in VR
@@ -38,6 +39,9 @@ module.exports.Component = registerComponent('link', {
 
     if (!data.visualAspectEnabled) { return; }
 
+    var elScale = this.el.getAttribute('scale');
+    this.previewDistance = DEFAULT_PREVIEW_DISTANCE * (elScale.x + elScale.y) / 2;
+
     this.initVisualAspect();
 
     backgroundColor = data.highlighted ? data.highlightedColor : data.backgroundColor;
@@ -108,7 +112,7 @@ module.exports.Component = registerComponent('link', {
 
     // Set portal.
     el.setAttribute('geometry', {primitive: 'circle', radius: 1.0, segments: 64});
-    el.setAttribute('material', {shader: 'portal', pano: this.data.image, side: 'double'});
+    el.setAttribute('material', {shader: 'portal', pano: this.data.image, side: 'double', previewDistance: this.previewDistance});
 
     // Set text that displays the link title and URL.
     textEl.setAttribute('text', {
@@ -136,7 +140,8 @@ module.exports.Component = registerComponent('link', {
       shader: 'portal',
       borderEnabled: 0.0,
       pano: this.data.image,
-      side: 'back'
+      side: 'back',
+      previewDistance: this.previewDistance
     });
     semiSphereEl.setAttribute('rotation', '0 180 0');
     semiSphereEl.setAttribute('position', '0 0 0');
@@ -154,7 +159,8 @@ module.exports.Component = registerComponent('link', {
       shader: 'portal',
       borderEnabled: 0.0,
       pano: this.data.image,
-      side: 'back'
+      side: 'back',
+      previewDistance: this.previewDistance
     });
     sphereEl.setAttribute('visible', false);
     el.appendChild(sphereEl);
@@ -199,7 +205,7 @@ module.exports.Component = registerComponent('link', {
       cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
       distance = elWorldPosition.distanceTo(cameraWorldPosition);
 
-      if (distance > 20) {
+      if (distance > this.previewDistance * 1.33333) {
         // Store original orientation to be restored when the portal stops facing the camera.
         if (!this.previousQuaternion) {
           this.quaternionClone.copy(quaternion);
@@ -327,7 +333,8 @@ registerShader('portal', {
     borderEnabled: {default: 1.0, type: 'int', is: 'uniform'},
     backgroundColor: {default: 'red', type: 'color', is: 'uniform'},
     pano: {type: 'map', is: 'uniform'},
-    strokeColor: {default: 'white', type: 'color', is: 'uniform'}
+    strokeColor: {default: 'white', type: 'color', is: 'uniform'},
+    previewDistance: {default: DEFAULT_PREVIEW_DISTANCE, type: 'float', is: 'uniform'}
   },
 
   vertexShader: [
@@ -350,6 +357,7 @@ registerShader('portal', {
     'uniform vec3 strokeColor;',
     'uniform vec3 backgroundColor;',
     'uniform float borderEnabled;',
+    'uniform float previewDistance;',
     'varying float vDistanceToCenter;',
     'varying float vDistance;',
     'varying vec3 vWorldPosition;',
@@ -362,7 +370,7 @@ registerShader('portal', {
     'if (vDistanceToCenter > borderThickness && borderEnabled == 1.0) {',
     'gl_FragColor = vec4(strokeColor, 1.0);',
     '} else {',
-    'gl_FragColor = mix(texture2D(pano, sampleUV), vec4(backgroundColor, 1.0), clamp(pow((vDistance / 15.0), 2.0), 0.0, 1.0));',
+    'gl_FragColor = mix(texture2D(pano, sampleUV), vec4(backgroundColor, 1.0), clamp(pow((vDistance / previewDistance), 2.0), 0.0, 1.0));',
     '}',
     '}'
   ].join('\n')