# babylon-node-material-loader

> Webpack loader for node material files created with the [node-material-editor](https://nodematerial-editor.babylonjs.com/).

Latest version **1.0.1** (published 2021-10-24) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install babylon-node-material-loader
pnpm add babylon-node-material-loader
yarn add babylon-node-material-loader
bun add babylon-node-material-loader
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-10-24 |
| First published | 2021-10-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 55.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Florian Stellbrink |
| Maintainers | flostellbrink |

## Links

- npm: https://www.npmjs.com/package/babylon-node-material-loader
- Repository: https://github.com/flostellbrink/babylon-node-material-loader
- Homepage: https://github.com/flostellbrink/babylon-node-material-loader#readme
- Issues: https://github.com/flostellbrink/babylon-node-material-loader/issues
- npm.io page: https://npm.io/package/babylon-node-material-loader

## Recent versions

- 1.0.1 (latest) — 2021-10-24
- 1.0.0 — 2021-10-17
- 0.1.0 — 2021-10-17

## README

# Babylon Node-Material Loader

Webpack loader for node material files created with the [node-material-editor](https://nodematerial-editor.babylonjs.com/).

`npm install --save-dev babylon-node-material-loader`

## Usage

Just create a new material for your current scene. Then load all the material properties by calling the exported function on you material.

```js
import applyMaterial from './test.bnm';

const testMaterial = new NodeMaterial('test', myScene);
applyMaterial(testMaterial);
```

This is especially nice for [react-babylonjs](https://github.com/brianzinn/react-babylonjs) where you can just load the material in a `ref` like this:

```js
import applyMaterial from './test.bnm';

export default function Test() {
  return (
    <plane name="plane">
      <nodeMaterial name="test" ref={applyMaterial} />
    </plane>
  );
}
```

## Webpack Config

I found it easiest to give the material json files a custom file type. I chose `bnm` for babylon-node-material, but it can be anything you want.

In your `webpack.config.js` add this:

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.bnm$/i,
        use: ['babylon-node-material-loader'],
      },
    ],
  },
};
```

## Typescript Config

If you are using typescript this declaration tells the compiler what the loaded result looks like:

```js
declare module "*.bnm" {
  import { NodeMaterial } from "@babylonjs/core";

  const apply: (material: NodeMaterial) => void;

  export default apply;
}
```

---
_Source: https://npm.io/package/babylon-node-material-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._