utkarshdubey / react-spline Goto Github PK

View Code? Open in Web Editor NEW

83.0 4.0 14.0 14.33 MB

A wrapper to painlessly integrate Spline projects into your React code-space. ☀

Home Page: https://utkarshdubey.github.io/react-spline/

HTML 0.50% TypeScript 0.37% JavaScript 99.07% CSS 0.06%

spline threejs animation react-spline react

react-spline's Introduction

React Spline

Archive Notice

The repository has been archived now since Spline has released their official library @splinetool/react-spline for importing models. I had fun maintaining this project, if your existing workspace is using react-spline, the transitioning won't be hard since most of the generics are similar. Thanks for stopping by.

A painless, configurable, spline wrapper for React to add sweet animations easily into your projects.

Install

npm install --save react-spline

yarn add react-spline

Usage

Import the Spline component from react-spline and you're set.

import React, { Component } from 'react'

import { Spline } from 'react-spline'
import SCENE_OBJECT from './scene.json'

class Example extends Component {
  render() {
    return <Spline scene={SCENE_OBJECT} />
  }
}

Props

Property	Description
scene `object`	Required. The scene object exported from Spline.
id `string`	Default empty. Assignable HTMLAttribute `id` for the `<canvas>` element.
className `string`	Default empty. Assignable HTMLAttribute `class` for the `<div>` wrapper.
style `JSX CSS`	Default empty. Custom styling for the `<div>` wrapper.
canvasStyle `JSX CSS`	Default empty. Custom styling for the `<canvas>` element.

Loading the Spline model

To download Spline models from the link that gets generated in Spline, it's accessible at https://my.spline.design/example-8b43571.../scene.json (Note: Here example-8b43571 in the link is a placeholder for a Spline generated link). You can then import the object and use it like shown above.

Multiple THREE.js Warning Issue

The older versions of this library experience a ~~bug~~ problem, where outdated usage of functions in the Spline runtime cause multiple duplicate warnings to clutter the console. For now, it has been disabled by a workaround script that removes duplicate warnings from the console until we have a proper solution.

License

MIT © utkarshdubey

react-spline's People

Contributors

Stargazers

Watchers

Forkers

usapp-stack b-bot trendingtechnology ouchkick afridirahman97 abdallahabuhashem adalbertopc skygopnik goosescout stride-srls bernardokr dharun-narayanan idcooldi pavanmannem

react-spline's Issues

Getting error "Cannot read property 'length' of undefined"

Hi. Thanks for the library. It's my first time using it and I just got the error below.

The sandbox

Cannot read property 'SPE_textures_uuid_map' of undefined

Hey, I am running into the below error when running react-spline with NextJS

vendors-node_modules_react-spline_dist_index_js.js:16 TypeError: Cannot read property 'SPE_textures_uuid_map' of undefined
    at e._decodeTextureData (_next/static/chunks/vendors-node_modules_react-spline_dist_index_js.js:16)
    at e.decode (_next/static/chunks/vendors-node_modules_react-spline_dist_index_js.js:16)
    at _next/static/chunks/vendors-node_modules_react-spline_dist_index_js.js:16

Page.js

import React from "react";
import dynamic from 'next/dynamic';
import { Flex } from "@chakra-ui/react";
const Spline = dynamic(import('react-spline').then((mod) => mod.Spline), { ssr: false }) // Async API cannot be server-side rendered

