texture-generator

Procedural Equirectangular Textures

Tutorial

Contents

• Introduction
• Using a predefined generator
• Setting generator properties
• Generating multiple textures
• Using multiple generators
• Deferred texture generator

Introduction

This is a short tutorial of how to use the predefined equirectangular generators (pet-gens) in your JS code.

The tutorial is for loading the generators via a CDN. This is to make it easy to use them without installing anything additional.

An importmap is used to define the locations of both Three.js and the generators. All pet-gens rely on Three.js and they access it via the keyword three. The importmap when using Three.js r164 and Pet-gen v1.7.0 looks like this:

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.164.0/build/three.module.js",
    "pet/": "https://cdn.jsdelivr.net/npm/pet-gen@1.7.0/src/"
  }
}
</script>

Note: Users with node.js and installed packages need no importmaps.

Once the importmap is defined, Three.js and the generator must be imported. If the generator for isolines is used, the imports are:

import * as THREE from "three";
import * as PET from "pet/patterns/isolines.js";

Other names of generators are in the list of generators.

Using a predefined generator

The easiest way to use a generator is to rely on its default values. The following fragment shows how to assign the generator to a texture in object material:

var map = PET.texture( );

var model = new THREE.Mesh(
    new THREE.SphereGeometry( 1 ),
    new THREE.MeshBasicMaterial( { map: map } )
);

PET.material( model );

PET.texture generates the texture, and PET.material is optional – it may improve the texture appearance in some cases (more details.

Here is a complete example of using the Isolines generator with its default values. The example uses OrbitControls to rotate the a sphere with isolines texture on it:

Tutorial Example 1

Setting generator properties

TO DO.

Generating multiple textures

TO DO.

Using multiple generators

TO DO.

Deferred texture generator

TO DO.

Back

This site is open source. Improve this page.