当前位置： 文江博客话题详情

单击按钮时 Aframe 循环浏览天空图像源

发布于 2025-01-09 17:38:15 字数 2889 浏览 0 评论 0原文

我正在尝试使用前进和后退按钮循环浏览设置为a-sky的全景图像。但我在 js 逻辑上遇到了困难。任何帮助表示赞赏。下面的示例在数组中使用了 3 个图像，但实际上会有数百个图像。

  function goNext() {

    var zerod = 0;
    var images = ["https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg", 
                  "https://aframe.io/aframe/examples/showcase/composite/lake.jpg", 
                  "https://l13.alamy.com/360/PWNBM9/testing-new-cameralens-combination-in-my-garden-in-aarhus-denmark-PWNBM9.jpg"]

    function nextimage() {
    console.log(zerod)
      $("#sky").attr("src", images[zerod])
      zerod = (zerod < images.length + 1) ? ++zerod : 0
    }
    nextimage();
  };
  
    function goBack() {

    var zerod = 0;
    var images = ["https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg", 
                  "https://aframe.io/aframe/examples/showcase/composite/lake.jpg", 
                  "https://l13.alamy.com/360/PWNBM9/testing-new-cameralens-combination-in-my-garden-in-aarhus-denmark-PWNBM9.jpg"]

    function previmage() {
    console.log(zerod)
      $("#sky").attr("src", images[zerod])
      zerod = (zerod < images.length - 1) ? ++zerod : 0
    }
    previmage();
  };
.menu {
    position: absolute;
    bottom: 15px;
    z-index: 2;
    right: 15px;
}

.menu a {
    display: block;
    background: rgba(0, 0, 0, 0.35);
    color: white;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
    text-decoration: none;
    font-family: tahoma;
    margin: 5px;
    text-align: center;
    cursor: pointer;
}
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>  
</head>
    
<body>
        <div class="menu">
        <!--<br>-->
        <a id="forward" onClick="goNext()">Forward</a>
        <!--<br>-->
        <a id="back" onClick="goBack()">Back</a>
        <!--<br>-->
        <a id="vr" onclick="document.querySelector('a-scene').enterVR()">VR</a>
        </div>

    <a-scene image-toggle vr-mode-ui="enabled: false">
           
    <a-assets>
      <img id="skybox" src="https://l13.alamy.com/360/PWNBM9/testing-new-cameralens-combination-in-my-garden-in-aarhus-denmark-PWNBM9.jpg">
    </a-assets>
        
      <a-sky id="sky" src="#skybox"></a-sky>
        <a-camera id="camera" look-controls="pointerLockEnabled: false">
        </a-camera>
    </a-scene>
</body>

原文

I'm trying to cycle through over panoramic images set as a-sky, using the forward and back buttons. But I'm struggling with the js logic. Any help is appreciated. The below example uses 3 images in the array, but in practice it'll have hundreds.

  function goNext() {

    var zerod = 0;
    var images = ["https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg", 
                  "https://aframe.io/aframe/examples/showcase/composite/lake.jpg", 
                  "https://l13.alamy.com/360/PWNBM9/testing-new-cameralens-combination-in-my-garden-in-aarhus-denmark-PWNBM9.jpg"]

    function nextimage() {
    console.log(zerod)
      $("#sky").attr("src", images[zerod])
      zerod = (zerod < images.length + 1) ? ++zerod : 0
    }
    nextimage();
  };
  
    function goBack() {

    var zerod = 0;
    var images = ["https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg", 
                  "https://aframe.io/aframe/examples/showcase/composite/lake.jpg", 
                  "https://l13.alamy.com/360/PWNBM9/testing-new-cameralens-combination-in-my-garden-in-aarhus-denmark-PWNBM9.jpg"]

    function previmage() {
    console.log(zerod)
      $("#sky").attr("src", images[zerod])
      zerod = (zerod < images.length - 1) ? ++zerod : 0
    }
    previmage();
  };
.menu {
    position: absolute;
    bottom: 15px;
    z-index: 2;
    right: 15px;
}

.menu a {
    display: block;
    background: rgba(0, 0, 0, 0.35);
    color: white;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-top: 5px;
    text-decoration: none;
    font-family: tahoma;
    margin: 5px;
    text-align: center;
    cursor: pointer;
}
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>  
</head>
    
<body>
        <div class="menu">
        <!--<br>-->
        <a id="forward" onClick="goNext()">Forward</a>
        <!--<br>-->
        <a id="back" onClick="goBack()">Back</a>
        <!--<br>-->
        <a id="vr" onclick="document.querySelector('a-scene').enterVR()">VR</a>
        </div>

    <a-scene image-toggle vr-mode-ui="enabled: false">
           
    <a-assets>
      <img id="skybox" src="https://l13.alamy.com/360/PWNBM9/testing-new-cameralens-combination-in-my-garden-in-aarhus-denmark-PWNBM9.jpg">
    </a-assets>
        
      <a-sky id="sky" src="#skybox"></a-sky>
        <a-camera id="camera" look-controls="pointerLockEnabled: false">
        </a-camera>
    </a-scene>
