我正在尝试使用 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/