hacksore / react-skinview3d Goto Github PK

View Code? Open in Web Editor NEW

48.0 5.0 9.0 19.81 MB

React component for rendering Minecraft skins

Home Page: https://hacksore.github.io/react-skinview3d

License: MIT License

JavaScript 15.20% TypeScript 82.48% HTML 2.32%

react minecraft skins minecraft-skins

react-skinview3d's Introduction

react-skinview3d

Three.js powered Minecraft skin viewer component for ReactJS powered by skinview3d

Try on codesandbox.io

Install

npm install react-skinview3d

Usage

import React from "react"
import ReactSkinview3d from "react-skinview3d"

const App = () => {

  return (
    <ReactSkinview3d
      skinUrl="textures/skin-1.8-slim-no_hd.png"
      capeUrl="textures/minecon-cape-2016.png"
      height="500"
      width="500"
    />
  )

}

export default App;

Usage

See the storybook demos for more examples on how to use the library

License

MIT © Hacksore

react-skinview3d's People

Stargazers

Watchers

Forkers

adlc-network zziger vaibhavsethia cdsmythe smcodesp fakepng paselmx barrar3port zsfell

react-skinview3d's Issues

Skin Render fails to update when skinUrl changes

I am using the components as suggested in the readMe of the repository, but whenever the URL passed to the component changes, the changes are reflected in the and even caught by the ComponendDidUpdate but the skin render remains the same.

<ViewSkin 
    skinUrl={url}
    capeUrl=""
    height="300"
    width="300"
/>

(Using the component as ViewSkin alias)

ENOENT: no such file or directory

When I start the server using npm start and the version v3.1.0 of react-skinview3d, a long list of warning appears:

Console output

Compiled with warnings.

Failed to parse source map from 'C:\Project Folder\node_modules\react-skinview3d\src\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\react-skinview3d\src\index.tsx'    

Failed to parse source map from 'C:\Project Folder\node_modules\skinview-utils\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview-utils\src\index.ts'

Failed to parse source map from 'C:\Project Folder\node_modules\skinview-utils\src\load-image.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview-utils\src\load-image.ts'

Failed to parse source map from 'C:\Project Folder\node_modules\skinview-utils\src\process.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview-utils\src\process.ts'      

Failed to parse source map from 'C:\Project Folder\node_modules\skinview-utils\src\types.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview-utils\src\types.ts'

Failed to parse source map from 'C:\Project Folder\node_modules\skinview3d\src\animation.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview3d\src\animation.ts'

Failed to parse source map from 'C:\Project Folder\node_modules\skinview3d\src\fxaa.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview3d\src\fxaa.ts'

Failed to parse source map from 'C:\Project Folder\node_modules\skinview3d\src\model.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview3d\src\model.ts'

Failed to parse source map from 'C:\Project Folder\node_modules\skinview3d\src\orbit_controls.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview3d\src\orbit_controls.ts'

Failed to parse source map from 'C:\Project Folder\node_modules\skinview3d\src\skinview3d.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview3d\src\skinview3d.ts'        

Failed to parse source map from 'C:\Project Folder\node_modules\skinview3d\src\viewer.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview3d\src\viewer.ts'

[...]

WARNING in ./node_modules/react-skinview3d/dist/index.es.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Project Folder\node_modules\react-skinview3d\src\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\react-skinview3d\src\index.tsx'        

WARNING in ./node_modules/skinview-utils/build/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Project Folder\node_modules\skinview-utils\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview-utils\src\index.ts'

WARNING in ./node_modules/skinview-utils/build/load-image.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Project Folder\node_modules\skinview-utils\src\load-image.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview-utils\src\load-image.ts'    

WARNING in ./node_modules/skinview-utils/build/process.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Project Folder\node_modules\skinview-utils\src\process.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview-utils\src\process.ts'

WARNING in ./node_modules/skinview-utils/build/types.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Project Folder\node_modules\skinview-utils\src\types.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview-utils\src\types.ts'

WARNING in ./node_modules/skinview3d/libs/animation.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Project Folder\node_modules\skinview3d\src\animation.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview3d\src\animation.ts'

WARNING in ./node_modules/skinview3d/libs/fxaa.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Project Folder\node_modules\skinview3d\src\fxaa.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview3d\src\fxaa.ts'd\src\fxaa.ts'

WARNING in ./node_modules/skinview3d/libs/model.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):                                                                                                                                                                                             3d\src\model.ts'
Failed to parse source map from 'C:\Project Folder\node_modules\skinview3d\src\model.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview3d\src\model.ts'

WARNING in ./node_modules/skinview3d/libs/orbit_controls.js                                                                                                                                                                                                     \skinview3d\src\orbit_controls.ts'    
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Project Folder\node_modules\skinview3d\src\orbit_controls.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview3d\src\orbit_controls.ts'
                                                                                                                                                                                                                                                                nview3d\src\skinview3d.ts'
WARNING in ./node_modules/skinview3d/libs/skinview3d.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Project Folder\node_modules\skinview3d\src\skinview3d.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview3d\src\skinview3d.ts'                                                                                                                                                                                                                                      w3d\src\viewer.ts'

WARNING in ./node_modules/skinview3d/libs/viewer.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Project Folder\node_modules\skinview3d\src\viewer.ts' file: Error: ENOENT: no such file or directory, open 'C:\Project Folder\node_modules\skinview3d\src\viewer.ts'

