anim-3d-obj 1.1.225 → 1.2.0

package/dist/cjs/components/styles/Scene.d.ts

@@ -0,0 +1,10 @@
+interface SceneStyleProps {
+    width?: number | string;
+    height?: number | string;
+    perspective?: number | string | undefined;
+    perspectiveOrigin?: string | undefined;
+    zIndex?: number | undefined;
+    children: any;
+}
+export declare const SceneStyle: (props: SceneStyleProps) => JSX.Element;
+export {};

package/dist/cjs/components/styles/Scene.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SceneStyle = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+const SceneStyle = (props) => {
+    const { width = 0, height = 0, perspective = 600, perspectiveOrigin = "50% 50%", zIndex = 10, children = {}, } = props;
+    const SceneStyleDiv = styled_components_1.default.div `
+    width: ${width}px;
+    height: ${height}px;
+    -webkit-perspective: ${perspective}px;
+    perspective: ${perspective}px;
+    -webkit-perspective-origin: ${perspectiveOrigin};
+    perspective-origin: ${perspectiveOrigin};
+  `;
+    return (react_1.default.createElement("div", { style: { zIndex } },
+        react_1.default.createElement(SceneStyleDiv, null, children)));
+};
+exports.SceneStyle = SceneStyle;

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/dist/esm/components/Face.d.ts

@@ -0,0 +1,11 @@
+import { FaceType } from "./types";
+interface FaceProps {
+    children?: any;
+    depth?: number | any;
+    face: FaceType;
+    global?: any;
+    height?: number | string;
+    width?: number | string;
+}
+export default function Face(props: FaceProps): JSX.Element;
+export {};

package/dist/esm/components/Face.js

