srcnalt / 3d-profile-avatars Goto Github PK

I can't seem to make it work.

Hello there, I'm having issues to load the textures of my GLB. I have followed the README.md file adding the following:

			<AvatarView
				url="https://d1a370nemizbjq.cloudfront.net/d50e8927-9576-48c5-9f02-4e96aff0736b.glb"
				style={{ width: '100px', height: '100px' }}
				rotateAvatar
				eyeBlink
				headMovement
			/>

Environment

"react": "18.1.0",
"react-dom": "18.1.0",
"next": "12.2.2"

Current Behavior

I can't load the 3D model with textures

Expected Behavior

I should be able to render my 3D model with the textures.

Error Trace

THREE.GLTFLoader: Couldn't load texture blob:http://localhost:3000/2ddf6290-d583-4848-b641-f079262a9da4
window.console.error @ next-dev.js?3515:24
overrideMethod @ react_devtools_backend.js:4026
eval @ GLTFLoader.js?bfc0:2050
Promise.catch (async)
loadTextureImage @ GLTFLoader.js?bfc0:2049
loadTexture @ GLTFLoader.js?bfc0:1984
eval @ GLTFLoader.js?bfc0:1781
_invokeOne @ GLTFLoader.js?bfc0:1712
getDependency @ GLTFLoader.js?bfc0:1780
assignTexture @ GLTFLoader.js?bfc0:2067
loadMaterial @ GLTFLoader.js?bfc0:2249
eval @ GLTFLoader.js?bfc0:1775
_invokeOne @ GLTFLoader.js?bfc0:1712
getDependency @ GLTFLoader.js?bfc0:1774
loadMesh @ GLTFLoader.js?bfc0:2379
eval @ GLTFLoader.js?bfc0:1755
_invokeOne @ GLTFLoader.js?bfc0:1712
getDependency @ GLTFLoader.js?bfc0:1754
createNodeMesh @ GLTFLoader.js?bfc0:2629
eval @ GLTFLoader.js?bfc0:2664
_invokeOne @ GLTFLoader.js?bfc0:1712
eval @ GLTFLoader.js?bfc0:2663
loadNode @ GLTFLoader.js?bfc0:2684
getDependency @ GLTFLoader.js?bfc0:1750
buildNodeHierarchy @ GLTFLoader.js?bfc0:2793
eval @ GLTFLoader.js?bfc0:2843
Promise.then (async)
buildNodeHierarchy @ GLTFLoader.js?bfc0:2833
loadScene @ GLTFLoader.js?bfc0:2759
getDependency @ GLTFLoader.js?bfc0:1746
eval @ GLTFLoader.js?bfc0:1820
getDependencies @ GLTFLoader.js?bfc0:1819
eval @ GLTFLoader.js?bfc0:1602
Promise.then (async)
parse @ GLTFLoader.js?bfc0:1601
parse @ GLTFLoader.js?bfc0:210
eval @ GLTFLoader.js?bfc0:77
eval @ three.module.js?6573:36609
load (async)
load @ three.module.js?6573:36587
load @ GLTFLoader.js?bfc0:75
eval @ react-three-fiber.esm.js?79cd:1809
eval @ react-three-fiber.esm.js?79cd:1808
eval @ react-three-fiber.esm.js?79cd:1807
handleAsset @ index.js?fb7e:24
useAsset @ index.js?fb7e:69
useLoader @ react-three-fiber.esm.js?79cd:1823
useGLTF @ useGLTF.js?1117:29
Avatar @ avatar-view.esm.js?a6e2:144
renderWithHooks @ react-reconciler.development.js?3a0c:6412
mountIndeterminateComponent @ react-reconciler.development.js?3a0c:9238
beginWork @ react-reconciler.development.js?3a0c:10476
beginWork$1 @ react-reconciler.development.js?3a0c:16507
performUnitOfWork @ react-reconciler.development.js?3a0c:15337
workLoopSync @ react-reconciler.development.js?3a0c:15268
renderRootSync @ react-reconciler.development.js?3a0c:15231
performSyncWorkOnRoot @ react-reconciler.development.js?3a0c:14821
workLoop @ scheduler.development.js?bcd2:417
flushWork @ scheduler.development.js?bcd2:390
performWorkUntilDeadline @ scheduler.development.js?bcd2:157

Adding AvatarView into a page in Next.js app results in Uncaught R3F hooks can only be used within the Canvas component! and The above error occurred in the <Environment> component messages.

So I have set up everything accordingly to specs using nextJS however seems like there is a dependency in the code somewhere that breaks the library:

Class extends value undefined is not a constructor or null
TypeError: Class extends value undefined is not a constructor or null at eval (webpack-internal:///./node_modules/three-stdlib/loaders/VOXLoader.js:176:67) at ./node_modules/three-stdlib/loaders/VOXLoader.js (http://localhost:3000/_next/static/chunks/node_modules_sarge_avatar-view_dist_avatar-view_esm_js.js:5637:1) at options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1683914189676:713:31) at webpack_require (http://localhost:3000/_next/static/chunks/webpack.js?ts=1683914189676:37:33) at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1683914189676:368:21) at eval (webpack-internal:///./node_modules/three-stdlib/index.js:836:81) at ./node_modules/three-stdlib/index.js (http://localhost:3000/_next/static/chunks/node_modules_sarge_avatar-view_dist_avatar-view_esm_js.js:4988:1) at options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1683914189676:713:31) at webpack_require (http://localhost:3000/_next/static/chunks/webpack.js?ts=1683914189676:37:33) at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1683914189676:368:21) at eval (webpack-internal:///./node_modules/@react-three/drei/web/Select.js:10:70) at ./node_modules/@react-three/drei/web/Select.js (http://localhost:3000/_next/static/chunks/node_modules_sarge_avatar-view_dist_avatar-view_esm_js.js:1272:1) at options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1683914189676:713:31) at webpack_require (http://localhost:3000/_next/static/chunks/webpack.js?ts=1683914189676:37:33) at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1683914189676:368:21) at eval (webpack-internal:///./node_modules/@react-three/drei/index.js:134:72) at ./node_modules/@react-three/drei/index.js (http://localhost:3000/_next/static/chunks/node_modules_sarge_avatar-view_dist_avatar-view_esm_js.js:1162:1) at options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1683914189676:713:31) at webpack_require (http://localhost:3000/_next/static/chunks/webpack.js?ts=1683914189676:37:33) at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1683914189676:368:21) at eval (webpack-internal:///./node_modules/@sarge/avatar-view/dist/avatar-view.esm.js:8:75) at ./node_modules/@sarge/avatar-view/dist/avatar-view.esm.js (http://localhost:3000/_next/static/chunks/node_modules_sarge_avatar-view_dist_avatar-view_esm_js.js:1305:1) at options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1683914189676:713:31) at webpack_require (http://localhost:3000/_next/static/chunks/webpack.js?ts=1683914189676:37:33) at Function.fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1683914189676:368:21)