three-addons

    1.2.0 • Public • Published

    Three Addons

    Latest NPM release

    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.

    Install

    npm i three-addons

    DownloadsWeekly Downloads

    136

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    670 kB

    Total Files

    8

    Last publish

    Collaborators

    • marcofugaro