@niobrix/solidjs-skinview3d NPM

solidjs-skinview3d

SolidJS wrapper component for SkinView3D, which allows you to easily integrate 3D Minecraft skin preview into your SolidJS application.

Quick Start

Installation:

npm i solidjs-skinview3d
# or
yarn add solidjs-skinview3d
# or
pnpm add solidjs-skinview3d

Usage:

import { SolidSkinView3D } from 'solidjs-skinview3d';

function App() {
  return (
    <div style={{ width: '300px', height: '400px' }}>
      <SolidSkinView3D
        skinUrl="skin.png"
        capeUrl="cape.png"
        width={300}
        height={400}
        autoRotate={true}
      />
    </div>
  );
}

Component Properties

Property	Type	Default	Description
`width`	`number`	`300`	Component width in pixels
`height`	`number`	`400`	Component height in pixels
`skinUrl`	`string`	-	Minecraft skin URL
`capeUrl`	`string`	-	Minecraft cape URL
`className`	`string`	-	Additional CSS class for canvas
`background`	`string \\| THREE.Color \\| THREE.Texture`	-	Background for rendering
`zoom`	`number`	-	Camera zoom level
`fov`	`number`	`70`	Camera field of view in degrees
`autoRotate`	`boolean`	`false`	Enable automatic model rotation
`rotateSpeed`	`number`	`0.005`	Model rotation speed
`autoResize`	`boolean`	`false`	Auto-resize when parent element changes size
`showLoader`	`boolean`	`true`	Show loading indicator
`onReady`	`(viewer: SkinViewer) => void`	-	Callback after component initialization
`onSkinLoaded`	`() => void`	-	Callback after skin is loaded
`onSkinError`	`(error: Error) => void`	-	Callback when skin loading fails
`ears`	`boolean \\| { textureType: 'standalone' \\| 'skin', source: string }`	`false`	Enable ears for model
`backEquipment`	`'cape' \\| 'elytra'`	`'cape'`	Type of back equipment (cape or elytra)

Reactivity Example

import { createSignal } from 'solid-js';
import { SolidSkinView3D } from 'solidjs-skinview3d';

function App() {
  const [skinUrl, setSkinUrl] = createSignal('URL_to_skin');
  const [capeUrl, setCapeUrl] = createSignal('URL_to_cape');
  const [isElytra, setIsElytra] = createSignal(false);

  return (
    <div>
      <SolidSkinView3D
        skinUrl={skinUrl()}
        capeUrl={capeUrl()}
        backEquipment={isElytra() ? 'elytra' : 'cape'}
        width={300}
        height={400}
      />

      <button onClick={() => setIsElytra(!isElytra())}>
        {isElytra() ? 'Show Cape' : 'Show Elytra'}
      </button>
    </div>
  );
}

Access to skinview3d API

The component provides access to the native skinview3d API through the onReady callback:

import { SolidSkinView3D } from 'solidjs-skinview3d';
import { SkinViewer, WalkingAnimation } from 'skinview3d';

function App() {
  const handleReady = (viewer: SkinViewer) => {
    // Access to native skinview3d API
    viewer.animation = new WalkingAnimation();
    viewer.animation.speed = 0.8;

    // Adjust lighting
    viewer.globalLight.intensity = 0.7;
    viewer.cameraLight.intensity = 0.3;
  };

  return (
    <SolidSkinView3D
      skinUrl="URL_to_skin"
      onReady={handleReady}
    />
  );
}

License

MIT

solid skinview3d skinview3d-solidjs solidjs-skinview3d

@niobrix/solidjs-skinview3d skinview3d three

@niobrix/solidjs-skinview3d

1.0.0

7 months ago