Error: require() of ES Module, NextJS

Getting:

Error: require() of ES Module E:\skinview3d\myapp\node_modules\skinview3d\libs\skinview3d.js from E:\skinview3d\myapp\node_modules\react-skinview3d\dist\index.js not supported.
Instead change the require of skinview3d.js in E:\skinview3d\myapp\node_modules\react-skinview3d\dist\index.js to a dynamic import() which is available in all CommonJS modules.

With react-skinview3d whilst using NextJS

Sandbox:

https://codesandbox.io/s/determined-varahamihira-62ms17?file=/pages/index.js

No type declarations?

Hey there! Shouldn't be here type declaration for project? It's written in typescript but installed has just js no .d.ts

Module not found

Hey Hacksore,

I would love to be able to use your React Skinview3D as a component in a project I'm working on. however, I'm getting an error saying that it can't find the module when trying to launch my React App server, even after I have installed into it my local project.

"Module not found: Can't resolve 'react-skinview3d"

Thanks heaps, look forward to chatting with you.

Matt

Add cape support

How about adding capes support?

Testing if this is a good platform

Error with require() of ES Module

I'm getting this error when reloading my page.

I'm running this on Windows 11, node v18.12.0, Nextron(Electron + NextJS) 20.1.0 and TypeScript 4.8.2.

Everything works well, but when I reload the page/view, it crashes and shows this error in the console.

Error Log

Instead change the require of skinview3d.js in C:\Users\barra\WebstormProjects\PodPack-Electron\node_modules\react-skinview3d\dist\index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (C:\Users\barra\WebstormProjects\PodPack-Electron\node_modules\react-skinview3d\dist\index.js:1:39)
    at react-skinview3d (C:\Users\barra\WebstormProjects\PodPack-Electron\renderer\.next\server\pages\skins.js:62:18)
    at __webpack_require__ (C:\Users\barra\WebstormProjects\PodPack-Electron\renderer\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/skins/index.tsx:14:74)
    at __webpack_require__.a (C:\Users\barra\WebstormProjects\PodPack-Electron\renderer\.next\server\webpack-runtime.js:97:13)
    at eval (webpack-internal:///./pages/skins/index.tsx:1:21)
    at ./pages/skins/index.tsx (C:\Users\barra\WebstormProjects\PodPack-Electron\renderer\.next\server\pages\skins.js:22:1)
    at __webpack_require__ (C:\Users\barra\WebstormProjects\PodPack-Electron\renderer\.next\server\webpack-runtime.js:33:42)
    at __webpack_exec__ (C:\Users\barra\WebstormProjects\PodPack-Electron\renderer\.next\server\pages\skins.js:102:39)
    at C:\Users\barra\WebstormProjects\PodPack-Electron\renderer\.next\server\pages\skins.js:103:28
    at Object.<anonymous> (C:\Users\barra\WebstormProjects\PodPack-Electron\renderer\.next\server\pages\skins.js:106:3)
    at Object.requirePage (C:\Users\barra\WebstormProjects\PodPack-Electron\node_modules\next\dist\server\require.js:58:12)
    at C:\Users\barra\WebstormProjects\PodPack-Electron\node_modules\next\dist\server\load-components.js:61:73
    at async Object.loadComponents (C:\Users\barra\WebstormProjects\PodPack-Electron\node_modules\next\dist\server\load-components.js:61:26)
    at async DevServer.findPageComponents (C:\Users\barra\WebstormProjects\PodPack-Electron\node_modules\next\dist\server\next-server.js:555:36)
    at async DevServer.renderPageComponent (C:\Users\barra\WebstormProjects\PodPack-Electron\node_modules\next\dist\server\base-server.js:891:24)
    at async DevServer.renderToResponse (C:\Users\barra\WebstormProjects\PodPack-Electron\node_modules\next\dist\server\base-server.js:920:32)
    at async DevServer.pipe (C:\Users\barra\WebstormProjects\PodPack-Electron\node_modules\next\dist\server\base-server.js:369:25)
    at async Object.fn (C:\Users\barra\WebstormProjects\PodPack-Electron\node_modules\next\dist\server\next-server.js:743:21)
    at async Router.execute (C:\Users\barra\WebstormProjects\PodPack-Electron\node_modules\next\dist\server\router.js:247:36)
    at async DevServer.run (C:\Users\barra\WebstormProjects\PodPack-Electron\node_modules\next\dist\server\base-server.js:347:29)
    at async DevServer.run (C:\Users\barra\WebstormProjects\PodPack-Electron\node_modules\next\dist\server\dev\next-dev-server.js:709:20)
    at async DevServer.handleRequest (C:\Users\barra\WebstormProjects\PodPack-Electron\node_modules\next\dist\server\base-server.js:285:20) {
  code: 'ERR_REQUIRE_ESM',
  page: '/skins'
}

// Set the background to a panoramic image
skinViewer.loadPanorama("img/panorama1.png");

Use base64 representation of image instead of image URL

Is it possible to pass a base64 encoding of an image as a string instead of a URL to react-skinview3d?

hacksore / react-skinview3d Goto Github PK

react-skinview3d's Introduction

react-skinview3d

Install

Usage

Usage

License

react-skinview3d's People

Stargazers

Watchers

Forkers

react-skinview3d's Issues

Recommend Projects

Recommend Topics

Recommend Org