javascript - 在 A-Frame (webvr) 中使用 collada 对象的事件集组件

标签 javascript html aframe webvr

我正在尝试使用 A-frame 的事件集组件插件在 collada 对象上创建旋转动画,我已经成功地使用 a-box 实现了此目的,但希望对 collada 对象进行动画处理。由于某种原因,我看不到 collada 对象,而且我不知道哪里出了问题。请参阅下面的代码以获取更多信息,我们将不胜感激任何帮助,谢谢。

<html>
<head>
<title>Model Test</title>
<script src="build.js"></script>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="aframe-animation-component.min.js"></script>
<script src="component/event-proxy.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@3.0.x/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/aframe-layout-component@4.1.0/dist/aframe-layout-component.min.js"></script>
</head>
<body>
<a-scene>
  <a-entity id="container" position="0 0 -2">
    <a-collada-model src="iPhone4.dae"
        animation__rotationX="property: rotation; dur: 10000;
                        easing: easeInSine; loop: true; to: 0 360 0;
                        startEvents: rotY; pauseEvents: animationPause;
                        resumeEvents: animationResume; restartEvents: animationRestart"
        animation__rotationY="property: rotation; dur: 10000;
                        easing: easeInSine; loop: true; to: 360 0 0;
                        startEvents: rotX; pauseEvents: animationPause;
                        resumeEvents: animationResume; restartEvents: animationRestart"

      position="0 1 -2">
    </a-collada-model>
    <a-mixin id="option"
             geometry="primitive: sphere; radius: .25;"
             material="color: red"
             event-proxy="listen: click; target: a-collada-model"
             ></a-mixin>
    <a-entity  position="-2.5 0 0">
      <a-entity mixin="option" event-proxy="emit: rotY" text="value: Rotation"></a-entity>
    </a-entity>
    <a-entity  position="2.5 0 0">
      <a-entity mixin="option" event-proxy="emit: rotX" text="value: Rotation"></a-entity>
    </a-entity>

    <a-entity position="0 -1.5 0">
      <a-sphere mixin="option" event-proxy="emit: animationPause" text="value: Pause"></a-entity>
    </a-entity>
  </a-entity>


  <!-- Sky. -->
  <a-sky color="#0fbbff"></a-sky>

  <a-entity position="0 0 3">
    <a-camera><a-cursor color="#FFF"></a-cursor></a-camera>
  </a-entity>
</a-scene>

</body>
</html>

最佳答案

首先,升级到0.6.0。我不确定事件和动画组件怎么样,但据我所知,0.6.0 中的模型处理更好。
然后尝试使用 collada 加载器作为组件,而不是像 docs 中那样的原语。 :

<a-entity collada-model="src:iphone4.dae"></a-entity>

如果您无法使模型显示,您可能需要将格式切换为 Threejs json 或 .glTF,方法是将您的 iPhone 上传到 clara.io,或使用 khronos/kupoman导出商,然后使用 Don McCurdy 的 loaders

<小时/> 顺便说一句,您似乎对事件没有问题,但对模型有问题,所以这个话题有点偏离:p

关于javascript - 在 A-Frame (webvr) 中使用 collada 对象的事件集组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44961086/

相关文章:

javascript - 如何计算Javascript中两个日期之间的年月?

javascript - jQuery Mobile 加载包含对 servlet 脚本的 ajax 调用的外部 HTML 并仅执行一次

javascript - 错误 : Unable to decode audio data when playing sound onclick within A-frame Environment

aframe - 我可以在本地运行 3d.io 场景吗(没有网络连接)?

javascript - underscore.js groupBy 子数组

javascript - boolean 连接?这种模式的真正术语是什么?

javascript - 如何获取内部动态加载图像的元素的高度

html - 布局类似于表格的 flexbox ?

html - border-width 中的 CSS calc()?

aframe 在移动设备上调整相机旋转