open-index/open-npm huggingface dataset:
npm package: @masatomakino/pixijs-basic-button
Description: Interactive button library for pixi.js
Author: MasatoMakino
Latest version: 0.9.4

# pixijs-basic-button

> Interactive button library for pixi.js

[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
[![CI](https://github.com/MasatoMakino/pixijs-basic-button/actions/workflows/ci_main.yml/badge.svg)](https://github.com/MasatoMakino/pixijs-basic-button/actions/workflows/ci_main.yml)
[![Maintainability](https://api.codeclimate.com/v1/badges/53987c65647c8bb04eba/maintainability)](https://codeclimate.com/github/MasatoMakino/pixijs-basic-button/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/53987c65647c8bb04eba/test_coverage)](https://codeclimate.com/github/MasatoMakino/pixijs-basic-button/test_coverage)

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=MasatoMakino&repo=pixijs-basic-button)](https://github.com/MasatoMakino/pixijs-basic-button)

## Demo

[Demo Page](https://masatomakino.github.io/pixijs-basic-button/demo/)

## Getting Started

### Install

pixijs-basic-button depend on [pixi.js](https://github.com/pixijs/pixi.js)

```bash
npm install pixi.js --save-dev
```

and

```bash
npm install @masatomakino/pixijs-basic-button.git --save-dev
```

### Import

pixijs-basic-button is composed of ES6 modules and TypeScript d.ts files.

At first, import classes.

```js
import { BasicClickButton } from "@masatomakino/pixijs-basic-button";
```

### Add to stage

```js
import { Assets, Sprite } form "pixi.js"

await Assets.load(bitmapURL);
const button = new BasicClickButton({
  normal: Sprite.form(bitmapURL),
});
stage.addChild(button);
```

[API documents](https://masatomakino.github.io/pixijs-basic-button/api/)

## License

[MIT licensed](LICENSE).
npm package: @masatomakino/pixijs-loader-util
Description: Asset load helper for pixi.js
Author: MasatoMakino
Latest version: 0.4.0

# pixijs-loader-util

Asset load helper for pixi.js

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
[![Test Coverage](https://api.codeclimate.com/v1/badges/e1436df54e3d2b518c2e/test_coverage)](https://codeclimate.com/github/MasatoMakino/pixijs-loader-util/test_coverage)
[![Maintainability](https://api.codeclimate.com/v1/badges/e1436df54e3d2b518c2e/maintainability)](https://codeclimate.com/github/MasatoMakino/pixijs-loader-util/maintainability)

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=MasatoMakino&repo=pixijs-loader-util)](https://github.com/MasatoMakino/pixijs-loader-util)

## Demo

[Demo Page](https://masatomakino.github.io/pixijs-loader-util/demo/)

## Getting Started

### Install

```bash
npm install @masatomakino/pixijs-loader-util --save-dev
```

pixijs-loader-util depend on [pixi.js](https://github.com/pixijs/pixi.js)

### Import

pixijs-loader-util is composed of ES6 modules and TypeScript d.ts files.

At first, import classes.

```js
import {
  fetchImage,
  loadAutoPlayableMovie,
} from "@masatomakino/pixijs-loader-util";
```

[API documents](https://masatomakino.github.io/pixijs-loader-util/api/)

## License

[MIT license](LICENSE).
npm package: @masatomakino/pixijs-mouse-event-transmitter
Description: Transmit mouse events from pixi.js stage to other canvas.
Author: MasatoMakino
Latest version: 0.6.0

# pixijs-mouse-event-transmitter

> Transmit mouse events from pixi.js stage to other canvas.

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
[![CI](https://github.com/MasatoMakino/pixijs-mouse-event-transmitter/actions/workflows/ci.yml/badge.svg)](https://github.com/MasatoMakino/pixijs-mouse-event-transmitter/actions/workflows/ci.yml)
[![Test Coverage](https://api.codeclimate.com/v1/badges/7131362c8f55827fdb2e/test_coverage)](https://codeclimate.com/github/MasatoMakino/pixijs-mouse-event-transmitter/test_coverage)
[![Maintainability](https://api.codeclimate.com/v1/badges/7131362c8f55827fdb2e/maintainability)](https://codeclimate.com/github/MasatoMakino/pixijs-mouse-event-transmitter/maintainability)

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=MasatoMakino&repo=pixijs-mouse-event-transmitter)](https://github.com/MasatoMakino/pixijs-mouse-event-transmitter)

## Demo

[Demo Page](https://masatomakino.github.io/pixijs-mouse-event-transmitter/demo/)

## API

[API document](https://masatomakino.github.io/pixijs-mouse-event-transmitter/api/)

## Getting Started

### Install

pixijs-mouse-event-transmitter depend on [pixi.js](https://github.com/pixijs/pixi.js)

```bash
npm install pixi.js --save-dev
```

and

```bash
npm install @masatomakino/pixijs-mouse-event-transmitter --save-dev
```

### Import

pixijs-mouse-event-transmitter is composed of ES modules and TypeScript d.ts files.

At first, import classes.

```js
import { MouseEventTransmitter } from "@masatomakino/pixijs-mouse-event-transmitter";

const transmitter = new MouseEventTransmitter({
  transmitTarget: canvas, // transmitter target ( dom element )
  app: app, // app instance of pixi.js
});

canvas.addEventListener("pointermove", (e) => {
  console.log(e);
});
```
npm package: @masatomakino/pixijs-particle-waypoint
Description: Particle waypoint module for pixi.js
Author: MasatoMakino
Latest version: 0.9.2

# pixijs-particle-waypoint

> Particle waypoint module for pixi.js

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
[![npm version](https://badge.fury.io/js/@masatomakino%2Fpixijs-particle-waypoint.svg)](https://badge.fury.io/js/@masatomakino%2Fpixijs-particle-waypoint)
[![build](https://github.com/MasatoMakino/pixijs-particle-waypoint/actions/workflows/ci_main.yml/badge.svg?branch=main)](https://github.com/MasatoMakino/pixijs-particle-waypoint/actions/workflows/ci_main.yml)
[![Maintainability](https://api.codeclimate.com/v1/badges/90eacb3e6a78a7344b9b/maintainability)](https://codeclimate.com/github/MasatoMakino/pixijs-particle-waypoint/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/90eacb3e6a78a7344b9b/test_coverage)](https://codeclimate.com/github/MasatoMakino/pixijs-particle-waypoint/test_coverage)

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=MasatoMakino&repo=pixijs-particle-waypoint)](https://github.com/MasatoMakino/pixijs-particle-waypoint)

## Demo

https://user-images.githubusercontent.com/2356805/222048951-de4aff56-03cc-48e3-8e0a-3d1e50c3d90d.mov

[Demo Page](https://masatomakino.github.io/pixijs-particle-waypoint/demo/)

## API

[API document](https://masatomakino.github.io/pixijs-particle-waypoint/api/)

## License

[MIT licensed](LICENSE).
npm package: @masatomakino/qiita-to-md
Description: Markdown generator from qiita.com
Author: MasatoMakino
Latest version: 0.5.0
Deprecated: This package is deprecated. Please use @qiita/qiita-cli instead. See https://github.com/MasatoMakino/qiita-to-md/issues/44

# qiita-to-md

> [!CAUTION] > **This repository has been archived.**
>
> This package is deprecated in favor of [Qiita CLI](https://github.com/increments/qiita-cli), which provides the `qiita pull` command for downloading articles as Markdown.
>
> **Migration:** Install Qiita CLI and use `qiita pull` to download your articles.
>
> **Security:** If you have a `.qiita_token.json` file, revoke the token and delete the file.
>
> See [#44](https://github.com/MasatoMakino/qiita-to-md/issues/44) for details.

Markdown generator from qiita.com

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)

## Getting Started

### Install

```bash
npm i @masatomakino/qiita-to-md --save-dev
```

### Add Token file

create `.qiita_token.json` and write your [api access token](https://qiita.com/api/v2/docs#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3).

```json
{
  "user_id": "your id",
  "token": "your token <40 Characters>"
}
```

The path of the token file can be changed optionally.

### run node script

```js
import { JsonGenerator } from "@masatomakino/qiita-to-md";
JsonGenerator.generate();
```

### run on CLI

```shell
npx @masatomakino/qiita-to-md
```

## License

[MIT licensed](LICENSE).
npm package: @masatomakino/raf-ticker
Description: Simple ticker with requestAnimationFrame.
Author: MasatoMakino
Latest version: 0.6.4

# RAF-ticker

> A simple ticker with requestAnimationFrame.

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
[![CI_Main](https://github.com/MasatoMakino/raf-ticker/actions/workflows/ci_main.yml/badge.svg)](https://github.com/MasatoMakino/raf-ticker/actions/workflows/ci_main.yml)
[![Maintainability](https://api.codeclimate.com/v1/badges/1b76d40aaf6bf61c28f0/maintainability)](https://codeclimate.com/github/MasatoMakino/raf-ticker/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/1b76d40aaf6bf61c28f0/test_coverage)](https://codeclimate.com/github/MasatoMakino/raf-ticker/test_coverage)

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=MasatoMakino&repo=raf-ticker&show_owner=true)](https://github.com/MasatoMakino/raf-ticker)

## Demo

[Demo page](https://masatomakino.github.io/raf-ticker/demo/)

Open the console from your browser's developer tools.

## Getting Started

### Install

```bash
npm i @masatomakino/raf-ticker -D
```

### How to use

```js
import { RAFTicker } from "@masatomakino/raf-ticker";
```

Just import and `RAFTicker` starts.

```js
RAFTicker.on("tick", (e) => {
  console.log(e);
});
```

`RAFTicker` dispatches events every frame.

[API document](https://masatomakino.github.io/raf-ticker/api/index.html)

### Why is this package necessary?

Unification of requestAnimationFrame improves rendering performance.

https://stackoverflow.com/questions/17103785/multiple-requestanimationframe-performance

If you use multiple animation modules together, setting up a render loop in each module will increase the cost of callbacks.

> **Warning**
> Performance improvement from unifying requestAnimationFrame depends on the browser implementation. In future versions of the browser, this approach may result in performance degradation. Be sure to check performance in your actual environment.

## License

[MIT licensed](LICENSE).
npm package: @masatomakino/release-helper
Description: A simple script to automate the release process, including creating release branches, updating version numbers, and generating GitHub releases.
Author: MasatoMakino
Latest version: 0.4.0
Deprecated: This package is deprecated. Release workflows should not be distributed as npm packages — npm execution environments and release permissions should be separated for supply chain security. See https://github.com/MasatoMakino/release-helper/issues/209

> [!CAUTION]
>
> **This repository has been archived.**
>
> npm package execution environments and release permissions should be separated for supply chain security. Distributing release workflows as an npm package is inherently contradictory — the isolated environment that protects against supply chain attacks cannot hold the credentials needed for releasing.
>
> See [#209](https://github.com/MasatoMakino/release-helper/issues/209) for details.

# Release Helper

This is a simple script to help with the release process of a project. It will create a new release branch, update the version number in the project files, and create a release of GitHub.

## Installation

This script is intended to be used as a devDependency in a Node.js project.

### Requirements

You will need the following installed on your system to use this script:

- [Node.js](https://nodejs.org/en/) is required to run this script.
- [Git](https://git-scm.com/) is required to create a release branch.
- [GitHub CLI](https://cli.github.com/) is required to create a pull request.

### Install

Install the package

```bash
npm install -D @masatomakino/release-helper
```

and initialize labels and release note template on GitHub.

```
npx @masatomakino/release-helper init
```

add the following to your `package.json`

```json
    "preversion": "npx @masatomakino/release-helper preversion",
    "postversion": "npx @masatomakino/release-helper postversion",
    "release": "npx @masatomakino/release-helper release",
```

## Usage

`npm version <patch|minor|major>` will create a new release branch, update the version number in the project files, and create a pull request of GitHub. If you enable auto merge and status check, `release` command will execute automatically.

`npm run release` will push a tag, and create druft release of GitHub.

## Commands

```console
Usage: CLI [options] [command]

Options:
  -h, --help             display help for command

Commands:
  preversion [options]                 checkout to default branch and pull latest changes, and run test
  postversion [options]                create a pull request on GitHub
  release [options]                    push version tag and create a release on GitHub
  preview                              get release note from GitHub release
  init [options]                       initialize release label and release note template
  generate-release-template [options]  generate release note template to .github directory
  help [command]                       display help for command
```

## License

[MIT licensed](LICENSE).
npm package: @masatomakino/threejs-billboard
Description: billboard module for three.js
Author: MasatoMakino
Latest version: 0.13.0

# threejs-billboard

> billboard module for three.js

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
[![Test Coverage](https://api.codeclimate.com/v1/badges/5e46ba2a716da782e45e/test_coverage)](https://codeclimate.com/github/MasatoMakino/threejs-billboard/test_coverage)
[![Maintainability](https://api.codeclimate.com/v1/badges/5e46ba2a716da782e45e/maintainability)](https://codeclimate.com/github/MasatoMakino/threejs-billboard/maintainability)

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=MasatoMakino&repo=threejs-billboard&show_owner=true)](https://github.com/MasatoMakino/threejs-billboard)

## Demo

[Demo page](https://masatomakino.github.io/threejs-billboard/demo/)

## Getting Started

### Install

```bash
npm install @masatomakino/threejs-billboard --save-dev
```

threejs-billboard depend on [three.js](https://threejs.org/) and [pixi.js](https://github.com/pixijs/pixi.js).

### Import

threejs-billboard is composed of ES6 modules and TypeScript d.ts files.

At first, import classes.

```js
import {
  BillBoard,
  StageBillBoard,
  StagePlaneMesh,
  ScaleCalculator,
} from "@masatomakino/threejs-billboard";
```

### Show billboard

Add billboard in [THREE.Scene](https://threejs.org/docs/#manual/en/introduction/Creating-a-scene).

```js
const billboard = new BillBoard("./map01.png", 0.1);
scene.add(billboard);
```

### Choosing the Right Class

The library provides different classes for creating billboards and plane meshes, each with distinct characteristics and use cases:

- **Image-based Classes (BillBoard, BillBoardPlane):** Use image files as source. Simple to use for static images.
- **SharedStage Classes (Billboard, PlaneMesh):** Utilize a single shared Canvas/Texture, excelling in reducing draw calls. Suitable for scenarios with a fixed number of billboards where performance is critical.
- **MultiView Classes (Billboard, PlaneMesh):** Each instance has an independent Canvas, offering superior performance for partial updates and flexibility in the number of billboards. Suitable for scenarios with numerous and dynamically changing billboards.

### Dot-by-dot display

If you want to display dot-by-dot billboard, get image scale with ScaleCalculator.

```js
const scale = ScaleCalculator.getNonAttenuateScale(
  renderer.getSize(new THREE.Vector2()).height,
  camera,
);
const billboard = new BillBoard("./map01.png", scale);
billboard.material.sizeAttenuation = false;
```

### Camera Chaser

The `CameraChaser` utility can be used with `SharedStagePlaneMesh`, `MultiViewPixiPlaneMesh`, and `BillBoardPlane` to make the plane track the camera's rotation. By default, this feature is off. You can enable it to make the plane always face the camera, similar to a billboard but maintaining its plane geometry. Note that unlike a Sprite, the rotation is limited to the Y-axis.

## API documents

[API documents](https://masatomakino.github.io/threejs-billboard/api/)

## License

[MIT licensed](LICENSE).
npm package: @masatomakino/threejs-drag-watcher
Description: Mouse drag watcher for three.js
Author: MasatoMakino
Latest version: 0.13.2

# threejs-drag-watcher

> Mouse drag watcher for three.js

[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
[![CI](https://github.com/MasatoMakino/threejs-drag-watcher/actions/workflows/ci_main.yml/badge.svg)](https://github.com/MasatoMakino/threejs-drag-watcher/actions/workflows/ci_main.yml)
[![Maintainability](https://api.codeclimate.com/v1/badges/4e6af8cf2633533bb04d/maintainability)](https://codeclimate.com/github/MasatoMakino/threejs-drag-watcher/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/4e6af8cf2633533bb04d/test_coverage)](https://codeclimate.com/github/MasatoMakino/threejs-drag-watcher/test_coverage)

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=MasatoMakino&repo=threejs-drag-watcher)](https://github.com/MasatoMakino/threejs-drag-watcher)

## Demo

[Demo](https://masatomakino.github.io/threejs-drag-watcher/demo/)

## Install

```shell
npm i @masatomakino/threejs-drag-watcher --save-dev
```

## API 

[API Document](https://masatomakino.github.io/threejs-drag-watcher/api/index.html)

## License

[MIT licensed](LICENSE).
npm package: @masatomakino/threejs-particle-waypoint
Description: Particle waypoint module for three.js
Author: MasatoMakino
Latest version: 0.9.3

# threejs-particle-waypoint

> Particle waypoint module for three.js

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
[![build test](https://github.com/MasatoMakino/threejs-particle-waypoint/actions/workflows/ci_main.yml/badge.svg)](https://github.com/MasatoMakino/threejs-particle-waypoint/actions/workflows/ci_main.yml)
[![Maintainability](https://api.codeclimate.com/v1/badges/b14e7ead3dfae70d1e3f/maintainability)](https://codeclimate.com/github/MasatoMakino/threejs-particle-waypoint/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/b14e7ead3dfae70d1e3f/test_coverage)](https://codeclimate.com/github/MasatoMakino/threejs-particle-waypoint/test_coverage)

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=MasatoMakino&repo=threejs-particle-waypoint&show_owner=true)](https://github.com/MasatoMakino/threejs-particle-waypoint)

## Demo

[Demo Page](https://masatomakino.github.io/threejs-particle-waypoint/demo/)

## API documents

[API documents](https://masatomakino.github.io/threejs-particle-waypoint/api/index.html)

## License

[MIT licensed](LICENSE).
npm package: @masatomakino/threejs-position-util
Description: measuring geometry positions for three.js
Author: MasatoMakino
Latest version: 0.5.1

# threejs-position-util

> measuring geometry positions for three.js

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
[![CI_Main](https://github.com/MasatoMakino/threejs-position-util/actions/workflows/ci_main.yml/badge.svg)](https://github.com/MasatoMakino/threejs-position-util/actions/workflows/ci_main.yml)
[![Maintainability](https://api.codeclimate.com/v1/badges/fec771399093f1315350/maintainability)](https://codeclimate.com/github/MasatoMakino/threejs-position-util/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/fec771399093f1315350/test_coverage)](https://codeclimate.com/github/MasatoMakino/threejs-position-util/test_coverage)

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=MasatoMakino&repo=threejs-position-util&show_owner=true)](https://github.com/MasatoMakino/threejs-position-util)

## Demo

View [Demo Page](https://masatomakino.github.io/threejs-position-util/demo/) and open console.

```
Vector3
x: 960
y: 540
z: 0
```

threejs-position-util output a geometry position on screen.

## Getting Started

### Install

```bash
npm install @masatomakino/threejs-position-util --save-dev
```

### Import

At first, import a class.

```js
import { PositionUtil } from "@masatomakino/threejs-position-util";
```

### Functions

[API documentation](https://masatomakino.github.io/threejs-position-util/api/index.html)

Call static functions in PositionUtil class.

```js
PositionUtil.getGeometryCenterInWorld(mesh);
PositionUtil.getGeometryCenterInLocal(mesh);
PositionUtil.get2DPositionWithMesh(mesh, camera, W, H);
```

Functions return a position as THREE.Vector3.

see also [demo page](https://masatomakino.github.io/threejs-position-util/demo/).

## License

[MIT licensed](LICENSE).
npm package: @masatomakino/threejs-postprocess
Description: Collection of post process module for three.js
Author: MasatoMakino
Latest version: 0.4.0

# threejs-postprocess

> Collection of post process module for three.js

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=MasatoMakino&repo=threejs-postprocess&show_owner=true)](https://github.com/MasatoMakino/threejs-postprocess)

## Demo

[Demo pages](https://masatomakino.github.io/threejs-postprocess/demo/)

## Getting Started

### Install

```bash
npm install https://github.com/MasatoMakino/threejs-postprocess.git --save-dev
```

### Import

threejs-postprocess is composed of ES6 modules and TypeScript d.ts files.

At first, import classes,

```javascript
import {
  PostProcessRenderer,
  ChromaticAberrationShaderPass,
} from "threejs-postprocess";
```

### create `PostProcessRenderer` instance

```javascript
const postProcessRender = new PostProcessRenderer(scene, camera, renderer);
```

### create `Pass` instance

```javascript
const pass = new ChromaticAberrationShaderPass();
```

### add `Pass` array to `PostProcessRenderer`

```javascript
postProcessRender.addComposer([pass]);
```

`addComposer` function create `PostProcessEffectComposer` and add it into effect rendering pass.

### render

```javascript
RAFTicker.on("tick", postProcessRender.render);
```

## API documents

[API documents](https://masatomakino.github.io/threejs-postprocess/api/)

## License

[MIT licensed](LICENSE).
npm package: @masatomakino/threejs-shader-materials
Description: Collection of shader materials for three.js
Author: MasatoMakino
Latest version: 0.10.0

# threejs-shader-materials

> Collection of shader materials for three.js

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=MasatoMakino&repo=threejs-shader-materials)](https://github.com/MasatoMakino/threejs-shader-materials)

## Demo

[![ Demo Page ](https://github.com/MasatoMakino/threejs-shader-materials/raw/main/readme/demo.gif)](https://masatomakino.github.io/threejs-shader-materials/demo/)

[Demo page](https://masatomakino.github.io/threejs-shader-materials/demo/)

## Getting Started

### Install

```bash
npm install @masatomakino/threejs-shader-materials --save-dev
```

### Import

threejs-shader-materials is composed of ES6 modules and TypeScript d.ts files.

At first, import classes,

```js
import { HexGridMaterial } from "threejs-shader-materials";
```

and set material.

```js
const geo = new SphereGeometry(10, 64, 64);
const mat = new HexGridMaterial();
const mesh = new Mesh(geo, mat);
scene.add(mesh);
```

## API documents

[API documents](https://masatomakino.github.io/threejs-shader-materials/api/)

## License

[MIT licensed](LICENSE).
npm package: @masatomakino/threejs-spherical-controls
Description: Spherical camera controller for Three.js
Author: MasatoMakino
Latest version: 0.10.1

# threejs-spherical-controls

> Spherical camera controller for Three.js

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
[![build test](https://github.com/MasatoMakino/threejs-spherical-controls/actions/workflows/ci_main.yml/badge.svg)](https://github.com/MasatoMakino/threejs-spherical-controls/actions/workflows/ci_main.yml)
[![Maintainability](https://api.codeclimate.com/v1/badges/2f9b5a94f146fec74465/maintainability)](https://codeclimate.com/github/MasatoMakino/threejs-spherical-controls/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/2f9b5a94f146fec74465/test_coverage)](https://codeclimate.com/github/MasatoMakino/threejs-spherical-controls/test_coverage)

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=MasatoMakino&repo=threejs-spherical-controls)](https://github.com/MasatoMakino/threejs-spherical-controls)

## Demo

[Demo Page](https://masatomakino.github.io/threejs-spherical-controls/demo/)

## Getting Started

### Install

```bash
npm install @masatomakino/threejs-spherical-controls --save-dev
```

### Import

threejs-spherical-controls is composed of ES6 modules and TypeScript d.ts files.

At first, import classes.

```js
import { SphericalController } from "@masatomakino/threejs-spherical-controls";
```

### Set up controller

```js
const cameraTarget = new Mesh(new SphereGeometry(1));
scene.add(cameraTarget);

const cameraController = new SphericalController(camera, cameraTarget);
cameraController.initCameraPosition(
  new Spherical(radius, 0, 0), // => North Pole
);
cameraController.move(
  new Spherical(radius, Math.PI, 0), // => South Pole
);
```

[API documents](https://masatomakino.github.io/threejs-spherical-controls/api/index.html)

## License

[MIT license](LICENSE)
npm package: @masatomakino/threejs-spherical-rotor
Description: Loop rotation plugin for threejs-spherical-controls.
Author: MasatoMakino
Latest version: 0.11.1

# threejs-spherical-rotor

> Loop rotation plugin for threejs-spherical-controls.

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
[![npm version](https://badge.fury.io/js/@masatomakino%2Fthreejs-spherical-rotor.svg)](https://badge.fury.io/js/@masatomakino%2Fthreejs-spherical-rotor)
[![Maintainability](https://api.codeclimate.com/v1/badges/c4476aea7e111a52ac1d/maintainability)](https://codeclimate.com/github/MasatoMakino/threejs-spherical-rotor/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/c4476aea7e111a52ac1d/test_coverage)](https://codeclimate.com/github/MasatoMakino/threejs-spherical-rotor/test_coverage)

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=MasatoMakino&repo=threejs-spherical-rotor)](https://github.com/MasatoMakino/threejs-spherical-rotor)

## Demo

[Demo Page](https://masatomakino.github.io/threejs-spherical-rotor/demo/)

[API documents](https://masatomakino.github.io/threejs-spherical-rotor/api/index.html)
npm package: @masatomakino/threejs-texture-switching-loader
Description: Texture image loader util for three.js, Switching TextureLoader and ImageBitmapLoader.
Author: MasatoMakino
Latest version: 0.4.0

# threejs-texture-switching-loader

> Texture image loader util for three.js, Switching TextureLoader and ImageBitmapLoader.

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
[![build test](https://github.com/MasatoMakino/threejs-texture-switching-loader/actions/workflows/ci_main.yml/badge.svg)](https://github.com/MasatoMakino/threejs-texture-switching-loader/actions/workflows/ci_main.yml)
[![Test Coverage](https://api.codeclimate.com/v1/badges/1fda6a0f5c2e057085ae/test_coverage)](https://codeclimate.com/github/MasatoMakino/threejs-texture-switching-loader/test_coverage)
[![Maintainability](https://api.codeclimate.com/v1/badges/1fda6a0f5c2e057085ae/maintainability)](https://codeclimate.com/github/MasatoMakino/threejs-texture-switching-loader/maintainability)

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=MasatoMakino&repo=threejs-texture-switching-loader)](https://github.com/MasatoMakino/threejs-texture-switching-loader)

## Demo

[Demo Page](https://masatomakino.github.io/threejs-texture-switching-loader/demo/)

## Getting Started

### Install

threejs-texture-switching-loader depend on [three.js](https://threejs.org/)

```bash
npm install three --save-dev
```

and

```bash
npm install @masatomakino/threejs-texture-switching-loader --save-dev
```

### Import

At first, import classes.

```js
import { TextureSwitchingLoader } from "@masatomakino/threejs-texture-switching-loader";
```

### Load images

```js
const geo = new SphereGeometry(20, 16, 16);
const mat = new MeshBasicMaterial();
const mesh = new Mesh(geo, mat);
scene.add(mesh);

const loader = new TextureSwitchingLoader();
loader.load("./earth.jpg").then((texture) => {
  mat.map = texture;
  mat.needsUpdate = true; // <- on changed map, you must set needsUpdate.
});
```

or

```js
const geo = new SphereGeometry(20, 16, 16);

const loader = new TextureSwitchingLoader();
loader.load("./earth.jpg").then((texture) => {
  const mat = new MeshBasicMaterial({ map: texture });
  const mesh = new Mesh(geo, mat);
  scene.add(mesh);
});
```

Like [ImageBitmapLoader](https://threejs.org/docs/#api/en/loaders/ImageBitmapLoader),　 TextureSwitchingLoader.load() return Promise object.

## API Documents

[API documents](https://masatomakino.github.io/threejs-texture-switching-loader/api/)

## License

[MIT license](LICENSE).
npm package: @masatomakino/tween.js-ticker
Description: Simple update loop module for tweenjs/tween.js.
Author: MasatoMakino
Latest version: 0.8.2

# tween.js-ticker

> [!WARNING]
> We do not recommend new installations of tween.js-ticker and tween.js v25 or later. manage tween instance creation/update manually.

> This module is a simple Tween.js [mainGroup](https://github.com/tweenjs/tween.js/blob/main/src/mainGroup.ts) substitute.

[![MIT License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
[![Test](https://github.com/MasatoMakino/tween.js-ticker/actions/workflows/ci_main.yml/badge.svg)](https://github.com/MasatoMakino/tween.js-ticker/actions/workflows/ci_main.yml)
[![Maintainability](https://api.codeclimate.com/v1/badges/626029403952adbad62d/maintainability)](https://codeclimate.com/github/MasatoMakino/tween.js-ticker/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/626029403952adbad62d/test_coverage)](https://codeclimate.com/github/MasatoMakino/tween.js-ticker/test_coverage)

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=MasatoMakino&repo=tween.js-ticker)](https://github.com/MasatoMakino/tween.js-ticker)

## Demo

[Demo page](https://masatomakino.github.io/tween.js-ticker/demo)

## Getting Started

### Install

```bash
npm install @masatomakino/tween.js-ticker -D
```

### How to use

```js
import { TWEENTicker } from "@masatomakino/tween.js-ticker";

const tween = new Tween({ x: 0 })
  .to({ x: 100 }, 1000)
  .start();

TWEENTicker.group.add(tween); // start updating

tween.remove(); // if you want to stop updating, call remove method.
```

Just import it, tween.js-ticker will start automatically.

In Tween.js v25 and later, completed tween instances are not automatically removed from a group. To remove a tween instance, you must manually call the remove function.

[API documentation](https://masatomakino.github.io/tween.js-ticker/api)

## License

[MIT licensed](LICENSE).
npm package: @masatomiyoshi/accordion
Description: A javascript library for accordion component
Author: Masato Miyoshi
Latest version: 1.0.4

# accordion

A javascript library for accordion component.

## Dependencies

- animejs

## Installation

Install from npm:

    $ npm install @masatomiyoshi/accordion --save

## Usage

Import function:

```javascript
import { slideUp, slideDown, slideToggle } from '@masatomiyoshi/accordion'
```

Import css:
```css
@use '@masatomiyoshi/accordion'
```

Build html as follows:

```html
<div class="slide-up__link"><a href="#">Slide up</a></div>
<div class="slide-down__link"><a href="#">Slide down</a></div>
<div class="slide-toggle__link"><a href="#">Slide toggle</a></div>
<div class="slide__item accordion--visible">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>
```

Build events:

```javascript
document.querySelector('.slide-up__link').addEventListener('click', () => {
  slideUp(document.querySelector('.slide__item'));
});
document.querySelector('.slide-down__link').addEventListener('click', () => {
  slideDown(document.querySelector('.slide__item'));
});
document.querySelector('.slide-toggle__link').addEventListener('click', () => {
  slideToggle(document.querySelector('.slide__item'));
});
```

## License

The library is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
npm package: @masatomiyoshi/fade
Description: A javascript library for fade component
Author: Masato Miyoshi
Latest version: 1.0.2

# fade

A javascript library for fade component.

## Dependencies

- animejs

## Installation

Install from npm:

    $ npm install @masatomiyoshi/fade --save

## Usage

Import function:

```javascript
import { fadeIn, fadeOut } from '@masatomiyoshi/fade'
```

Build html as follows:

```html
<div class="fade-in__link"><a href="#">Fade in</a></div>
<div class="fade-out__link"><a href="#">Fade out</a></div>
<div class="content">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>
```

Build events:

```javascript
document.querySelector('.fade-in__link').addEventListener('click', () => {
  fadeIn(document.querySelector('.content'));
});
document.querySelector('.fade-out__link').addEventListener('click', () => {
  fadeOut(document.querySelector('.content'));
});
```

## License

The library is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
npm package: @masatomiyoshi/img-popup
Description: A javascript library used to show pop-up image
Author: Masato Miyoshi
Latest version: 1.0.6

# ImgPopup

A javascript library used to pop-up images.

## Dependencies

- animejs
- @masatomiyoshi/fade

## Installation

Install from npm:

    $ npm install @masatomiyoshi/img-popup --save

## Usage

Import class:

```javascript
import ImgPopup from '@masatomiyoshi/img-popup'
```

Import css:
```css
@use '@masatomiyoshi/img-popup'
```

Build html as follows.
In case of \<a\> tags, image urls is set to data-image attributes.
In case of \<img\> tags, image urls is set to src attributes.
Image file extension must be gif, jpg, jpeg, png, bmp.

```html
<div>
  <ul>
    <li>
      <a href="/examples/images/sample.jpg" data-image="/examples/images/sample.jpg">
        <img src="/examples/images/sample.jpg" alt="JPEG image">
      </a>
    </li>
    <li>
      <img src="/examples/images/sample.jpg" alt="JPEG image">
    </li>
  </ul>
</div>
```

Build events to pop-up images:

```javascript
let imgPopup = new ImgPopup();
imgPopup.init();
let anchors = document.querySelectorAll('ul li a');
imgPopup.run(anchors);
let imgs = document.querySelectorAll('ul li img');
imgPopup.run(imgs);
```

## License

The library is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
npm package: @masatomiyoshi/img-preview
Description: A javascript library used to enlarge image
Author: Masato Miyoshi
Latest version: 1.0.5

# ImgPreview

A javascript library used to enlarge images.

## Dependencies

- animejs

## Installation

Install from npm:

    $ npm install @masatomiyoshi/img-preview --save

## Usage

Import class:

```javascript
import ImgPreview from '@masatomiyoshi/img-preview'
```

Import css:
```css
@use '@masatomiyoshi/img-preview'
```

Build html as follows.
In case of \<a\> tags, image urls is set to data-image attributes.
In case of \<img\> tags, image urls is set to src attributes.
Image file extension must be gif, jpg, jpeg, png, bmp.

```html
<div>
  <ul>
    <li>
      <a href="/examples/images/sample.jpg" data-image="/examples/images/sample.jpg">
        <img src="/examples/images/sample.jpg" alt="JPEG image">
      </a>
    </li>
    <li>
      <img src="/examples/images/sample.jpg" alt="JPEG image">
    </li>
  </ul>
</div>
```

Build events to enlarge images:

```javascript
let imgPreview = new ImgPreview();
imgPreview.init();
let anchors = document.querySelectorAll('ul li a');
imgPreview.run(anchors);
let imgs = document.querySelectorAll('ul li img');
imgPreview.run(imgs);
```

## License

The library is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).