srcnalt / 3d-profile-avatars Goto Github PK
View Code? Open in Web Editor NEWAdd your website a 3D Profile Avatar using Ready Player Me with a single line of code!
Add your website a 3D Profile Avatar using Ready Player Me with a single line of code!
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)
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
/>
"react": "18.1.0",
"react-dom": "18.1.0",
"next": "12.2.2"
I can't load the 3D model with textures
I should be able to render my 3D model with the textures.
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.
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.