Question

我正在尝试学习A-Frame而我正在愚弄不同的例子。目前我在360画廊示例中https://aframe.io/examples/showcase/360-image-gallery/ 我正在试图找出如何让拇指根据点击的拇指来改变位置。

因此，如果单击拇指1，则位置可能是thumb1“0 -1 -4”，thumb2“1 -1 -4”，thumb3“2 -1 -4”。

如果单击拇指2，位置可能是thumb1“20 -1 -4”，thumb2“21 -1 -4”，thumb3“22 -1 -4”

如果点击拇指3，位置可能是thumb1“40 -1 -4”，thumb2“41 -1 -4”，thumb3“42 -1 -4” 我对此完全陌生，任何帮助都会很棒！我在想这样的事情，但我无法弄清楚改变立场的脚本。我知道这与改变天空图像非常相似。

<img id="city-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg" thmbpos1="1 1 1" thmbpos2="2 1 2" thmbpos3="3 1 3">

<img id="cubes-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg" thmbpos1="1 1 1" thmbpos2="1 2 2" thmbpos3="1 3 3">
<img id="sechelt-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg" thmbpos1="1 1 1" thmbpos2="2 2 2" thmbpos3="3 3 3">

这是html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>360&deg; Image Gallery</title>
<meta name="description" content="360&deg; Image Gallery - A-Frame">
<script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
<script src="https://npmcdn.com/aframe-animation-component@3.0.1"></script>
<script src="https://npmcdn.com/aframe-event-set-component@3.0.1"></script>
<script src="https://npmcdn.com/aframe-layout-component@3.0.1"></script>
<script src="https://npmcdn.com/aframe-template-component@3.1.1"></script>
<script src="components/set-image.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<img id="city" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg">
<img id="city-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg">
<img id="cubes-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg">
<img id="sechelt-thumb" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg">
<audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg">
</audio>
    <img id="cubes" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg">
    <img id="sechelt" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">

    <!-- Image link template to be reused. -->
    <script id="link" type="text/html">
      <a-entity class="link"
        geometry="primitive: plane; height: 1; width: 1"
        material="shader: flat; src: ${thumb}"
        event-set__1="_event: mousedown; scale: 1 1 1"
        event-set__2="_event: mouseup; scale: 1.2 1.2 1"
        event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
        event-set__4="_event: mouseleave; scale: 1 1 1"
        set-image="on: click; target: #image-360; src: ${src}"
        sound="on: click; src: #click-sound"></a-entity>
    </script>
  </a-assets>

  <!-- 360-degree image. -->
  <a-sky id="image-360" radius="10" src="#city"></a-sky>

  <!-- Image links. -->
  <a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
    <a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
    <a-entity template="src: #link" data-src="#city" data-thumb="#city-thumb"></a-entity>
    <a-entity template="src: #link" data-src="#sechelt" data-thumb="#sechelt-thumb"></a-entity>
  </a-entity>

  <!-- Camera + cursor. -->
  <a-entity camera look-controls>
    <a-cursor id="cursor"
      animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
      animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
      event-set__1="_event: mouseenter; color: springgreen"
      event-set__2="_event: mouseleave; color: black"
      fuse="true"
      raycaster="objects: .link"></a-cursor>
  </a-entity>
</a-scene>
</body>
</html>

这是set-image.js

/* global AFRAME */

/**
* Component that listens to an event, fades out an entity, swaps the texture, and fades it
* back in.
*/
AFRAME.registerComponent('set-image', {
  schema: {
    on: {type: 'string'},
    target: {type: 'selector'},
    src: {type: 'string'},
    dur: {type: 'number', default: 300}
  },

  init: function () {
    var data = this.data;
    var el = this.el;

    this.setupFadeAnimation();

    el.addEventListener(data.on, function () {
      // Fade out image.
      data.target.emit('set-image-fade');
      // Wait for fade to complete.
      setTimeout(function () {
        // Set image.
        data.target.setAttribute('material', 'src', data.src);
      }, data.dur);
    });
  },

  /**
   * Setup fade-in + fade-out.
   */
  setupFadeAnimation: function () {
    var data = this.data;
    var targetEl = this.data.target;

    // Only set up once.
    if (targetEl.dataset.setImageFadeSetup) { return; }
    targetEl.dataset.setImageFadeSetup = true;

    // Create animation.
    targetEl.setAttribute('animation__fade', {
      property: 'material.color',
      startEvents: 'set-image-fade',
      dir: 'alternate',
      dur: data.dur,
      from: '#FFF',
      to: '#000'
    });
  } 
});

根据单击的链接更改实体位置

0 个答案: