search

splinetool / react-spline

React component for Spline scenes.
MIT License
1.16k stars 56 forks source link

Attempted import error: 'mergeBufferGeometries' is not exported from 'three/examples/jsm/utils/BufferGeometryUtils.js' (imported as 'yI') in useSpline #177

Closed erlanggaht closed 2 months ago

erlanggaht commented 5 months ago

Screenshot 2024-04-05 083139

Is it because splinetool is still in beta, useSpline cannot be used in Nextjs14, and this error occurs

/*
  Auto-generated by Spline
*/
'use client'
import useSpline from '@splinetool/r3f-spline'
import { OrthographicCamera } from '@react-three/drei'

export default function Boneka_Model({ ...props }) {
  const { nodes, materials } = useSpline('https://prod.spline.design/5GkVIOlzvtve1IUT/scene.splinecode')
  return (
    <>
      <color attach="background" args={['#feeaea']} />
      <group {...props} dispose={null}>
        <scene name="Scene">
          <directionalLight
            name="Directional Light"
            intensity={0.7}
            shadow-mapSize-width={1024}
            shadow-mapSize-height={1024}
            shadow-camera-near={-10000}
            shadow-camera-far={100000}
            shadow-camera-left={-1250}
            shadow-camera-right={1250}
            shadow-camera-top={1250}
            shadow-camera-bottom={-1250}
            position={[200, 300, 300]}
          />
          <mesh
            name="Floor"
            geometry={nodes.Floor.geometry}
            material={materials['Floor Material']}
            castShadow
            receiveShadow
            position={[21.44, -244.76, 111.19]}
            rotation={[-Math.PI / 2, 0, 0]}
            scale={1}
          />
          <group name="Little" position={[63.18, 23.61, 219.64]} rotation={[-0.11, -0.6, -0.05]} scale={1}>
            <mesh
              name="Cube 8"
              geometry={nodes['Cube 8'].geometry}
              material={materials['Little Body']}
              castShadow
              receiveShadow
              position={[0.15, -9.58, 9.86]}
            />
            <mesh
              name="Sphere 5"
              geometry={nodes['Sphere 5'].geometry}
              material={materials.Eyes}
              castShadow
              receiveShadow
              position={[30.83, 24.04, 60.61]}
              scale={0.78}
            />
            <mesh
              name="Sphere 4"
              geometry={nodes['Sphere 4'].geometry}
              material={materials.Eyes}
              castShadow
              receiveShadow
              position={[-29.56, 24.04, 60.61]}
              scale={0.78}
            />
            <mesh
              name="Cube 14"
              geometry={nodes['Cube 14'].geometry}
              material={materials['Little Body']}
              castShadow
              receiveShadow
              position={[-62.23, -26.56, 32.58]}
              rotation={[-2.9, -0.17, 0.47]}
              scale={0.27}
            />
            <mesh
              name="Cube 13"
              geometry={nodes['Cube 13'].geometry}
              material={materials['Little Body']}
              castShadow
              receiveShadow
              position={[60.88, -22.67, 32.91]}
              rotation={[-3.12, 0.25, -0.47]}
              scale={0.27}
            />
            <mesh
              name="Cube 12"
              geometry={nodes['Cube 12'].geometry}
              material={materials['Little orange']}
              castShadow
              receiveShadow
              position={[28.31, -66.41, 22.5]}
              rotation={[3.02, -0.03, -0.45]}
              scale={0.27}
            />
            <mesh
              name="Cube 121"
              geometry={nodes['Cube 121'].geometry}
              material={materials['Little orange']}
              castShadow
              receiveShadow
              position={[-29.9, -66.22, 24.16]}
              rotation={[3.02, -0.03, 0.13]}
              scale={0.27}
            />
            <mesh
              name="Cube 11"
              geometry={nodes['Cube 11'].geometry}
              material={materials['Little orange']}
              castShadow
              receiveShadow
              position={[1.09, 8.83, 64.44]}
              rotation={[1.16, 0.5, 0.61]}
              scale={[0.96, 1.04, 0.93]}
            />
            <mesh
              name="Cube 10"
              geometry={nodes['Cube 10'].geometry}
              material={materials['Little orange']}
              castShadow
              receiveShadow
              position={[0.52, 15.39, 65.03]}
              rotation={[-0.09, 0.85, 1.19]}
              scale={[0.88, 0.97, 1]}
            />
            <mesh
              name="Cube 9"
              geometry={nodes['Cube 9'].geometry}
              material={materials['Little Body']}
              castShadow
              receiveShadow
              position={[-1.4, 60.95, 25.99]}
              rotation={[0.68, 0.26, 0.62]}
              scale={1}
            />
          </group>
          <group name="Big" position={[-8.9, 47.41, 23.19]}>
            <mesh
              name="Body"
              geometry={nodes.Body.geometry}
              material={materials['Big Body']}
              castShadow
              receiveShadow
              position={[-19.44, -31.2, -23.27]}
              rotation={[0, 0, 0.09]}
              scale={1}
            />
            <group name="Group" position={[-14.18, 77.12, 147.58]} rotation={[-0.22, 0, 0]} scale={0.51}>
              <mesh
                name="Cylinder"
                geometry={nodes.Cylinder.geometry}
                material={materials.Eyes}
                castShadow
                receiveShadow
                position={[-24.8, 21.54, 0.39]}
                rotation={[0, -0.02, 0.08]}
                scale={1}
              />
              <mesh
                name="Torus 2"
                geometry={nodes['Torus 2'].geometry}
                material={materials.Eyes}
                castShadow
                receiveShadow
                position={[-47.51, 17.38, 0]}
                rotation={[0, -0.02, 2.2]}
                scale={1}
              />
              <mesh
                name="Torus"
                geometry={nodes.Torus.geometry}
                material={materials.Eyes}
                castShadow
                receiveShadow
                position={[-1.89, 20.99, 0.87]}
                rotation={[0, -0.02, 2.2]}
                scale={1}
              />
            </group>
            <mesh
              name="Sphere 3"
              geometry={nodes['Sphere 3'].geometry}
              material={materials.Eyes}
              castShadow
              receiveShadow
              position={[51.11, 82.72, 117.21]}
              rotation={[0, 0, 0.09]}
            />
            <mesh
              name="Sphere 2"
              geometry={nodes['Sphere 2'].geometry}
              material={materials.Eyes}
              castShadow
              receiveShadow
              position={[-112.82, 68.48, 117.21]}
              rotation={[0, 0, 0.09]}
            />
            <mesh
              name="Sphere"
              geometry={nodes.Sphere.geometry}
              material={materials['Big Body']}
              castShadow
              receiveShadow
              position={[-8.1, -165.45, -186.91]}
              rotation={[-Math.PI, 0, -Math.PI]}
            />
            <mesh
              name="Cube 5"
              geometry={nodes['Cube 5'].geometry}
              material={materials['Big Body']}
              castShadow
              receiveShadow
              position={[107.53, -78.29, 146.64]}
              rotation={[1.67, 0, -0.16]}
              scale={0.8}
            />
            <mesh
              name="Cube 7"
              geometry={nodes['Cube 7'].geometry}
              material={materials['Big Body']}
              castShadow
              receiveShadow
              position={[71.21, -197.72, 36.96]}
              rotation={[3.02, -0.03, -0.45]}
              scale={0.8}
            />
            <mesh
              name="Cube 6"
              geometry={nodes['Cube 6'].geometry}
              material={materials['Big Body']}
              castShadow
              receiveShadow
              position={[-101.62, -197.14, 41.89]}
              rotation={[3.02, -0.03, 0.13]}
              scale={0.8}
            />
            <mesh
              name="Cube 4"
              geometry={nodes['Cube 4'].geometry}
              material={materials['Big Body']}
              castShadow
              receiveShadow
              position={[-30.17, -83.07, 168.16]}
              rotation={[1.67, 0, -0.4]}
              scale={0.8}
            />
            <mesh
              name="Cube 3"
              geometry={nodes['Cube 3'].geometry}
              material={materials['Big Body']}
              castShadow
              receiveShadow
              position={[-17.23, 215.12, -8.87]}
              rotation={[0, 0, 0.38]}
              scale={0.93}
            />
            <mesh
              name="Cube 2"
              geometry={nodes['Cube 2'].geometry}
              material={materials['Big Body']}
              castShadow
              receiveShadow
              position={[-69.75, 208.7, -8.87]}
              rotation={[0, 0, -0.18]}
              scale={0.93}
            />
          </group>
          <OrthographicCamera name="1" makeDefault={true} far={10000} near={-50000} />
          <hemisphereLight name="Default Ambient Light" intensity={0.75} color="#eaeaea" />
        </scene>
      </group>
    </>
  )
}

then I call the component as usual

superguigui commented 2 months ago

Hi we are taking a look at this issue but know that is not from this repository, but in https://github.com/splinetool/r3f-spline/ instead. Closing in favor of https://github.com/splinetool/r3f-spline/issues/23