mayognaise / aframe-gif-component Goto Github PK

View Code? Open in Web Editor NEW

24.0 5.0 5.0 1.06 MB

A conponent to control GIF for A-Frame VR.

Home Page: https://mayognaise.github.io/aframe-gif-component/basic/index.html

License: MIT License

JavaScript 100.00%

aframe-gif-component's Introduction

AFrame GIF Component

A conponent to control GIF for A-Frame VR.

Requires aframe-gif-shader.

DEMO

Method

Global method

`play()`

Play gif animation

entity.play()

`pause()`

Pause gif animation

entity.pause()

Custom method

`togglePlayback()`

Toggle playback. if the gif is paused, play and pause if it's playing.

entity.components.gif.togglePlayback()

`nextFrame()`

Go to next frame. Useful if it's paused.

entity.components.gif.nextFrame()

`paused()`

Returns if it is paused.

const paused = entity.components.gif.paused() // true or false

Usage

Browser Installation

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
  <script src="https://rawgit.com/mayognaise/aframe-gif-shader/master/dist/aframe-gif-shader.min.js"></script>
  <script src="https://rawgit.com/mayognaise/aframe-gif-component/master/dist/aframe-gif-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-entity geometry="primitive:box" material="shader:gif;src:url(nyancat.gif);" gif=""></a-entity>
  </a-scene>
</body>

NPM Installation

Install via NPM:

npm i -D aframe-gif-shader aframe-gif-component

Then register and use.

import 'aframe'
import 'aframe-gif-shader'
import 'aframe-gif-component'

aframe-gif-component's People

Contributors

Stargazers

Watchers

Forkers

demo3d andy1dx darriusalexander vineeth-pappu kukukikits

aframe-gif-component's Issues

Could there be a way to stretch this material/image?

I have this shader on a plane and my intention is to control the width and height of the plane+animated gif on it. That doesn't seem to work. May not be implemented. Does that sound like a feature you may consider putting in place?

Transparente Gif not working as expected

Hello everyone!
I have tried the component using transparent gif and it seems that the material doesn't clean every frame and keeps all the frames while the animation continues.
Any Idea why is this?
Are there any work arounds or plans to fix it or where we can check to fix it?

Thanks!

best way to change src afterward?

How do you suggest to change src to another gif? The new gif may have a different number of frames.
I've tried entity.setAttribute('src', 'url(newimg.gif') which works to swap gifs, but then page hangs after a few loops. I'm assuming frame idx is causing issue.

How do I swap src and update frame count or force reload of shader?

Thanks.

gif component appears to have broken in aframe 0.4.0

error in console material.js:91 Uncaught (in promise) Error: Unknown shader gif

perhaps shader registration method has changed in newer aframe?

Gif controls

It seems that I cannot control gif from begin. Photoshop created gif loop forever, even if it set to loop only once(tested 2 loop too) in PS. Play/pause/tooglePlayback not have effect on begin of the script, but when i use controls after click event, or mouse enter etc. controls work. But anyway problem is that looping is un-controlled before first click on look event. I also tried make own function for controlling, but no lucky.
Of course there is way to trick it, with change src when click or look event happen, so i can control it from first frame. But of course it is much easier to control it from start. Some entity.reset() can also help there probably.. I feel gif's is so tricky :D
Any thoughts?

Any clues what could be wrong?

My gif's aren't working with this component

Was using this aframe-gif component to display a gif(attached) in a VR environment but looks like it doesn't work. It leaves the traces behind after transitioning. May I know why it doesn't work?

Thank you.