</body>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

佼人 2025-01-16 17:38:15

首先，goNext() 和 goBack() 将 zerod 设置为 0；

其次，您要在设置源之前更改索引。
想象一下调用 goNext() 和 goBack()：

// goNext()
$("#sky").attr("src", images[zerod])              // zerod is 0 here
zerod = (zerod < images.length + 1) ? ++zerod : 0 // zerod i 1 here

// goBack()
$("#sky").attr("src", images[zerod]) // zerod is 1 here! Nothing changes!
zerod = (zerod < images.length - 1) ? ++zerod : 0

在这种情况下，如果您在 goNext() 之后单击它，则 goBack() 不会执行任何操作

最后但并非最不重要的 - 条件：

// goNext()
// three images, but you check if the index is less then 4?
zerod = (zerod < images.length + 1) ? ++zerod : 0           

// goBack()
// you increase the index? thought you should be going back
zerod = (zerod < images.length - 1) ? ++zerod : 0

应该如下所示：

// goNext()
// switch to 0 when we're at the last image (2nd index for three images)
zerod = (zerod < images.length - 1) ? ++zerod : 0  
    
// goBack()
// decrease the index. change to the last image when at the first one
zerod = (zerod <= 0) ? --zerod : images.length - 1;

应用以下三点进行检查：

var zerod = 0;
var images = ["https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg",
  "https://aframe.io/aframe/examples/showcase/composite/lake.jpg",
  "https://l13.alamy.com/360/PWNBM9/testing-new-cameralens-combination-in-my-garden-in-aarhus-denmark-PWNBM9.jpg"
]

function goNext() {
  zerod = (zerod < images.length - 1) ? ++zerod : 0;
  console.log(zerod)
  $("#sky").attr("src", images[zerod])
}

function goBack() {
  zerod = (zerod != 0) ? --zerod : images.length -1;
    console.log(zerod)
  $("#sky").attr("src", images[zerod])
};
.menu {
  position: absolute;
  bottom: 15px;
  z-index: 2;
  right: 15px;
}

.menu a {
  display: block;
  background: rgba(0, 0, 0, 0.35);
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-decoration: none;
  font-family: tahoma;
  margin: 5px;
  text-align: center;
  cursor: pointer;
}
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>

<body>
  <div class="menu">
    <!--<br>-->
    <a id="forward" onClick="goNext()">Forward</a>
    <!--<br>-->
    <a id="back" onClick="goBack()">Back</a>
    <!--<br>-->
    <a id="vr" onclick="document.querySelector('a-scene').enterVR()">VR</a>
  </div>

  <a-scene image-toggle vr-mode-ui="enabled: false">

    <a-assets>
      <img id="skybox" src="https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg">
    </a-assets>

    <a-sky id="sky" src="#skybox"></a-sky>
    <a-camera id="camera" look-controls="pointerLockEnabled: false">
    </a-camera>
  </a-scene>
</body>

如果将其变成自定义组件：

.menu {
  position: absolute;
  bottom: 15px;
  z-index: 2;
  right: 15px;
}

.menu a {
  display: block;
  background: rgba(0, 0, 0, 0.35);
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-decoration: none;
  font-family: tahoma;
  margin: 5px;
  text-align: center;
  cursor: pointer;
}
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("image-changer", {
    init: function() {
      // grab the elements
      const nextbtn = document.getElementById("forward");
      const backbtn = document.getElementById("back");
      // react to the clicks
      nextbtn.addEventListener("click", () => {
        this.index = (this.index < this.images.length - 1) ? ++this.index : 0;
        this.changeImage()
      })
      backbtn.addEventListener("click", () => {
        this.index = (this.index != 0) ? --this.index : this.images.length - 1;
        this.changeImage()
      })
      // initial index and images values
      this.index = 0;
      this.images = ["https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg",
        "https://aframe.io/aframe/examples/showcase/composite/lake.jpg",
        "https://l13.alamy.com/360/PWNBM9/testing-new-cameralens-combination-in-my-garden-in-aarhus-denmark-PWNBM9.jpg"
      ]
      this.changeImage();
    },
    changeImage: function() {
      this.el.setAttribute("src", this.images[this.index])
    }
  })
</script>
<div class="menu">
  <!--<br>-->
  <a id="forward">Forward</a>
  <!--<br>-->
  <a id="back">Back</a>
  <!--<br>-->
  <a id="vr" onclick="document.querySelector('a-scene').enterVR()">VR</a>
</div>

<a-scene image-toggle vr-mode-ui="enabled: false">
  <a-sky id="sky" image-changer></a-sky>
  <a-camera id="camera" look-controls="pointerLockEnabled: false">
  </a-camera>
