Cool acuarela efectos con JavaScript y Three. js-Aquarelle

Vista prévia

Descripción

Aquarelle es una biblioteca de JavaScript que utiliza tres. js y HTML5 Canvas para dibujar ineractive, efectos de animación de acuarela totalmente configurables en la Página Web.

¿Cómo funciona?

Coloque la biblioteca Aquarelle. js y otros recursos necesarios en la página HTML.

<script src="/path/to/three.js"></script>
<script src="/path/to/Aquarelle.js"></script>
<script src="/path/to/AquarellePass.js"></script>
<script src="/path/to/EffectComposer.js"></script>
<script src="/path/to/ClearPass.js"></script>
<script src="/path/to/ShaderPass.js"></script>
<script src="/path/to/CopyShader.js"></script>
<script src="/path/to/d3.geom.contour.min.js"></script>

Cree un nuevo objeto Aquarelle y pase los siguientes parámetros:

• textureImage: imagen de fondo
• maskImage: máscara de imagen de fondo
• Opciones: opciones iniciales

new Aquarelle(textureImage, maskImage, options);

Opciones de configuración completas.

new Aquarelle(textureImage, maskImage, {



// noise amplitude value


fromAmplitude: 50,



// noise amplitude value


toAmplitude: 0,





// noise frequiency


fromFrequency: 8,



// noise frequiency


toFrequency: 7,



// offsets


fromOffset: -30,


toOffset: 28,



// start animation before first frame is being rendered


autoplay: false,



// repeat animation in looprepeat animation in loop


loop: false,



// animation duration


duration: 8000



});

Métodos de la API:

• PAUSE () : pausar la animación
• Play () : iniciar animación
• Stop () : detener y restablecer la animación
• Start () : inicie la animación sobre
• REVERSE () : revertir la animación
• RESET () : volver a renderizar el fotograma
• setOptions ([Object]) : establecer opciones de animación
• transitionInRange (startValue, endValue [, startTimeMS [, endTimeMS]]) : valor devuelto entre startValue.. endValue en el rango startTimeMS.. endTimeMS
• addEventListener (Type, Listener) : Add Listener (Listener) del evento (Type)
• removeEventListener (tipo, Listener) : Remove (Listener) del evento (Type)

Eventos.

• creado : se desencadena antes de que el primer fotograma se represente
• ha cambiado : se desencadena antes de renderizar un fotograma
• completada: se desencadena antes de que se represente el último fotograma
• iniciado : se desencadena antes de iniciar la animación
• jugado : activado después de iniciar la animación
• en pausa: se desencadena antes de la pausa de animación
• Stopped : se activó antes de restablecer la animación

function listener(event) {}

aquarelle.addEventListener('created', listener);

aquarelle.removeEventListener('created', listener);

Registro de cambios

06/30/2018

• reemplazar la secuencia de comandos eliminada D3. geom. Contour