const Page = () => {

    const sp = {"object":{"uuid":"A4139620-9204-486B-A4A1-3BD990181AFA","objectType":"Scene","name":"Untitled","matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"layers":1,"children":[{"uuid":"AC1C5AFD-E213-4296-AC65-F7FDAB17D1BE","objectType":"Mesh3D","name":"Cube copy 3","matrix":[-1,-1.2246467991473532e-16,-1.4997597826618576e-32,0,-1.2246467991473532e-16,1,1.2246467991473532e-16,0,0,1.2246467991473532e-16,-1,0,-499.99999999999983,-143.50000000000017,-23.53217505319185,1],"castShadow":true,"receiveShadow":true,"layers":1,"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,-14.00000000000017,-67.99999999999999,83.50000000000223,1],"interaction":{"uuid":"65343270-A319-4B1F-9C5E-7021B4426064"},"geometry":"9E94A374-65B0-4BCE-876D-9519F81B532B","material":"DA7FC43D-F1E8-4927-BA5E-0547A0677AB0"},{"uuid":"5304BB3E-CCF0-4855-956D-45C0DC4B857B","objectType":"Mesh3D","name":"Cube copy 2","matrix":[-1,-1.2246467991473532e-16,-1.4997597826618576e-32,0,-1.2246467991473532e-16,1,1.2246467991473532e-16,0,0,1.2246467991473532e-16,-1,0,-503,211.0000000000002,-298.4733712417559,1],"castShadow":true,"receiveShadow":true,"layers":1,"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,12.500000000000057,-34.99999999999994,125.50000000000115,1],"interaction":{"uuid":"F2FFFF42-A96F-4FEC-B8E7-D472E26C16EF"},"geometry":"4F5A45C0-62D4-4506-A18A-4E9767767CA5","material":"240DF984-0496-4E9A-9D61-3FF19BCA6526"},{"uuid":"B3471C44-50DB-483F-9495-69F1CFF75C29","objectType":"Mesh3D","name":"Cube copy","matrix":[-1,-1.2246467991473532e-16,-1.4997597826618576e-32,0,-1.2246467991473532e-16,1,1.2246467991473532e-16,0,0,1.2246467991473532e-16,-1,0,471.0000000000001,-172.00000000000006,-70.5000000000012,1],"castShadow":true,"receiveShadow":true,"layers":1,"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,38.50000000000006,-88,125.50000000000115,1],"interaction":{"uuid":"51087BF1-7906-46E5-B354-EC2DADAC789E"},"geometry":"B314FC74-268D-4BD0-BEE3-065BB6890350","material":"B638D632-ACC3-4D0E-92BF-D395EEDFE56C"},{"uuid":"A1EFF26C-0F4F-479D-9F2E-24A1FE665743","objectType":"Mesh3D","name":"Cube","matrix":[-1,-1.2246467991473532e-16,-1.4997597826618576e-32,0,-1.2246467991473532e-16,1,1.2246467991473532e-16,0,0,1.2246467991473532e-16,-1,0,417.5,267,149.14403614060785,1],"castShadow":true,"receiveShadow":true,"layers":1,"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"90A7642A-F659-4492-8B99-333D29377C3B"},"geometry":"BCEEFA3E-9703-481A-BEE1-CC9B386CE99D","material":"BAED64D2-9836-4D5D-9A72-68C23F4B9F00"},{"uuid":"36791557-CFD9-4532-831B-E0C7D4C0B89F","objectType":"CombinedCamera","name":"Default Camera","matrix":[-0.9898406594433249,8.673617379884035e-19,-0.14218111306641262,0,-0.008446776338687411,0.9982337512005142,0.05880501622850022,0,0.14192998584614952,0.059408568103851686,-0.9880923545669007,0,141.92998584615052,59.40856810385211,-988.0923545669078,1],"layers":1,"children":[{"uuid":"C8406845-6C2F-436B-9DBD-9C80E6D42698","type":"DirectionalLight","name":"Default Directional Light","layers":1,"matrix":[1,0,0,0,0,1,0,0,0,0,1,0,850000,1300000,1000000,1],"color":16777215,"intensity":0.75,"shadow":{"camera":{"uuid":"BF8B47DB-3162-4A37-9007-3404E99352C6","type":"OrthographicCamera","layers":1,"zoom":1,"left":-5,"right":5,"top":5,"bottom":-5,"near":0.5,"far":500}}}],"hiddenMatrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1],"interaction":{"uuid":"CC611A2F-7C2B-436A-A744-4C1653FC1C55"},"enableHelper":false,"cameraType":"OrthographicCamera","targetOffset":1000,"left":-960,"right":960,"top":528.5,"bottom":-528.5,"zoomOrtho":1,"nearOrtho":-50000,"far":50000,"aspect":1.816461684011353,"fov":45,"focus":10,"filmGauge":35,"filmOffset":0,"zoomPersp":1,"nearPersp":50},{"uuid":"F72C39A2-8A59-40DE-8A91-E7B9FD551298","type":"HemisphereLight","name":"Default Ambient Light","layers":1,"matrix":[1,0,0,0,0,1,0,0,0,0,1,0,0,1,0,1],"color":13882323,"intensity":0.75,"groundColor":8553090}],"activeCamera":"36791557-CFD9-4532-831B-E0C7D4C0B89F","camera":"36791557-CFD9-4532-831B-E0C7D4C0B89F","directionalLight":"C8406845-6C2F-436B-9DBD-9C80E6D42698","ambientLight":"F72C39A2-8A59-40DE-8A91-E7B9FD551298","color":[0.09803921568627451,0.09803921568627451,0.09803921568627451],"alpha":1,"directionalLightState":true,"ambientLightState":true,"canvas":{"mode":1,"size":{"width":512,"height":512},"fullScreen":true}},"metadata":{"version":1.4,"type":"Object","generator":"Object3D.toJSON"},"geometries":[{"uuid":"9E94A374-65B0-4BCE-876D-9519F81B532B","userData":{"parameters":{"width":245,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":8,"height":184,"depth":100},"type":"CubeGeometry"}},{"uuid":"4F5A45C0-62D4-4506-A18A-4E9767767CA5","userData":{"parameters":{"width":167,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":8,"height":171,"depth":100},"type":"CubeGeometry"}},{"uuid":"B314FC74-268D-4BD0-BEE3-065BB6890350","userData":{"parameters":{"width":143,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":8,"height":149,"depth":100},"type":"CubeGeometry"}},{"uuid":"BCEEFA3E-9703-481A-BEE1-CC9B386CE99D","userData":{"parameters":{"width":250,"widthSegments":1,"heightSegments":1,"depthSegments":1,"cornerRadius":128,"cornerSegments":9,"height":250,"depth":100},"type":"CubeGeometry"}}],"materials":[{"uuid":"DA7FC43D-F1E8-4927-BA5E-0547A0677AB0","type":"MeshPhongMaterial","color":2857471,"emissive":0,"specular":1118481,"shininess":30,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"PhongMaterial","category":"Phong","layers":{"id":2,"uuid":"AB6F8DDB-93D3-4E5F-95BD-846E66922102","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":16757281}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":1},"f1_mode":{"value":0}}}}}}},{"uuid":"240DF984-0496-4E9A-9D61-3FF19BCA6526","type":"MeshPhongMaterial","color":2857471,"emissive":0,"specular":1118481,"shininess":30,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"PhongMaterial","category":"Phong","layers":{"id":2,"uuid":"80759CC6-D040-4FEA-8815-C5A882B1A583","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":11687423}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":1},"f1_mode":{"value":0}}}}}}},{"uuid":"B638D632-ACC3-4D0E-92BF-D395EEDFE56C","type":"MeshPhongMaterial","color":2857471,"emissive":0,"specular":1118481,"shininess":30,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"PhongMaterial","category":"Phong","layers":{"id":2,"uuid":"FF6C6CC0-7F9E-400E-A7B3-F91AFC49F8EA","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":3269535}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":1},"f1_mode":{"value":0}}}}}}},{"uuid":"BAED64D2-9836-4D5D-9A72-68C23F4B9F00","type":"MeshPhongMaterial","color":2857471,"emissive":0,"specular":1118481,"shininess":30,"transparent":true,"depthFunc":3,"depthTest":true,"depthWrite":true,"stencilWrite":false,"stencilWriteMask":255,"stencilFunc":519,"stencilRef":0,"stencilFuncMask":255,"stencilFail":7680,"stencilZFail":7680,"stencilZPass":7680,"userData":{"type":"PhongMaterial","category":"Phong","layers":{"id":2,"uuid":"569F54DD-3FD8-4EFC-974F-73EDABA77BC7","head":{"id":0,"type":"color","defines":{},"uniforms":{"f0_alpha":{"value":1},"f0_mode":{"value":0},"f0_color":{"value":2857471}},"next":{"id":1,"type":"light","defines":{},"uniforms":{"f1_alpha":{"value":1},"f1_mode":{"value":0}}}}}}}],"options":{"generatorFormat":1,"useOrbitControls":true,"useHostedRuntime":false,"orbitDamped":true,"orbitTarget":[1.1368683772161603e-12,4.760636329592671e-13,-8.071765478234738e-12],"cameraRotate":true,"cameraPan":true,"cameraZoom":true,"quality":"default","watermark":true}};

    return (
        <Flex w="100vw" h="100vh">
            <Spline scene={sp} />
        </Flex>
    )
}

