NOUV

Sometimes, you just want to make a 3d model, a crazy 3d model and not spend 4 hours marking seams just to texture it.

Especially huge complex models for scenes.

I created NOUV! It's Blender-style box projected PBR textures for Three.js.

NOUV patches MeshStandardMaterial or MeshPhysicalMaterial so common texture slots are sampled with triplanar/box projection. It is meant for quick reusable material workflows where a mesh should receive tileable 2D textures directly in object or world space.

Install

npm install three-nouv three

Quick Start

import { TextureLoader } from 'three';
import { createNouvStandardMaterial } from 'three-nouv';

const loader = new TextureLoader();

const material = createNouvStandardMaterial({
  color: '#ffffff',
  roughness: 0.85,
  metalness: 0,
  map: loader.load('/wood/basecolor.jpg'),
  normalMap: loader.load('/wood/normal.jpg'),
  roughnessMap: loader.load('/wood/roughness.jpg'),
  scale: [2, 2, 1],
  blend: 0.45
});

mesh.material = material;

Controls

material.nouv.setScale([3, 1, 2]);
material.nouv.setBlend(0.7);
material.nouv.objectSpace = false;
material.nouv.setTexture('map', anotherTexture);

scale is per axis and controls how many texture repeats are projected through each object/world axis. A number applies uniformly, and an array or Vector3 applies x, y, and z separately.

blend is normalized from 0 to 1. Lower values create harder transitions between projection faces; higher values soften the blend.

objectSpace defaults to true, which keeps texture placement attached to the mesh. Set it to false for world-space projection across multiple meshes.

Supported Texture Slots

• map
• normalMap
• roughnessMap
• metalnessMap
• bumpMap
• aoMap
• emissiveMap
• alphaMap

All supplied textures are set to RepeatWrapping automatically.

Patching Existing Materials

import { MeshPhysicalMaterial } from 'three';
import { applyNouvBoxProjection } from 'three-nouv';

const material = applyNouvBoxProjection(new MeshPhysicalMaterial({
  clearcoat: 0.5,
  roughness: 0.4
}), {
  map,
  normalMap,
  scale: 1.5,
  blend: 0.35
});

Development

npm install
npm run build
npm run dev

The default example uses generated canvas textures, so it runs without external assets.

There is also a local RedRock PBR example at /redrock.html. The texture pack is bundled in the repo under public/textures/redrock, and the height texture is used as a NOUV-projected bumpMap.

Thanks goes out to CG Bookcase for this example texture, available here:

https://www.cgbookcase.com/textures/red-rock-05

npm run dev -- --host 127.0.0.1 --port 5181

Then open http://127.0.0.1:5181/redrock.html.