@@ -0,0 +1,101 @@
+import React from "react";
+import styled from "styled-components";
+export default function Face(props) {
+    let display = true;
+    let { depth = 10, global = { css: "", body: "" }, height = 10, face, width = 100, } = props;
+    let transform;
+    let tranz = +height / 2;
+    const body = face.body ? face.body : global.body;
+    ////////////////////////////////////////////////////////////////////////////// BOTTOM
+    if (face.name === "bottom") {
+        tranz = +height - +depth / 2;
+        height = +depth;
+        transform = `transform: rotateX(-90deg) translateZ(${tranz}px);`;
+    }
+    else if (face.name === "bottom_rear") {
+        tranz = +height - +depth / 2;
+        height = +depth;
+        transform = `transform: rotateX(-90deg) translateZ(${tranz}px)  translateY(${height}px)  `;
+    }
+    else if (face.name === "bottom_front") {
+        tranz = +height - +depth / 2;
+        height = +depth;
+        transform = `transform: rotateX(-90deg) translateZ(${tranz}px)  translateY(${-height}px)  `;
+        ////////////////////////////////////////////////////////////////////////////// TOPS
+    }
+    else if (face.name === "top") {
+        height = +depth;
+        if (!!depth)
+            tranz = +depth / 2;
+        transform = `transform: rotateX(90deg) translateZ(${tranz}px);`;
+    }
+    else if (face.name === "top_rear") {
+        height = +depth;
+        if (!!depth)
+            tranz = +depth / 2;
+        let offset = depth / 2;
+        //translate3d(tx, ty, tz)
+        transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(-${tranz * 2}px)  `;
+    }
+    else if (face.name === "top_front") {
+        height = +depth;
+        if (!!depth)
+            tranz = +depth / 2;
+        let offset = depth / 2;
+        //translate3d(tx, ty, tz)
+        transform = `transform: rotateX(90deg) translateZ(${tranz}px) translateY(${tranz * 2}px)  `;
+    }
+    else if (face.name === "front") {
+        if (!!depth)
+            tranz = +depth / 2;
+        transform = `transform: rotateY(0deg) translateZ(${tranz}px);`;
+    }
+    else if (face.name === "back") {
+        if (!!depth)
+            tranz = +depth / 2;
+        transform = `transform: rotateY(180deg) translateZ(${tranz}px);`;
+    }
+    else if (face.name === "right") {
+        if (height > width && !depth) {
+            tranz = -(+height / 2 - +width);
+            width = +height;
+        }
+        else if (width > height && !depth) {
+            tranz = +height / 2;
+            height = +width;
+        }
+        else {
+            tranz = +width - +depth / 2;
+            width = +depth;
+        }
+        transform = `transform: rotateY(90deg) translateZ(${tranz}px);`;
+        // topr is to of Ribbon which points back
+    }
+    else if (face.name === "left") {
+        if (height > width && !depth) {
+            tranz = -(+height / 2 - +width);
+            width = +height;
+        }
+        else if (width > height && !depth) {
+            tranz = +height / 2;
+            height = +width;
+        }
+        else {
+            tranz = +depth / 2;
+            width = +depth;
+        }
+        transform = `transform: rotateY(-90deg) translateZ(${tranz}px);`;
+    }
+    else {
+        //console.log(face.name + " is not a recognized face.name");
+        display = false;
+    }
+    const Specs = styled.section `
+    ${face.css || global.css}
+    width: ${width}px;
+    position: absolute;
+    height: ${height}px;
+    ${transform}
+  `;
+    return display ? React.createElement(Specs, null, body) : React.createElement(React.Fragment, null);
+}

package/dist/esm/components/Obj.d.ts

@@ -0,0 +1,2 @@
+import { ObjProps } from "./types";
+export default function (props: ObjProps): JSX.Element;

package/dist/esm/components/Obj.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { ObjWrapper } from "./styles/Global";
+import { AnimWrap } from "./styles/AnimWrap";
+import { SceneStyle } from "./styles/Scene";
+import Face from "./Face";
+export default function (props) {
+    let { anim1, anim2, width = 5, height = 5, depth = 5, global = {}, faces, perspective, perspectiveOrigin, zIndex, } = props;
+    // process config
+    const buildFace = (face) => {
+        const details = {
+            width,
+            height,
+            depth,
+            face,
+            global,
+        };
+        return React.createElement(Face, Object.assign({}, details, { key: face.name }));
+    };
+    return (React.createElement(SceneStyle, { width: width, height: height, perspective: perspective, perspectiveOrigin: perspectiveOrigin, zIndex: zIndex },
+        React.createElement(AnimWrap, { animSpecs: anim1 },
+            React.createElement(AnimWrap, { animSpecs: anim2 },
+                React.createElement(ObjWrapper, null, faces && faces[0]
+                    ? faces.map((face) => (face.name ? buildFace(face) : null))
+                    : null)))));
+}

package/dist/esm/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Obj";
+export * from "./Face";

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from "./Obj";
+export * from "./Face";

package/dist/esm/components/styles/AnimWrap.d.ts

@@ -0,0 +1,2 @@
+import { AnimStylesProps } from "./Anim";
+export declare const AnimWrap: (props: AnimStylesProps) => JSX.Element;

package/dist/esm/components/styles/AnimWrap.js

@@ -0,0 +1,83 @@
+import styled from "styled-components";
+import React from "react";
+import { allAnims } from "./Anims";
+export const AnimWrap = (props) => {
+    const { children, animSpecs } = props;
+    const AS = animSpecs;
+    const { X360, Y360, fadeInkf, wobY, wobX, fwdx018, fwdx1836, fwdx09, fwdx918, fwdx1827, fwdx2736, fwdy018, fwdy1836, fwdy09, fwdy918, fwdy1827, fwdy2736, floatX, floatShadow, pulseSM, pulseMD, pulseLG, swing, swingDecay, noAnim, } = allAnims({ degreesHi: AS.degreesHi, degreesLow: AS.degreesLow });
+    let theAnim = "noAnim";
+    if (AS.name === "X360")
+        theAnim = X360;
+    else if (AS.name === "Y360")
+        theAnim = Y360;
+    else if (AS.name === "fadeInkf")
+        theAnim = fadeInkf;
+    else if (AS.name === "wobX")
+        theAnim = wobX;
+    else if (AS.name === "wobY")
+        theAnim = wobY;
+    else if (AS.name === "fwdx018")
+        theAnim = fwdx018;
+    else if (AS.name === "fwdx1836")
+        theAnim = fwdx1836;
+    else if (AS.name === "fwdx09")
+        theAnim = fwdx09;
+    else if (AS.name === "fwdx918")
+        theAnim = fwdx918;
+    else if (AS.name === "fwdx1827")
+        theAnim = fwdx1827;
+    else if (AS.name === "fwdx2736")
+        theAnim = fwdx2736;
+    else if (AS.name === "fwdy018")
+        theAnim = fwdy018;
+    else if (AS.name === "fwdy1836")
+        theAnim = fwdy1836;
+    else if (AS.name === "fwdy09")
+        theAnim = fwdy09;
+    else if (AS.name === "fwdy918")
+        theAnim = fwdy918;
+    else if (AS.name === "fwdy1827")
+        theAnim = fwdy1827;
+    else if (AS.name === "fwdy2736")
+        theAnim = fwdy2736;
+    else if (AS.name === "floatX")
+        theAnim = floatX;
+    else if (AS.name === "floatShadow")
+        theAnim = floatShadow;
+    else if (AS.name === "pulseSM")
+        theAnim = pulseSM;
+    else if (AS.name === "pulseMD")
+        theAnim = pulseMD;
+    else if (AS.name === "pulseLG")
+        theAnim = pulseLG;
+    else if (AS.name === "swing")
+        theAnim = swing;
+    else if (AS.name === "swingDecay")
+        theAnim = swingDecay;
+    else
+        theAnim = noAnim;
+    const AnimWrapDiv = styled.div `
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform-style: preserve-3d;
+    border: ${AS.border};
+    -webkit-animation-duration: ${AS.duration}s;
+    animation-duration: ${AS.duration}s;
+    -webkit-animation-iteration-count: ${AS.iterationCount};
+    animation-iteration-count: ${AS.iterationCount};
+    -webkit-animation-name: ${theAnim};
+    animation-name: ${theAnim};
+    -webkit-animation-fill-mode: ${AS.fillMode};
+    animation-fill-mode: ${AS.fillMode};
+    -webkit-animation-play-state: ${AS.animationPlayState};
+    animation-play-state: ${AS.animationPlayState};
+    animation-direction: ${AS.direction};
+    -webkit-animation-direction: ${AS.direction};
+    -webkit-animation-timing-function: ${AS.timing};
+    animation-timing-function: ${AS.timing};
+    -webkit-animation-delay: ${AS.delay}s;
+    animation-delay: ${AS.delay}s;
+  `;
+    return React.createElement(AnimWrapDiv, null, children);
+};

package/dist/esm/components/styles/Anims.d.ts

@@ -0,0 +1,32 @@
+interface AllAnimsProps {
+    degreesLow?: number;
+    degreesHi?: number;
+}
+export declare const allAnims: (props: AllAnimsProps) => {
+    X360: import("styled-components").Keyframes;
+    Y360: import("styled-components").Keyframes;
+    fadeInkf: import("styled-components").Keyframes;
+    wobY: import("styled-components").Keyframes;
+    wobX: import("styled-components").Keyframes;
+    fwdx018: import("styled-components").Keyframes;
+    fwdx1836: import("styled-components").Keyframes;
+    fwdx09: import("styled-components").Keyframes;
+    fwdx918: import("styled-components").Keyframes;
+    fwdx1827: import("styled-components").Keyframes;
+    fwdx2736: import("styled-components").Keyframes;
+    fwdy018: import("styled-components").Keyframes;
+    fwdy1836: import("styled-components").Keyframes;
+    fwdy09: import("styled-components").Keyframes;
+    fwdy918: import("styled-components").Keyframes;
+    fwdy1827: import("styled-components").Keyframes;
+    fwdy2736: import("styled-components").Keyframes;
+    floatX: import("styled-components").Keyframes;
+    floatShadow: import("styled-components").Keyframes;
+    pulseSM: import("styled-components").Keyframes;
+    pulseMD: import("styled-components").Keyframes;
+    pulseLG: import("styled-components").Keyframes;
+    swing: import("styled-components").Keyframes;
+    swingDecay: import("styled-components").Keyframes;
+    noAnim: import("styled-components").Keyframes;
+};
+export {};

package/{src/components/styles/Anims.ts → dist/esm/components/styles/Anims.js}

@@ -1,14 +1,7 @@
 import { keyframes } from "styled-components";
-
-interface AllAnimsProps {
-   degreesLow?: number;
-   degreesHi?: number;
-}
-
-export const allAnims = (props: AllAnimsProps) => {
-   const { degreesLow = 0, degreesHi = 0 } = props;
-
-   const swing = keyframes`
+export const allAnims = (props) => {
+    const { degreesLow = 0, degreesHi = 0 } = props;
+    const swing = keyframes `
     0% {
         -webkit-transform-origin: top;
             -ms-transform-origin: top;
@@ -28,8 +21,7 @@ export const allAnims = (props: AllAnimsProps) => {
                 transform: perspective(550px) rotateX(77deg);
       }
   `;
-
-   const swingDecay = keyframes`
+    const swingDecay = keyframes `
    0% {
     -webkit-transform-origin: top;
         -ms-transform-origin: top;
@@ -63,8 +55,7 @@ export const allAnims = (props: AllAnimsProps) => {
                 transform:  perspective(550px)  rotateX(0);
     }
     `;
-
-   const X360 = keyframes`
+    const X360 = keyframes `
    from {
       -webkit-transform: rotateX(360deg);
       transform: rotateX(360deg);
@@ -73,9 +64,8 @@ export const allAnims = (props: AllAnimsProps) => {
       -webkit-transform: rotateX(0deg);
       transform: rotateX(0deg);
    }`;
-
-   //////// Y360
-   const Y360 = keyframes`
+    //////// Y360
+    const Y360 = keyframes `
     from {
         -webkit-transform: rotateY(360deg);
         transform: rotateY(360deg);
@@ -84,16 +74,14 @@ export const allAnims = (props: AllAnimsProps) => {
         -webkit-transform: rotateY(0deg);
         transform: rotateY(0deg);
     }`;
-
-   const fadeInkf = keyframes`
+    const fadeInkf = keyframes `
     from {
         opacity: 0;
     }
     to {
         opacity: 1;
     }`;
-
-   const wobY = keyframes`
+    const wobY = keyframes `
     0% {
         -webkit-transform: rotateY(${degreesLow}deg);
         transform: rotateY(${degreesLow}deg);
@@ -106,8 +94,7 @@ export const allAnims = (props: AllAnimsProps) => {
         -webkit-transform: rotateY(${degreesLow}deg);
         transform: rotateY(${degreesLow}deg);
     }`;
-
-   const wobX = keyframes`
+    const wobX = keyframes `
     0% {
         -webkit-transform: rotateX(${degreesLow}deg);
         transform: rotateX(${degreesLow}deg);
@@ -120,8 +107,8 @@ export const allAnims = (props: AllAnimsProps) => {
         -webkit-transform: rotateX(${degreesLow}deg);
         transform: rotateX(${degreesLow}deg);
     }`;
-   /* ============================== x-axis 0-180 >180 - 360 */
-   const fwdx018 = keyframes`
+    /* ============================== x-axis 0-180 >180 - 360 */
+    const fwdx018 = keyframes `
     from {
         -webkit-transform: rotateX(360deg);
         transform: rotateX(360deg);
@@ -130,7 +117,7 @@ export const allAnims = (props: AllAnimsProps) => {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
     }`;
-   const fwdx1836 = keyframes`
+    const fwdx1836 = keyframes `
     from {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
@@ -139,8 +126,8 @@ export const allAnims = (props: AllAnimsProps) => {
         -webkit-transform: rotateX(0deg);
         transform: rotateX(0deg);
     }`;
-   /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
-   const fwdx09 = keyframes`
+    /* ============================= x-axis 0-90, 90-180, 180-270, 270-360 */
+    const fwdx09 = keyframes `
     from {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
@@ -149,7 +136,7 @@ export const allAnims = (props: AllAnimsProps) => {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg);
     }`;
-   const fwdx918 = keyframes`
+    const fwdx918 = keyframes `
     from {
         -webkit-transform: rotateX(90deg);
         transform: rotateX(90deg);
@@ -158,7 +145,7 @@ export const allAnims = (props: AllAnimsProps) => {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
     }`;
-   const fwdx1827 = keyframes`
+    const fwdx1827 = keyframes `
     from {
         -webkit-transform: rotateX(180deg);
         transform: rotateX(180deg);
@@ -167,7 +154,7 @@ export const allAnims = (props: AllAnimsProps) => {
         -webkit-transform: rotateX(270deg);
         transform: rotateX(270deg);
     }`;
-   const fwdx2736 = keyframes`
+    const fwdx2736 = keyframes `
     from {
         -webkit-transform: rotateX(270deg);
         transform: rotateX(270deg);
@@ -176,9 +163,8 @@ export const allAnims = (props: AllAnimsProps) => {
         -webkit-transform: rotateX(360deg);
         transform: rotateX(360deg);
     }`;
-
-   /* ============================== y-axis 0-180 >180 - 360 */
-   const fwdy018 = keyframes`
+    /* ============================== y-axis 0-180 >180 - 360 */
+    const fwdy018 = keyframes `
    from {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
@@ -187,7 +173,7 @@ export const allAnims = (props: AllAnimsProps) => {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }`;
-   const fwdy1836 = keyframes`
+    const fwdy1836 = keyframes `
    from {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
@@ -196,9 +182,8 @@ export const allAnims = (props: AllAnimsProps) => {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }`;
-
-   /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
-   const fwdy09 = keyframes`
+    /* ============================= y-axis 0-90, 90-180, 180-270, 270-360 */
+    const fwdy09 = keyframes `
    from {
       -webkit-transform: rotateY(0deg);
       transform: rotateY(0deg);
@@ -207,7 +192,7 @@ export const allAnims = (props: AllAnimsProps) => {
       -webkit-transform: rotateY(90deg);
       transform: rotateY(90deg);
    }`;
-   const fwdy918 = keyframes`
+    const fwdy918 = keyframes `
    from {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
@@ -216,7 +201,7 @@ export const allAnims = (props: AllAnimsProps) => {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }`;
-   const fwdy1827 = keyframes`
+    const fwdy1827 = keyframes `
    from {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
@@ -225,7 +210,7 @@ export const allAnims = (props: AllAnimsProps) => {
        -webkit-transform: rotateY(270deg);
        transform: rotateY(270deg);
    }`;
-   const fwdy2736 = keyframes`
+    const fwdy2736 = keyframes `
    from {
        -webkit-transform: rotateY(270deg);
        transform: rotateY(270deg);
@@ -234,14 +219,12 @@ export const allAnims = (props: AllAnimsProps) => {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }`;
-
-   /* ============================= floating */
-   const floatX = keyframes`
+    /* ============================= floating */
+    const floatX = keyframes `
    0% { -webkit-transform: translate(0,  0px); -ms-transform: translate(0,  0px); transform: translate(0,  0px); }
    50%  { -webkit-transform: translate(0, 15px); -ms-transform: translate(0, 15px); transform: translate(0, 15px); }
    100%   { -webkit-transform: translate(0, -0px); -ms-transform: translate(0, -0px); transform: translate(0, -0px); }`;
-
-   const floatShadow = keyframes`
+    const floatShadow = keyframes `
         0% {
             -webkit-box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
                     box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
@@ -263,8 +246,7 @@ export const allAnims = (props: AllAnimsProps) => {
                 -ms-transform: translateY(0px);
                     transform: translateY(0px);
         }`;
-
-   const pulseSM = keyframes`
+    const pulseSM = keyframes `
    0% {
     -webkit-transform: scale(0.9);
         -ms-transform: scale(0.9);
@@ -280,8 +262,7 @@ export const allAnims = (props: AllAnimsProps) => {
             -ms-transform: scale(0.9);
                 transform: scale(0.9);
     }`;
-
-   const pulseMD = keyframes`
+    const pulseMD = keyframes `
     0% {
      -webkit-transform: scale(0.7);
          -ms-transform: scale(0.7);
@@ -297,8 +278,7 @@ export const allAnims = (props: AllAnimsProps) => {
              -ms-transform: scale(0.7);
                  transform: scale(0.7);
      }`;
-
-   const pulseLG = keyframes`
+    const pulseLG = keyframes `
     0% {
      -webkit-transform: scale(0.5);
          -ms-transform: scale(0.5);
@@ -314,34 +294,32 @@ export const allAnims = (props: AllAnimsProps) => {
              -ms-transform: scale(0.5);
                  transform: scale(0.5);
      }`;
-
-   const noAnim = keyframes``;
-
-   return {
-      X360,
-      Y360,
-      fadeInkf,
-      wobY,
-      wobX,
-      fwdx018,
-      fwdx1836,
-      fwdx09,
-      fwdx918,
-      fwdx1827,
-      fwdx2736,
-      fwdy018,
-      fwdy1836,
-      fwdy09,
-      fwdy918,
-      fwdy1827,
-      fwdy2736,
-      floatX,
-      floatShadow,
-      pulseSM,
-      pulseMD,
-      pulseLG,
-      swing,
-      swingDecay,
-      noAnim,
-   };
+    const noAnim = keyframes ``;
+    return {
+        X360,
+        Y360,
+        fadeInkf,
+        wobY,
+        wobX,
+        fwdx018,
+        fwdx1836,
+        fwdx09,
+        fwdx918,
+        fwdx1827,
+        fwdx2736,
+        fwdy018,
+        fwdy1836,
+        fwdy09,
+        fwdy918,
+        fwdy1827,
+        fwdy2736,
+        floatX,
+        floatShadow,
+        pulseSM,
+        pulseMD,
+        pulseLG,
+        swing,
+        swingDecay,
+        noAnim,
+    };
 };

package/dist/esm/components/styles/Global.d.ts

@@ -0,0 +1,6 @@
+interface ObjWrapperProps {
+    showCenterDiv?: boolean | string | number;
+    children?: any;
+}
+export declare const ObjWrapper: (props: ObjWrapperProps) => any;
+export {};

package/dist/esm/components/styles/Global.js

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import React from "react";
+export const ObjWrapper = (props) => {
+    const { showCenterDiv = false, children = "" } = props;
+    const Wrapper = showCenterDiv
+        ? styled.section `
+        width: 100%;
+        height: 100%;
+        position: relative;
+        transform-style: preserve-3d;
+        border: 1px solid #0f0;
+      `
+        : styled.section `
+        width: 100%;
+        height: 100%;
+        position: relative;
+        transform-style: preserve-3d;
+      `;
+    return React.createElement(Wrapper, null, children);
+};

package/dist/esm/components/styles/Scene.d.ts

@@ -0,0 +1,10 @@
+interface SceneStyleProps {
+    width?: number | string;
+    height?: number | string;
+    perspective?: number | string | undefined;
+    perspectiveOrigin?: string | undefined;
+    zIndex?: number | undefined;
+    children: any;
+}
+export declare const SceneStyle: (props: SceneStyleProps) => JSX.Element;
+export {};