export default Page;

Update React version

The react version used in this version is 16.0.0, It would be useful to update the current react package to keep up to date with other technologies used in the same project.

Endless warn-logging by three.js

Hi and thanks for this neat library, using it worked very well! Only issue I have is that three.js completely spams the log with always the same warning:

Sadly I don't have any experience with three.js, but if you want I can still work on a PR to fix it.

[BUG] TypeError: Class constructor Box3 cannot be invoked without 'new'

TypeError: Class constructor Box3 cannot be invoked without 'new' is thrown when trying to load certain models.

Expected Behavior:
Default

Current Behavior:
Error is thrown

Possible cause:
Unknown

Support for SSG/SSR?

Using React-based frameworks like NextJS or GatsbyJS causes issues with server side rendering / generation due to the fact that the window obj is undefined at build time (see attached screenshot). Possible to patch a fix that prevents this issue?

'TypeError: Cannot read property 'r' of undefined' & NonParameticGeometry gives console errors.

Using the example scene.json works great! But using your own export json returns console errors ( nothing rendering ).
+
NonParameticGeometry is not supported -> "type":"NonParametricGeometry".

I guess these problems come from spline/threejs library updates?

Doesn't seem to work with my .spline

Tried using component and got this error

.spline

Facing a error when using the lib with typescript + nextJS

