A 帧渲染循环和视图刷新
A-frame render lop and view refresh
我正在尝试使用汽车的 .obj 模型在 A 帧中创建第一人称视图。
摄像头已经定位在靠近驾驶座的位置,javascript中有一个定时间隔通过三角计算移动摄像头位置并相应地移动摄像头。
这是我面临的两个问题
1) 你如何让它更顺畅? A-frame 中是否有可以在 javascript 中访问的渲染循环挂钩?我似乎找不到它的文档。
2) 当我在 phone ( Android 9) 上以 VR 模式查看上述页面时,创建的动画突然停止,这在全屏模式下效果很好。
html 的代码在这里 https://raw.githubusercontent.com/CuriosityGym/VRWithAframe/master/templates/class3-models.html
示例可在此处访问http://cgaframe.herokuapp.com/class3
谢谢!
您有一个每 100 毫秒触发一次的 setInterval
,以 10fps 的速度为汽车设置动画。这就是它不流畅的原因。创建一个组件并使用 tick method to animate
此外,您不应直接为相机设置动画,因为在 VR 模式下它的位置会被头显姿势覆盖。设置 camera rig
并制作动画
我正在尝试使用汽车的 .obj 模型在 A 帧中创建第一人称视图。
摄像头已经定位在靠近驾驶座的位置,javascript中有一个定时间隔通过三角计算移动摄像头位置并相应地移动摄像头。
这是我面临的两个问题
1) 你如何让它更顺畅? A-frame 中是否有可以在 javascript 中访问的渲染循环挂钩?我似乎找不到它的文档。
2) 当我在 phone ( Android 9) 上以 VR 模式查看上述页面时,创建的动画突然停止,这在全屏模式下效果很好。
html 的代码在这里 https://raw.githubusercontent.com/CuriosityGym/VRWithAframe/master/templates/class3-models.html
示例可在此处访问http://cgaframe.herokuapp.com/class3
谢谢!
您有一个每 100 毫秒触发一次的 setInterval
,以 10fps 的速度为汽车设置动画。这就是它不流畅的原因。创建一个组件并使用 tick method to animate
此外,您不应直接为相机设置动画,因为在 VR 模式下它的位置会被头显姿势覆盖。设置 camera rig
并制作动画