XRNet SDK

A React-based 3D model viewer and customization SDK for XRNet platform.

Installation

From npm registry:

npm install @xrnet/sdk

For local development:

# In the SDK directory
npm install
npm run build
npm link

# In your project directory
npm link @xrnet/sdk

Requirements

This package requires the following peer dependencies:

• React 18 or higher
• Material-UI 5
• Three.js
• React Three Fiber
• React Query

Usage

Basic Model Viewer

import { XRNetViewer } from '@xrnet/sdk';

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <XRNetViewer 
        id="your-model-property-id" 
        apiKey={{ publicKey: "your-api-key" }}
      />
    </div>
  );
}

Model Editor

import { XRNetEditor } from '@xrnet/sdk';

function App() {
  return (
    <XRNetEditor
      search="Product Name"
      apiKey={{ publicKey: "your-api-key" }}
      productName="Product Name"
      onModelSelect={(id) => console.log(id)}
      onPreview={(url) => console.log(url)}
    />
  );
}

Using Types

import { XRModel, ModelViewerProps } from '@xrnet/sdk';

const MyComponent: React.FC<ModelViewerProps> = (props) => {
  const model: XRModel = {
    // Your model properties
  };
  
  return <XRNetViewer model={model} {...props} />;
};

Using the Hooks

import { useXrModelRecommendationService } from '@xrnet/sdk';

function App() {
  const { data: models } = useXrModelRecommendationService({
    businessId: 'your-business-id'
  });
  
  return <div>{/* Your component code */}</div>;
}

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch mode for development
npm run dev

# Create local link
npm link

# Test in another project
cd ../your-test-project
npm link @xrnet/sdk

Local Development Workflow

1. Run npm run dev in the SDK directory for live rebuilding
2. Changes will automatically reflect in linked projects
3. Rebuild and relink if you add new dependencies

License

MIT