Hi, i'm trying to use this lib in my personal project (which i use React with Typescript and Next Js) and i'm getting the following error:

This is the log from my terminal:

import * as three from 'three';
^^^^^^

SyntaxError: Cannot use import statement outside a module

And this is my tsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~src/*": ["./src/*"],
      "~components/*": ["./src/components/*"],
      "~assets/*": ["./src/assets/*"],
      "~animations/*": ["./src/assets/animations/*"],
      "~atoms/*": ["./src/components/atoms/*"],
      "~molecules/*": ["./src/components/molecules/*"],
      "~organisms/*": ["./src/components/organisms/*"],
      "~templates/*": ["./src/components/templates/*"],
      "~sections/*": ["./src/components/templates/sections/*"],
      "~dividers/*": ["./src/components/atoms/dividers/*"],
      "~pages/*": ["./src/pages/*"]
    },
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "noImplicitAny": false,
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "custom.d.ts"],
  "exclude": ["node_modules", "build"]
}

index.js:1 TypeError: Cannot read properties of undefined (reading 'r')

Here's the error I get while loading a custom scene.json.

index.js:1 TypeError: Cannot read properties of undefined (reading 'r')
at t.e.copy (three.min.js:2)
at t.Xs.copy (three.min.js:2)
at t.r.copy (index.js:1)
at Function.t.fromJSON (index.js:1)
at t.customParseMaterials (index.js:1)
at t.parse (index.js:1)
at index.js:1

I think spline has updated something in the scene.json generation and now the code's broken.

React Native support?

Any plans to support React Native with this? Maybe by using expo-three.

Does not render colors anymore (possibly?).

I have rendered my spline.design view using the react spline npm package within my react site, it does not render the colors, only the lighting effects. I tested this on another spline.design default scene and it resulted in this:

This was tested on a fresh NPX Create-React-App using yarn.

I receive the following errors in the console.

Deprecate package in favor of official package

The Spline team has released an official package for Spline, so it might be useful to deprecate this package and instruct users to use the official package. This will also avoid confusion for those that are looking for the official package.
@splinetool/react-spline

Appreciate the effort that went into building this!

scene.json not working

I want to use this 3d model https://my.spline.design/cameracopy-d2138414d00eda3db8f77df91a11e0e1/
but https://my.spline.design/cameracopy-d2138414d00eda3db8f77df91a11e0e1/scene.json is not working.

is empty

and the scene.json in the example repo is working very well

what can i do?

Edit:
Spline has changed his scene.json template and the react-spline library is giving this error

Cannot read property 'SPE_textures_uuid_map' of undefined

Hey! I think someone may have brought this issue up before, but the runtime seems to be currently incompatible with this wrapper library. As of right now, it seems as though this library only accepts GLFT loading when rendering out the scene.

The JSON in this example works and renders: https://github.com/utkarshdubey/react-spline/blob/main/example/src/scene.js

But anything else does not work, the JSON seems to be very different now when exporting scene.json from the URL. Currently I cannot use this library at all until it is compatible 😔

#11

Cannot read properties of undefined (reading 'r')

Doesnt works on my React JS app .
Help me fix this!

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.