# @lastcode802/threedview

> A custom lib for ThreeD View

Latest version **0.1.13** (published 2022-11-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install @lastcode802/threedview
pnpm add @lastcode802/threedview
yarn add @lastcode802/threedview
bun add @lastcode802/threedview
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.13 |
| Published | 2022-11-07 |
| First published | 2022-09-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 15 |
| Unpacked size | 29.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 6 |
| Author | lastcode802 |
| Maintainers | nadirali41006, sahil-nenwani, sharozkhan |
| Keywords | react, typescript, lastcode, 3dmodel, nextjs, three, threejs, three-obj-mtl-loader, three-orbitcontrols |

## Links

- npm: https://www.npmjs.com/package/@lastcode802/threedview
- Repository: https://github.com/lastcode802/threedview
- Homepage: https://lastcode802.github.io/threedview/
- Issues: https://github.com/lastcode802/threedview/issues
- npm.io page: https://npm.io/package/@lastcode802/threedview

## Dependencies (15)

- [react](https://npm.io/package/react.md) ^18.2.0
- [three](https://npm.io/package/three.md) ^0.97.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [typescript](https://npm.io/package/typescript.md) ^4.8.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4
- [@types/jest](https://npm.io/package/@types/jest.md) ^27.5.2
- [@types/node](https://npm.io/package/@types/node.md) ^16.11.56
- [@types/react](https://npm.io/package/@types/react.md) ^18.0.18
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.0.6
- [three-orbitcontrols](https://npm.io/package/three-orbitcontrols.md) ^2.96.3
- [three-obj-mtl-loader](https://npm.io/package/three-obj-mtl-loader.md) ^1.0.3
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.3.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.5
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.13 (latest) — 2022-11-07
- 0.1.12 — 2022-11-07
- 0.1.11 — 2022-11-07
- 0.1.10 — 2022-09-20
- 0.1.9 — 2022-09-04
- 0.1.8 — 2022-09-04
- 0.1.6 — 2022-09-04

## README

<!-- markdownlint-disable-next-line -->
<p align="center">
  <img width="150" src="https://res.cloudinary.com/lastshop802/image/upload/v1662288637/logoSheroz_w9anft.png" alt="MUI logo">
</p>

<h1 align="center">lastcode802</h1>
  <img src="https://res.cloudinary.com/lastshop802/image/upload/v1662310815/LibraryGF_wjl8xb.gif" alt="MUI logo">

# Lastcode802 Present 3d Model View

This library render a 3d model View on React.js and Next.js

## Description
This library or package is all about rendering your 3D models in way, So you can manage or get preview of your 3D models and play with them. 
The model loading speed in the browser depends on the user's internet speed.

#
## Available Code

```jsx
import * as React from 'react';
import { ThreedView } from "@lastcode802/threedview";

function App() {
  return (
    <ThreedView
      model3dmtl="./assets/IronMan/IronMan.mtl"
      model3dobj="./assets/IronMan/IronMan.obj"
      near={0.1}
      positionx3d={0}
      positiony3d={5}
      positionz3d={20}
      meshpositionx={0}
      meshpositiony={3}
      meshpositionz={0}
      rotationx={0.0}
      rotationy={0.01}
      rotationz={0.0}
      scalex={0.02}
      scaley={0.02}
      scalez={0.02}
      threedviewcanvascolor="#263238"
      directionallightcolor={0xffffff}
      directionallightintensity={1.8}
    />
  );
}

export default App;
```
In the interactive demo below, try changing the props and see how it affects the storybook output.

[<img src="https://iconape.com/wp-content/files/qa/371510/svg/371510.svg" width="40"/>](https://lastcode802.github.io/threedview/)

Download default 3d model use in library.

[<img src="https://cdn.worldvectorlogo.com/logos/google-drive.svg" width="40"/>](https://drive.google.com/file/d/1wpWWuF1tMPXOKk3Su2xi_oKRxrTxFYNq/view?usp=sharing)

## Document
#
## Props
			
|     prop      |      type     |     default   |   example     |
| ------------- | ------------- | ------------- | ------------- |
|  model3dmtl*  | string  | ./assets/IronMan/IronMan.mtl  | assests must be in the public folder  |
| model3dobj*   | string  | ./assets/IronMan/IronMan.obj  | assests must be in the public folder  |
|  near*        | number  |0.1  | 0.1-(-10)-1000 |
| positionx3d*  | number  | 3  | 350-(-800000)  |
|  positiony3d* | number  | 5  | 30-(-800000)  |
| positionz3d*  | number  | 20  |20-(-800000)  |
| meshpositionx*| number  | 0  | 0 |
| meshpositiony*| number  | 3  | 0 |
| meshpositionz*| number  | 0  | 0 |
| rotationx*    | number  | 0  |  0-0.001|
|  rotationy*   | number  | 0.01  | 0-0.01   |
| rotationz*    | number  | 0  | 0-0.001  |
|  scalex*      | number  | 0  | (0.1-0.9,0.01-0.0.9,0.0001-0.0009) |
|  scaley*      | number  | 0.02  |  (0.1-0.9,0.01-0.0.9,0.0001-0.0009) |
|  scalez*      | number  | 0.02  |  (0.1-0.9,0.01-0.0.9,0.0001-0.0009) |
| threedviewcanvascolor*  | THREE.ColorRepresentation  | white  | Accepts hash vale,rgb and name of the color  |
|  directionallightcolor*  | number | 16777215  | Accepts hash vale,rgb and name of the color  |
| directionallightintensity*  | number  | 1.8  | 0-255  |
| loaderColor*  | string  | red  | Accepts hash vale,rgb and name of the color  |
| showLoader*  | bool  | true  | true-false  |

# Special Mentions for Contributors

<!-- readme: contributors -start -->
<div style="margin: 0 auto !important; overflow-y:hidden !important;">
<table style="overflow-y:hidden !important;">
<tr>
    <td>
        <a href="https://github.com/sharozraees802">
            <img src="https://avatars.githubusercontent.com/u/52934734?v=4" width="150;" alt="sharozraees802"/>
            <br />
            <sub><b>Creator: Muhammad Sheroz</b></sub>
        </a>
    </td>
    <td>
        <a href="https://github.com/Sahilnenwani">
            <img src="https://avatars.githubusercontent.com/u/59645201?s=400&u=f7a0e3a42e91410494c2cbbfb9d674dcbe291660&v=4"
            width="150;" alt="SahilNenwani"/>
            <br />
            <sub><b>Maintainer: Sahil Nenwani</b></sub>
        </a>
    </td>
    <td>
        <a href="https://github.com/nadirdeveloper">
            <img src="https://avatars.githubusercontent.com/u/63139854?v=4" width="150;" alt="NadirAli"/>
            <br />
            <sub><b>Maintainer: Nadir Ali</b></sub>
        </a>
    </td>
    <tr>
    </table>
    </div>

<hr></hr>
<h1>Find & contact me</h1>
<p><a href="https://www.linkedin.com/company/lastcode/"><img alt="LinkedIn" src="https://img.shields.io/badge/linkedin%20-%230077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white" target="_blank"></a> <a href="mailto:lastcode802@gmail.com"><img alt="Gmail" src="https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white" /></a> <a href="https://www.facebook.com/profile.php?id=100067627036290"><img src="https://img.shields.io/badge/Facebook-1877F2?style=for-the-badge&logo=facebook&logoColor=white" /></a> <a href="https://www.instagram.com/lastcode802/"><img src="https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=Instagram&logoColor=white" /></a> <a href="https://www.youtube.com/channel/UCZfZm4thtZt0drL1j7PKb4w" target="_blank"><img alt="Discord" src="https://img.shields.io/badge/Youtube-FF0000.svg?&style=for-the-badge&logo=Youtube&logoColor=white" /></a>  <a href="https://chat.whatsapp.com/HDazjAi7if29K9FaRcCy5Y"><img src="https://img.shields.io/badge/WhatsApp-25D366?style=for-the-badge&logo=whatsapp&logoColor=white" /></a> <a href="https://discord.gg/gZfequNfyW" target="_blank"><img alt="Discord" src="https://img.shields.io/badge/Discord-5869e9.svg?&style=for-the-badge&logo=Discord&logoColor=white" /></a> <a href="https://github.com/orgs/lastcode802/repositories" target="_blank"><img alt="Github" src="https://img.shields.io/badge/GitHub-%2312100E.svg?&style=for-the-badge&logo=Github&logoColor=white" /></a>
</p>

---
_Source: https://npm.io/package/@lastcode802/threedview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._