</a-scene>

First of all both goNext() and goBack() set zerod to 0;

Second of all you want to change the index before setting the source.
Imagine calling goNext() and goBack():

// goNext()
$("#sky").attr("src", images[zerod])              // zerod is 0 here
zerod = (zerod < images.length + 1) ? ++zerod : 0 // zerod i 1 here

// goBack()
$("#sky").attr("src", images[zerod]) // zerod is 1 here! Nothing changes!
zerod = (zerod < images.length - 1) ? ++zerod : 0

goBack() does nothing in this case if you click it after goNext()

Last but not least - the conditions:

// goNext()
// three images, but you check if the index is less then 4?
zerod = (zerod < images.length + 1) ? ++zerod : 0           

// goBack()
// you increase the index? thought you should be going back
zerod = (zerod < images.length - 1) ? ++zerod : 0

Should look like this:

// goNext()
// switch to 0 when we're at the last image (2nd index for three images)
zerod = (zerod < images.length - 1) ? ++zerod : 0  
    
// goBack()
// decrease the index. change to the last image when at the first one
zerod = (zerod <= 0) ? --zerod : images.length - 1;

Check it out with these three points applied:

var zerod = 0;
var images = ["https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg",
  "https://aframe.io/aframe/examples/showcase/composite/lake.jpg",
  "https://l13.alamy.com/360/PWNBM9/testing-new-cameralens-combination-in-my-garden-in-aarhus-denmark-PWNBM9.jpg"
]

function goNext() {
  zerod = (zerod < images.length - 1) ? ++zerod : 0;
  console.log(zerod)
  $("#sky").attr("src", images[zerod])
}

function goBack() {
  zerod = (zerod != 0) ? --zerod : images.length -1;
    console.log(zerod)
  $("#sky").attr("src", images[zerod])
};
.menu {
  position: absolute;
  bottom: 15px;
  z-index: 2;
  right: 15px;
}

.menu a {
  display: block;
  background: rgba(0, 0, 0, 0.35);
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-decoration: none;
  font-family: tahoma;
  margin: 5px;
  text-align: center;
  cursor: pointer;
}
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>

<body>
  <div class="menu">
    <!--<br>-->
    <a id="forward" onClick="goNext()">Forward</a>
    <!--<br>-->
    <a id="back" onClick="goBack()">Back</a>
    <!--<br>-->
    <a id="vr" onclick="document.querySelector('a-scene').enterVR()">VR</a>
  </div>

  <a-scene image-toggle vr-mode-ui="enabled: false">

    <a-assets>
      <img id="skybox" src="https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg">
    </a-assets>

    <a-sky id="sky" src="#skybox"></a-sky>
    <a-camera id="camera" look-controls="pointerLockEnabled: false">
    </a-camera>
  </a-scene>
</body>

Even better if you turn it into a custom component:

.menu {
  position: absolute;
  bottom: 15px;
  z-index: 2;
  right: 15px;
}

.menu a {
  display: block;
  background: rgba(0, 0, 0, 0.35);
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-decoration: none;
  font-family: tahoma;
  margin: 5px;
  text-align: center;
  cursor: pointer;
}
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("image-changer", {
    init: function() {
      // grab the elements
      const nextbtn = document.getElementById("forward");
      const backbtn = document.getElementById("back");
      // react to the clicks
      nextbtn.addEventListener("click", () => {
        this.index = (this.index < this.images.length - 1) ? ++this.index : 0;
        this.changeImage()
      })
      backbtn.addEventListener("click", () => {
        this.index = (this.index != 0) ? --this.index : this.images.length - 1;
        this.changeImage()
      })
      // initial index and images values
      this.index = 0;
      this.images = ["https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg",
        "https://aframe.io/aframe/examples/showcase/composite/lake.jpg",
        "https://l13.alamy.com/360/PWNBM9/testing-new-cameralens-combination-in-my-garden-in-aarhus-denmark-PWNBM9.jpg"
      ]
      this.changeImage();
    },
    changeImage: function() {
      this.el.setAttribute("src", this.images[this.index])
    }
  })
</script>
<div class="menu">
  <!--<br>-->
  <a id="forward">Forward</a>
  <!--<br>-->
  <a id="back">Back</a>
  <!--<br>-->
  <a id="vr" onclick="document.querySelector('a-scene').enterVR()">VR</a>
</div>

<a-scene image-toggle vr-mode-ui="enabled: false">
  <a-sky id="sky" image-changer></a-sky>
  <a-camera id="camera" look-controls="pointerLockEnabled: false">
  </a-camera>
</a-scene>

回复 原文
~没有更多了~

关于作者

叫嚣ゝ

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

紫罗兰の梦幻

文章 0 评论 0

-2134

文章 0 评论 0

liuxuanli

文章 0 评论 0

意中人

文章 0 评论 0

○愚か者の日

文章 0 评论 0

xxhui

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文