splinetool / r3f-spline Goto Github PK
View Code? Open in Web Editor NEWHook to load Spline scenes into react-three-fiber
License: MIT License
Hook to load Spline scenes into react-three-fiber
License: MIT License
It would be nice to support animations when exporting a spline scene, like so:
const { nodes, materials ,animations} = useSpline("https://your-url.spline.com");
useEffect(()=>{
animations.animationName.play();
},[})
Or at least some sort of documentation to handle the animations on your own!
References of similar results: https://github.com/pmndrs/drei#useanimations
The code sandbox environment and downloadable package work off of a .spline file in the examples provided, but export from the spline application as .splinecode. The .splinecode file is not able to be interpreted by the "useSpline" function. This is the code in question.
const { nodes, materials } = useSpline( "https://prod.spline.design/gvgFxposolpeYZr8/scene.splinecode" );
And this is a link to my codesandbox project that was generated from a r3f export in the Spline App.
https://codesandbox.io/s/3-d-text-blue-copy-forked-g0hijd?file=/src/Scene.js:184-297
PS: Fantastic work, I am excited this year to learn more 3d design and development with 3js and r3f, spline is the perfect tool to use, and work with. Thank you!
Hi, since upgrading to v0.9.139 my next app crashes when exported, with the error
Hydration failed because the initial UI does not match what was rendered on the server.
v0.9.138 works fine. I can't provide a reproduction right now but maybe this enough for you to go on anyway.
Hi, I'm looking for a tool that will help with my r3f workflow and came across Spline as a potential solution. I'd like to be able to edit a scene in visual editor, save it and at most do a page refresh to see the updates. r3f-spline seems somewhat promising but it looks like I have to export the code, copy and paste it each time I update the scene, which is a bit clunky. It would be nice if I could just have the scene automatically generated by from the .splinecode file. Is this something that I can do today by iterating through the nodes? Or is this something that is in the works?
The error seems to be coming from SplineLoader, but since that is not an open source library I decided to raise the issue here.
Error:
Uncaught Error: Could not load https://prod.spline.design/IcnOpHOp4rFkJJie/scene.splinecode: Cannot read properties of undefined (reading 'x'))
at index-7dbf758c.esm.js:1586:36
at Object.onLoad (SplineLoader.js:1338:75098)
https://codesandbox.io/s/vkx82s?file=/src/Scene.js
This scene works fine when exported in React, but in the case of R3F, it gave me this error:
Hi everyone, My very first issue on GitHub, so I apologize if I'm doing anything wrong
How to know if the model is loaded from the URL and executes some functions afterward?
Is there any feature similar to onLoad?
When exporting a scene using a particle system project locally, the particleSystem
element is used. r3f does not recognize this element, and suggests using the extend
feature. However, there's no ParticleSystem
component exported from Three.js to use with the extend function.
I wanted a reproducible case, but I've been unable to get it to run in the provided CodeSandbox examples. When I try, the error is a little more obtuse Could not load https://prod.spline.design/CpCwU2vP2DhzynSX/scene.splinecode: Cannot read properties of undefined (reading 'create')
. Unsure if its related to the above particleSystem issue or not, it would appear not since removing the particle system doesn't fix the error.
/*
Auto-generated by Spline
*/
import useSpline from '@splinetool/r3f-spline'
import { OrthographicCamera } from '@react-three/drei'
export default function Scene({ ...props }) {
const { nodes, materials } = useSpline('https://prod.spline.design/CpCwU2vP2DhzynSX/scene.splinecode')
return (
<>
<color attach="background" args={['#4a4a4a']} />
<group {...props} dispose={null}>
<scene name="Scene 1">
<mesh
name="Text"
geometry={nodes.Text.geometry}
material={materials['Text Material']}
castShadow
receiveShadow
position={[1.68, -199.27, 183.69]}
rotation={[0, Math.PI / 2, 0]}
/>
<mesh
name="Sphere"
geometry={nodes.Sphere.geometry}
material={materials['Sphere Material']}
visible={false}
castShadow
receiveShadow
position={[0, 0, -600]}
/>
<group name="Particles" position={[1.68, -100.47, -698.67]}>
<particleSystem
name="Particle Emitter 2"
geometry={nodes['Particle Emitter 2'].geometry}
material={materials['']}
/>
</group>
<OrthographicCamera name="1" makeDefault={true} far={10000} near={-50000} />
<hemisphereLight name="Default Ambient Light" intensity={0.75} color="#eaeaea" />
</scene>
</group>
</>
)
}
When I create a new Spline scene, add a cube, and change its material lighting from Phong to Physical, the exported r3f Scene will not render. The error message in the console says:
THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false
ERROR: 0:1255: 'geometryNormal' : undeclared identifier
ERROR: 0:1255: 'geometryNormal' : undeclared identifier
ERROR: 0:1255: '=' : dimension mismatch
ERROR: 0:1255: '=' : cannot convert from 'highp float' to 'highp 3-component vector of float'
Spline scene with cube: https://my.spline.design/bugpbr-697c24bb953fb9261036866a8faaeb80/
Codesandbox with the error: https://codesandbox.io/s/r3f-spline-pbr-bug-7d2mgc
In the sandbox I also added a Scene1
component, which is the scene from the Spline demo referenced in the Readme. If you render Scene1
instead of Scene2
, you'll also see that the demo suffers from shader issues with [email protected].
is there any other way to fetch
const { nodes, materials } = useSpline(
"https://prod.spline.design/2fzdsSVagfszNxsd/scene.spline",
);
the error that terminal shows
Warning: data for page "/_error" is 195 kB, this amount of data can reduce performance.
See more info here: https://nextjs.org/docs/messages/large-page-data
error - SyntaxError: Cannot use import statement outside a module
Warning: data for page "/_error" is 195 kB, this amount of data can reduce performance.
See more info here: https://nextjs.org/docs/messages/large-page-data
Need feature to Access and modify physics properties from spline
Need support for spline physics to render and API
New to next js and spline, could someone help with this error:
TypeError
Cannot set properties of undefined (setting 'value')
Uncaught Could not load /static/scroll.300ac701.splinecode: Cannot convert undefined or null to object
Actually, i have loaded the splinecode file successfully, but the hook useSpline
throw the up exception.
the splinecode file downloaded from the example
Failed to compile ./node_modules/@splinetool/loader/build/SplineLoader.js Attempted import error: 'mergeBufferGeometries' is not exported from 'three/examples/jsm/utils/BufferGeometryUtils.js' (imported as 'pI'). This error occurred during the build process and can only be dismissed by fixing the error.
i think maybe its just mergeGeometries
?
https://threejs.org/docs/#examples/en/utils/BufferGeometryUtils.mergeBufferGeometries
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.