显示延迟隐藏显示...在 AR 框架中的实体上答案

【问题标题】：show delay hide show... on entity in aframe for AR显示延迟隐藏显示...在 AR 框架中的实体上
【发布时间】：2021-01-14 10:05:01
【问题描述】：

我有点 Dev noonb，但我想在 AR 应用程序中创建一个流程，允许我显示/延迟/隐藏/显示行为类型。

我正在使用 aframe 作为平台，所以现在尝试设计它。

体验将包括 5 个场景，其中显示多个资产，然后在播放一些动画后隐藏。

我尝试在场景级别更改可见 =true/false，但添加额外场景后第 8 面墙未加载。

创建一个函数来控制实体级别的取消隐藏是最好的方法吗？任何帮助将不胜感激。

这是我目前所拥有的

<a-entity
    id="model"
    gltf-model="#animatedModel"
    class="cantap"
    scale="55 55 55"
    animation-mixer="clip: FLOAT"
    xrextras-hold-drag 
    xrextras-two-finger-rotate
    xrextras-pinch-scale
    shadow
    visible="true">
  </a-entity>

目前它由按钮控制，但我希望它在 x 秒后自动发生

const nextButtonComponent = () => ({
  init() {
    const visibilityList = ['text', 'sun']
   const model = document.getElementById('model')
   const sunmodel = document.getElementById('sunmodel')
    const nextButton = document.getElementById('nextbutton')

    nextButton.style.display = 'block'

   
    const nextAnimation = () => {
      model.setAttribute('visible', false)
      sunmodel.setAttribute('visible', true)
    
    }
    nextButton.onclick = nextAnimation // Switch to the next animation when the button is pressed.
  },
})

export {nextButtonComponent}

【问题讨论】：

标签： javascript aframe 8thwall-xr

【解决方案1】：

您可以通过几种不同的方式做到这一点。

是的，您可以在场景中同时拥有两个模型，并在需要时隐藏一个，显示另一个。在您的示例中，单击按钮进行交换，但如果您想要时间延迟，请查看使用 setTimeout()

或者，您可以将一种模型换成另一种。看看这个例子：https://www.8thwall.com/playground/model-swap

它还使用按钮点击来更改模型（通过删除实体上的gltf-model 属性，然后设置一个新属性）。在这里，您还可以更改代码，这样您的“更改”函数可以在 X 秒后使用 setTimeout() 调用，而不是被按钮点击触发

https://www.w3schools.com/jsref/met_win_settimeout.asp

【讨论】：