npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

anim-3d-obj

v1.2.1

Published

React library for creating 3D objects quickly. Also these objects can be animated

Downloads

26

Readme

React Typescript Cuboid Builder

This project allows a user to create Cuboids of any size simply by entering a set of parameters.
The program does the leg work with regard to calculating translationZ depth and config on the fly.

Examples

** ANIMATIONS

  • fadeInkf: fade object in from 0 to 1 Opacity: demo
  • floatX: float object so is not stationary: demo
  • floatShadow: float object + add shadow: demo
  • pulseSM: pulse object Small: demo
  • pulseMD: pulse object Medium: demo
  • pulseLG: pulse object Large: demo
  • swing: Swing component: demo
  • swingDecay: Swing component with decay: demo
  • noAnim: no animation place holder

X-AXIS Animations

  • X360: rotate 360 degrees on the x-axis: demo
  • wobX: wobble on x-axis (degreesHi <-> degreesLow): demo
  • fwdx018: spin object on x-axis from 0 degrees to 180 degrees: demo
  • fwdx1836: spin object on x-axis from 180 degrees to 360 degrees: demo
  • fwdx09: spin object on x-axis from 0 degrees to 90 degrees: demo
  • fwdx918: spin object on x-axis from 90 degrees to 180 degrees: demo
  • fwdx1827: spin object on x-axis from 180 degrees to 270 degrees: demo
  • fwdx2736: spin object on x-axis from 270 degrees to 360 degrees: demo

Y-AXIS Animations

  • Y360: rotate 360 degrees on the y-axis: demo
  • wobY: wobble on y-axis (degreesHi <-> degreesLow): demo
  • fwdy018: spin object on y-axis from 0 degrees to 180 degrees: demo
  • fwdy1836: spin object on y-axis from 180 degrees to 360 degrees: demo
  • fwdy09: spin object on y-axis from 0 degrees to 90 degrees: demo
  • fwdy918: spin object on y-axis from 90 degrees to 180 degrees: demo
  • fwdy1827: spin object on y-axis from 180 degrees to 270 degrees: demo
  • fwdy2736: spin object on y-axis from 270 degrees to 360 degrees: demo

Config

Animations:

Animations are optional. Either or both of anim1 or anim2 can be applied to the component. Animations are applied to 2 wrapping divs respectively.

const anim1 = {
   border: "", // while testing reveal the animation wrapper
   degreesHi: -45, // degrees if spin
   degreesLow: 45, // degrees if spin
   delay: 0, // start delay in seconds
   direction: "normal", //normal alternating reverse
   duration: 8, // seconds
   fillMode: "forwards", // none forwards backwards both
   iterationCount: "infinite", // number or infinte
   name: "Y360", // ** ANIMATIONS (above)
   timing: "ease-in-out", // linear ease ease-in-out
};

Faces:

This is an array of objects containing the face used for a given component

   export interface FaceType {
      name?: string; // front,back,left,right,top,top_rear,top_front,bottom,bottom_rear,bottom_front
      css?: string | undefined;
      body?: any; // can be JSX Component | string | number
   }

   const faces: FaceType[] = [
      {
         name: "back",
         body: "BACK",
         css: `background:rgba(22,22,22,.5)`,
      },
      {
         name: "right",
         body: "RIGHT",
         css: `background:rgba(220,220,220,.5); 
               border:1px solid #ddd`,
      },
   ];

Global (face):

If the name parameter in the faces array is indicated (ie: "front") but css and / or body are not. The global default(below) will satisfy those parameters.

   interface GlobalType {
      css?: string;
      body?: string;
   }
   const global: GlobalType = {
      body: "BODY FOR FACE WHICH DOES NOT CONTAIN BODY",
      css: 'color:red'
   };

all sides

  • https://www.npmjs.com/package/anim-3d-obj