What's this

A simple broken smoke effect react component. A step in learning three.js with react. Ported from original creator Teo Litto's experiment on codepen https://codepen.io/teolitto/pen/KwOVvL. Demo of the use of this component is at https://github.com/hsyuting/smoke-effect-react-demo.

Installation

npm i -S smoke-effect-react

How to use

Import the package in your React project.

import SmokeElement from "smoke-effect-react";

Put the component in render and give these properties a value. Important: These properties all require a value for it to work. You can also specify a value width and height properties but must in px atm for it to work.

 <SmokeElement
          src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/quickText.png"
          opacity="1"
          smokeSrc="https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/Smoke-Element.png"
          smokeOpacity="0.3"
        />

Smoke image used:

Example

A different smoke image used with different opacity settings could give different results.

<SmokeElement src="./images/quickText.png"
          opacity="2"
          smokeSrc="./images/smoke_PNG55217.png"
          smokeOpacity="0.2"
          />

Result: