open-index/open-npm huggingface dataset:
npm package: 3d-grass-title
Description: A customizable 3D grass-textured title web component using Lit + TypeScript + Three.js
Author: Misael Mercado
Latest version: 1.0.4

# 3D Grass Title

[![CI](https://github.com/MisaelMP/3d-grass-title/workflows/CI/badge.svg)](https://github.com/MisaelMP/3d-grass-title/actions)
[![npm version](https://badge.fury.io/js/3d-grass-title.svg)](https://www.npmjs.com/package/3d-grass-title)
[![Security](https://img.shields.io/badge/security-audited-green.svg)](./SECURITY.md)

A customizable 3D grass-textured title web component using Lit + TypeScript + Three.js.

## Features

- **Grass Shader**: Realistic grass-like displacement and coloring with animated wind effects
- **Customizable**: Full control over text, color, lighting, rotation, and camera position
- **Responsive**: Automatically adapts to container size and device pixel ratio
- **Performance**: Optimized Three.js rendering with efficient shader materials
- **TypeScript**: Full TypeScript support with type definitions
- **Web Components**: Standard web component API, works with any framework

## Installation

```bash
npm install 3d-grass-title
```

## Usage

### Basic Usage

```html
<script type="module">
	import '3d-grass-title';
</script>

<grass-title text="Your Title Here"></grass-title>
```

### With Custom Properties

```html
<grass-title
	text="Columbus Reclaimed"
	color="#66ff99"
	light-intensity="2"
	rotation="[0, 0.3, 0]"
	camera-distance="6"
	link="https://example.com"
></grass-title>
```

## Properties

| Property         | Type                       | Default     | Description                                                      |
| ---------------- | -------------------------- | ----------- | ---------------------------------------------------------------- |
| `text`           | `string`                   | `'Welcome'` | The text to display                                              |
| `color`          | `string`                   | `'#33ff33'` | Base color of the grass shader                                   |
| `lightIntensity` | `number`                   | `1.2`       | Intensity of the directional light                               |
| `rotation`       | `[number, number, number]` | `[0, 0, 0]` | Rotation angles in radians [x, y, z]                             |
| `cameraDistance` | `number`                   | `6`         | Distance of the camera from the text                             |
| `fontUrl`        | `string`                   | `undefined` | URL to a custom Three.js font JSON file                          |
| `link`           | `string`                   | `undefined` | URL to navigate to when clicked (with particle spread animation) |

## Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Build demo site
npm run build:demo

# Type check
npm run typecheck
```

## Demo

Visit the [live demo](https://3d-grass-title.vercel.app) to see the component in action and experiment with different settings.

## License

MIT
npm package: 3d-html
Description: Display HTML on the faces of a 3d cube that can be rotated with the cursor.
Latest version: 0.0.7

# 3D HTML
Display HTML on the faces of a 3d cube that can be rotated with the cursor.

## Demo
See a demonstration of the project here:
[https://kdjdev.github.io/3d-html/](https://kdjdev.github.io/3d-html/)

## Installation
### Using npm:
```sh 
npm install 3d-html
```
### or using yarn:
```sh
yarn add 3d-html
```

## Usage
Once the package is installed, you then need to setup your cube. Represent the cube in HTML by including a `div` tag with class `cubeUIContainer` somewhere in the DOM. It is also recommended that you apply the `loading` class, which will attempt to hide the container using CSS before the cube is ready.
```html
<div class="cubeUIContainer loading">

</div>
```
You will then need to specify 4 faces of the cube(only 4 faces will ever be seen, so you only need 4). These faces are represented by `div` tags with class `cubeUIFace`. You can then include whatever HTML you want to appear on the faces of the cube inside of the `cubeUIFace` `div`s.

```html
<div class="cubeUIContainer loading">
   <div class="cubeUIFace">
      <!--content of first face-->
   </div>
   <div class="cubeUIFace">
      <!--content of second face-->
   </div>
   <div class="cubeUIFace">
      <!--content of third face-->
   </div>
   <div class="cubeUIFace">
      <!--content of fourth face-->
   </div>
</div>
```
To actually convert this HTML into the cube, you finally need to run the initialize function.
```js
import initialize from "3d-html";
initialize();
```
#### Here is a full sample setup of 3d-html
```html
<body>
   <div class="cubeUIContainer loading">
      <div class="cubeUIFace">
         <!--content of first face-->
      </div>
      <div class="cubeUIFace">
         <!--content of second face-->
      </div>
      <div class="cubeUIFace">
         <!--content of third face-->
      </div>
      <div class="cubeUIFace">
         <!--content of fourth face-->
      </div>
   </div>
   
   <script type="module">
      import initialize from "3d-html";
      initialize();
   </script>
</body>
```
If you are using some javascript framework instead of vanilla, you may not be able to run the initialize function inside of an HTML `script` tag, but must run it elsewhere.

## Limitations
Under the hood, 3d-html turns the DOM into images with [html-to-image](https://github.com/bubkoo/html-to-image), and then applies those images to the face of a cube using [three.js](https://github.com/mrdoob/three.js/). Because of this implementation, anything that moves like videos or animated images will not continue to move when the cube turns. Changes in the DOM itself should be fine most of the time, as 3d-html attempts to recreate cube materials when it detects changes in related DOM.
npm package: 3d-model-converter
Description: 3d model converter using CLI
Author: Hiren Reshamwala
Latest version: 1.0.0

# 3d-model-converter
3d model converter using CLI

### Installing

```bash
$ npm install 3d-model-converter -g
```

### Usage

```bash
$ 3d-model-converter -i <import file path> -o <export dir path> -t <target>
$ 3d-model-converter -i model.obj -o ./export -t gltf
$ 3d-model-converter -i model.obj -o ./export -t gltf -b #this will export glb 
```

### Supported formats

##### Import

- FBX
- OBJ
- CTM

##### Export

- GLTF (ascii, binary)
- OBJ
- PLY (ascii, binary)
- STL (ascii, binary)
- USDZ
npm package: 3d-model-gallery
Description: Interactive 3D model gallery with Three.js - Display and navigate 3D models with smooth carousel navigation. Works with React, Next.js, and other frameworks.
Latest version: 0.1.4

# 3D Model Gallery

[![npm version](https://img.shields.io/npm/v/3d-model-gallery.svg)](https://www.npmjs.com/package/3d-model-gallery)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

Interactive 3D model gallery for React with Three.js. Display and navigate 3D models with smooth carousel navigation.

## ✨ Features

- 🎨 Interactive 3D model viewing
- 🔄 Smooth carousel navigation
- ⌨️ Keyboard navigation support
- 📱 Responsive design
- 🎯 Configurable height and scroll speed
- 🖼️ Support for GLB, GLTF formats
- ⚡ Built with React Three Fiber

## 📦 Installation

```bash
npm install 3d-model-gallery
```

**Peer Dependencies:**
```bash
npm install react react-dom three @react-three/fiber @react-three/drei
```

## 🚀 Usage

```tsx
import { GalleryCarousel, ModelData } from '3d-model-gallery';

const models: ModelData[] = [
  {
    id: 1,
    name: 'My 3D Model',
    description: 'An awesome 3D model',
    instruction: 'Scroll to rotate',
    modelUrl: 'https://models.readyplayer.me/64bfa15f0e72c63d7c3934a6.glb',
    height: '80vh'
  }
];

function App() {
  return (
    <GalleryCarousel 
      models={models} 
      showNavigation={true}
      showArrows={true}
      showDots={true}
      height="80vh"
      scrollMultiplier={4}
    />
  );
}
```

## 📖 Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `models` | `ModelData[]` | required | Array of 3D models to display |
| `showNavigation` | `boolean` | `false` | Enable navigation controls |
| `showArrows` | `boolean` | `false` | Show left/right arrows |
| `showDots` | `boolean` | `false` | Show dot indicators |
| `height` | `string` | `'80vh'` | Carousel height |
| `scrollMultiplier` | `number` | `4` | Rotation speed |
| `isLoading` | `boolean` | `false` | Show loading state |
| `error` | `string \| null` | `null` | Error message |

## 🤝 Contributing

We welcome contributions! See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.

## 📄 License

MIT © [Contributors](./LICENSE)

## 🌟 Show Your Support

Give a ⭐️ if this project helped you!
npm package: 3d-phone-carousel
Description: A simple, modern look 3D image carousel with IPhone frame, written with React
Author: mahdi-g01
Latest version: 1.0.52

# 3D Phone Carousel

A simple, modern look 3D phone carousel, written with React.
![An animated GIF show of 3D phone carousel](src/gif-show-banner.gif)
+ Modern simple look
+ Easy to implement
+ Easy to modify
+ CSS based 3D effect
+ Written with React

## Installation

Just run ```npm i 3d-phone-carousel```

## How to use

After installation, you are able to use ```PhoneSlider``` component.

You can set up these props to:

+ **items** (Required): And array of objects, that should include these variables:
  + ```image```: Image url or reference (recommended image size: 408 * 190)
  + ```title```: The title of slide
  + ```description```: The subtitle of the slide
+ **delay** (Optional): The amount of time that component slides automatically (in milliseconds). Default value is 3000 (3 seconds)
+ **forwardButtonRef** (Optional): Define a Custom forward slide move button reference;
  That should be a React or html component reference
  (You can use ```useRef()``` to define the reference)
+ **backwardButtonRef** (Optional): Define a Custom backward slide move button reference;
  That should be a React or html component reference
  (You can use ```useRef()``` to define the reference)

### Example of usage
```
// REMEMBER TO IMPORT BOTH COMPONENT AND ITS STYLE
import "3d-phone-carousel/dist/index.css"
import { PhoneSlider } from '3d-phone-carousel/dist';

function YourParentComponent(props) {
    const slideForwardButton = useRef(null);
    const slideBackgroundButton = useRef(null);

    return <div className="section">

      <div ref={slideForwardButton} className="custom-slide-button"/>

      <PhoneSlider style={{
          margin: "80px 0"
      }}
        backwardButtonRef={slideBackgroundButton}
        forwardButtonRef={slideForwardButton}
        items={[
          {
            description: "Example Description of slide 1",
            title: "Title of image 1",
            image: "/url to your image"
          },
          {
            description: "Example Description of slide 2",
            title: "Title of image 2",
            image: "/url to your image"
          },
          {
            description: "Example Description of slide 3",
            title: "Title of image 3",
            image: "/url to your image"
          }
        ]}/>

      <div ref={slideBackgroundButton} className="custom-slide-button"/>

  </div>
}
```

## Need help or any suggestions?

Email me: [mahdi.khansari.mk@gmail.com](mailto:mahdi.khansari.mk@gmail.com)

Telegram:  [@geekoptech](https://t.me/geekoptech)

## Author and licence

This project has been made by **Mahdi Khansari** under **MIT licence**

Help me to maintain and improve it :)
npm package: 3d-pie-chart
Description: Raphael plugin 3d pie chart
Author: Peng Zhang
Latest version: 1.0.1

## 3D Pie Chart
Adorable and highly customizable [Raphaël](https://www.npmjs.com/package/raphael) 3d pie/dounut chart.

### Installation
```
npm install 3d-pie-chart --save
```

### Build
```
npm run build
```
The bundle file includes raphael.js, there is no need to download it separately.


### Usage
#### run on test page
```
npm run start:dev
```
#### run on your own page
Build first, then use generated dist/3d-pie.bundle.js file in your html
```
<script src="your/path/3d-pie.bundle.js"></script>
```

### Example
```
pieChart({
	containerId: "wrapper",
	title: "Expenses",
	data: [
		{
			value: 45,
			color: "#00ff00",
			label: "January - 45"
		},
		{
			value: 49,
			color: "#ff0011",
			label: "February - 49"
		},
		{
			value: 40,
			color: "#0079fa",
			label: "March - 40"
		}
	]
});
```
npm package: 3d-print-letterpress
Description: OpenType and TrueType to 3D-printable .stl of type for letterpress printing
Author: Jonathan Zong
Latest version: 0.0.4

# 3d-print-letterpress
Converts OpenType and TrueType (.otf and .ttf) files into 3D printable (.stl) models of letterpress type for a specified point size and glyph.

This project brings together two technologies, old and new, that empower people through the democratization of production.

<img src="https://cloud.githubusercontent.com/assets/4650077/7669372/5f308a92-fc3e-11e4-9a37-b9cc01d28f8c.jpg" width="250"/>

Installation
------------

3d-print-letterpress requires [node.js](http://nodejs.org).

Install via [npm](https://www.npmjs.org)
```
$ npm install git+https://git@github.com:jonathanzong/3d-print-letterpress.git -g
```

Usage Example
-------------

```
$ 3d-print-letterpress 
Usage: 3d-print-letterpress type-file [point-size [glyphs]]
Usage: 3d-print-letterpress svg-file
```

Keep in mind that STL files are unitless, and that you will have to scale your models to type-high (0.918 in or 23.317 mm).

### Single Glyph

```
$ 3d-print-letterpress Gotham-Book.otf 16 H
output written to Gotham-BookSTL/Gotham-Book16ptUpperH.stl
```
<img src="https://cloud.githubusercontent.com/assets/4650077/6158011/49adf192-b214-11e4-852e-cccc9b920b0d.png" width="250"/>

### Multiple Glyphs

```
$ 3d-print-letterpress Gotham-Book.otf 16 OMG
output written to Gotham-BookSTL/Gotham-Book16ptUpperO.stl
output written to Gotham-BookSTL/Gotham-Book16ptUpperM.stl
output written to Gotham-BookSTL/Gotham-Book16ptUpperG.stl
```
<img src="https://cloud.githubusercontent.com/assets/4650077/6433055/f4648cf0-c032-11e4-858a-e6f5357baf8a.png" width="250"/>

### SVG Path File

```
$ 3d-print-letterpress bird.svg
output written to svg_pathSTL/svg_path97ptbird.stl
```
<img src="https://cloud.githubusercontent.com/assets/4650077/6433035/cb66b486-c032-11e4-9026-507926ae7cdc.png" width="250"/>

Final Product
-------------
Depending on the resolution of your 3d printer, you will likely have to sand the letter face to be perfectly level. I used fine sandpaper while checking the height with a type gauge (pictured above).

My first print:

<img src="https://cloud.githubusercontent.com/assets/4650077/7669323/b7132b6e-fc3b-11e4-8c8b-4c8a5be98c7a.jpg" width="250"/>

I chose a sans-serif letter T for its very geometric figure. The grooves are a byproduct of how the 3d printer extrudes. I like how it gives an indication of the material from which the type is made.


Dependencies
-----------
3d-print-letterpress uses

- [opentype](https://github.com/nodebox/opentype.js) -- parser for OpenType and TrueType formats
- [JSModeler](https://github.com/kovacsv/JSModeler) -- 3D modeling library modifed here to work in Node.js (removed references to the DOM)
- [node-raphael](https://github.com/dodo/node-raphael) -- SVG utility to perform path calculations


License
-----------
MIT