Three Addons

A collection of Three.js addons.

Installation

npm install --save three-addons

or

yarn add three-addons

Usage

import { Scene, PerspectiveCamera, WebGLRenderer } from 'three';
import { OBJLoader } from 'three-addons';

const scene = new Scene();
// ...
const loader = new OBJLoader();
loader.load('obj/someObj.obj', (object) => {
  object.position.y = -95;
  scene.add(object);
});

Or if your bundler has Tree Shaking, you can just import everything:

import * as THREE from 'three';
import * as THREE_ADDONS from 'three-addons';

const scene = new THREE.Scene();
// ...
const loader = new THREE_ADDONS.OBJLoader();
loader.load('obj/someObj.obj', (object) => {
  object.position.y = -95;
  scene.add(object);
});

If you don't have a module bundler you can just drop it in the HTML after Three.js and you will be able to use it like this:

<script src="js/three.min.js"></script>
<script src="js/three-addons.min.js"></script>


<script>
  const scene = new THREE.Scene();
  // ...
  const loader = new THREE_ADDONS.OBJLoader();
  loader.load('obj/someObj.obj', (object) => {
    object.position.y = -95;
    scene.add(object);
  });
</script>

Instead, if you want to mindlessly paste the examples of Three.js and its addons you find online, you can just do this:

import * as THREEJS from 'three';
import * as THREE_ADDONS from 'three-addons';
const THREE = { ...THREEJS, ...THREE_ADDONS }; // you can also use Object.assign() or lodash's _.assign()


const scene = new THREE.Scene();
// ...
const loader = new THREE.OBJLoader();
loader.load('obj/someObj.obj', (object) => {
  object.position.y = -95;
  scene.add(object);
});

But this pattern is not recommended, since it doesn't tell you which property belongs to Three.js and which one is an addon.

Addon structure

All the addons are taken from most used examples around the web, and wrapped with those two lines to make it exportable:

import * as THREE from 'three';

// ...addon code

export default THREE.AddonName;

Thanks to npm-three-js for the inspiration of this project and the full list of addons.

Here is the list of the addons present in this package:

AdaptiveToneMappingPass, BasicShader, BleachBypassShader, BlendShader, BloomPass, BokehPass, BokehShader, BokehShader2, BrightnessContrastShader, ~~CanvasRenderer~~, ColorCorrectionShader, ColorifyShader, ConvolutionShader, CopyShader, DDSLoader, DOFMipMapShader, DigitalGlitch, DotScreenPass, DotScreenShader, EdgeShader, EdgeShader2, EffectComposer, FXAAShader, FilmPass, FilmShader, FocusShader, FresnelShader, GammaCorrectionShader, GlitchPass, HorizontalBlurShader, HorizontalTiltShiftShader, HueSaturationShader, KaleidoShader, LuminosityShader, MTLLoader, MarchingCubes, MaskPass, MirrorShader, NormalMapShader, OBJLoader, OceanShaders, OrbitControls, ParallaxShader, ~~Projector~~, RGBShiftShader, RenderPass, SSAOShader, SVGLoader, SavePass, SepiaShader, ShaderPass, ShaderToon, TechnicolorShader, TexturePass, ToneMapShader, TriangleBlurShader, UnpackDepthRGBAShader, VerticalBlurShader, VerticalTiltShiftShader, VignetteShader, SobelOperatorShader.

NOTE: both CanvasRenderer and Projector are not available for now because the go in conflict with their respective deprecated warning exported from the main Three.js repo. Here is the source of that code.