The core of three.js is focused on the most important components of a 3D engine. Many other components like loaders or controls are part of the
The core of three.js is focused on the most important components of a 3D engine. Many other components like loaders or controls are part of the
examples directory. three.js ensures that these files are kept in sync with the core but users have to import them separately if they are required
examples directory. three.js ensures that these files are kept in sync with the core but users have to import them separately if they are required
for their project. However, not all files are modules which makes their usage in certain cases inconvenient. In order to address this issue,
for a project. You can find in the [link:https://github.com/mrdoob/three.js/tree/master/examples/jsm examples/jsm] directory an ES6
we are working to provide all the examples as modules in the [link:https://github.com/mrdoob/three.js/tree/master/examples/jsm examples/jsm] directory.
module version for almost all example files. If you install three.js via npm, you can import them like so:
If you install three.js via npm, you can import them like so:
</p>
</p>
<code>
<code>
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
</code>
</code>
<p>
The following examples files are already available as modules:
<ul>
<li>animation
<ul>
<li>AnimationClipCreator</li>
<li>CCDIKSolver</li>
<li>MMDAnimationHelper</li>
<li>MMDPhysics</li>
<li>TimelinerController</li>
</ul>
</li>
<li>cameras
<ul>
<li>CinematicCamera</li>
</ul>
</li>
<li>controls
<ul>
<li>DeviceOrientationControls</li>
<li>DragControls</li>
<li>EditorControls</li>
<li>FirstPersonControls</li>
<li>FlyControls</li>
<li>MapControls</li>
<li>OrbitControls</li>
<li>OrthographicTrackballControls</li>
<li>PointerLockControls</li>
<li>TrackballControls</li>
<li>TransformControls</li>
</ul>
</li>
<li>curves
<ul>
<li>CurveExtras</li>
<li>NURBSCurve</li>
<li>NURBSSurface</li>
<li>NURBSUtils</li>
</ul>
</li>
<li>effects
<ul>
<li>AnaglyphEffect</li>
<li>AsciiEffect</li>
<li>OutlineEffect</li>
<li>ParallaxBarrierEffect</li>
<li>PeppersGhostEffect</li>
<li>StereoEffect</li>
</ul>
</li>
<li>exporters
<ul>
<li>ColladaExporter</li>
<li>DRACOExporter</li>
<li>GLTFExporter</li>
<li>MMDExporter</li>
<li>OBJExporter</li>
<li>PLYExporter</li>
<li>STLExporter</li>
<li>TypedGeometryExporter</li>
</ul>
</li>
<li>geometries
<ul>
<li>BoxLineGeometry</li>
<li>ConvexGeometry</li>
<li>DecalGeometry</li>
<li>ParametricGeometries</li>
<li>TeapotBufferGeometry</li>
</ul>
</li>
<li>interactive
<ul>
<li>SelectionBox</li>
<li>SelectionHelper</li>
</ul>
</li>
<li>lights
<ul>
<li>LightProbeGenerator</li>
<li>RectAreaLightUniformsLib</li>
</ul>
</li>
<li>lines
<ul>
<li>Line2</li>
<li>LineGeometry</li>
<li>LineMaterial</li>
<li>LineSegments2</li>
<li>LineSegmentsGeometry</li>
<li>Wireframe</li>
<li>WireframeGeometry2</li>
</ul>
</li>
<li>loaders
<ul>
<li>ctm
<ul>
<li>CTMLoader</li>
</ul>
</li>
<li>deprecated
<ul>
<li>LegacyGLTFLoader</li>
<li>LegacyJSONLoader</li>
</ul>
</li>
<li>3MFLoader</li>
<li>AMFLoader</li>
<li>AWDLoader</li>
<li>AssimpJSONLoader</li>
<li>AssimpLoader</li>
<li>BabylonLoader</li>
<li>BasisTextureLoader</li>
<li>BVHLoader</li>
<li>ColladaLoader</li>
<li>DDSLoader</li>
<li>DRACOLoader</li>
<li>EXRLoader</li>
<li>EquirectangularToCubeGenerator</li>
<li>FBXLoader</li>
<li>GCodeLoader</li>
<li>GLTFLoader</li>
<li>HDRCubeTextureLoader</li>
<li>KMZLoader</li>
<li>KTXLoader</li>
<li>LWOLoader</li>
<li>MD2Loader</li>
<li>MMDLoader</li>
<li>MTLLoader</li>
<li>NRRDLoader</li>
<li>OBJLoader</li>
<li>PCDLoader</li>
<li>PDBLoader</li>
<li>PlayCanvasLoader</li>
<li>PLYLoader</li>
<li>PRWMLoader</li>
<li>PVRLoader</li>
<li>RGBELoader</li>
<li>STLLoader</li>
<li>SVGLoader</li>
<li>TDSLoader</li>
<li>TGALoader</li>
<li>TTFLoader</li>
<li>VRMLLoader</li>
<li>VRMLoader</li>
<li>VTKLoader</li>
<li>XLoader</li>
</ul>
</li>
<li>math
<ul>
<li>ColorConverter</li>
<li>ConvexHull</li>
<li>ImprovedNoise</li>
<li>Lut</li>
<li>SimplexNoise</li>
</ul>
</li>
<li>misc
<ul>
<li>CarControls</li>
<li>ConvexObjectBreaker</li>
<li>GPUComputationRenderer</li>
<li>Gyroscope</li>
<li>MD2Character</li>
<li>MD2CharacterComplex</li>
<li>MorphAnimMesh</li>
<li>MorphBlendMesh</li>
<li>Ocean</li>
<li>RollerCoaster</li>
<li>Volume</li>
<li>VolumeSlice</li>
</ul>
</li>
<li>modifiers
<ul>
<li>ExplodeModifier</li>
<li>SimplifyModifier</li>
<li>SubdivisionModifier</li>
<li>TessellateModifier</li>
</ul>
</li>
<li>objects
<ul>
<li>Fire</li>
<li>Lensflare</li>
<li>Reflector</li>
<li>Refractor</li>
<li>ReflectorRTT</li>
<li>ShadowMesh</li>
<li>Sky</li>
<li>Water</li>
<li>Water2</li>
</ul>
</li>
<li>pmrem
<ul>
<li>PMREMCubeUVPacker</li>
<li>PMREMGenerator</li>
</ul>
</li>
<li>postprocessing
<ul>
<li>AdaptiveToneMappingPass</li>
<li>AfterimagePass</li>
<li>BloomPass</li>
<li>BokehPass</li>
<li>ClearPass</li>
<li>CubeTexturePass</li>
<li>DotScreenPass</li>
<li>EffectComposer</li>
<li>FilmPass</li>
<li>GlitchPass</li>
<li>HalftonePass</li>
<li>MaskPass</li>
<li>OutlinePass</li>
<li>RenderPass</li>
<li>SAOPass</li>
<li>SavePass</li>
<li>ShaderPass</li>
<li>SMAAPass</li>
<li>SSAARenderPass</li>
<li>SSAOPass</li>
<li>TAARenderPass</li>
<li>TexturePass</li>
<li>UnrealBloomPass</li>
</ul>
</li>
<li>renderers
<ul>
<li>CSS2DRenderer</li>
<li>CSS3DRenderer</li>
<li>Projector</li>
<li>SoftwareRenderer</li>
<li>SVGRenderer</li>
<li>RaytracingRenderer</li>
<li>WebGLDeferredRenderer</li>
</ul>
</li>
<li>shaders
<ul>
<li>AfterimageShader</li>
<li>BasicShader</li>
<li>BleachBypassShader</li>
<li>BlendShader</li>
<li>BokehShader</li>
<li>BokehShader2</li>
<li>BrightnessContrastShader</li>
<li>ColorCorrectionShader</li>
<li>ColorifyShader</li>
<li>ConvolutionShader</li>
<li>CopyShader</li>
<li>DepthLimitedBlurShader</li>
<li>DigitalGlitch</li>
<li>DOFMipMapShader</li>
<li>DotScreenShader</li>
<li>FilmShader</li>
<li>FocusShader</li>
<li>FreiChenShader</li>
<li>FresnelShader</li>
<li>FXAAShader</li>
<li>GammaCorrectionShader</li>
<li>GodRaysShader</li>
<li>HalftoneShader</li>
<li>HorizontalBlurShader</li>
<li>HorizontalTiltShiftShader</li>
<li>HueSaturationShader</li>
<li>KaleidoShader</li>
<li>LuminosityHighPassShader</li>
<li>LuminosityShader</li>
<li>MirrorShader</li>
<li>NormalMapShader</li>
<li>OceanShaders</li>
<li>ParallaxShader</li>
<li>PixelShader</li>
<li>RGBShiftShader</li>
<li>SAOShader</li>
<li>SepiaShader</li>
<li>SkinShader</li>
<li>SMAAShader</li>
<li>SobelOperatorShader</li>
<li>SSAOShader</li>
<li>TechnicolorShader</li>
<li>TerrainShader</li>
<li>ToneMapShader</li>
<li>ToonShader</li>
<li>TranslucentShader</li>
<li>TriangleBlurShader</li>
<li>UnpackDepthRGBAShader</li>
<li>VerticalBlurShader</li>
<li>VerticalTiltShiftShader</li>
<li>VignetteShader</li>
<li>VolumeShader</li>
<li>WaterRefractionShader</li>
</ul>
</li>
<li>utils
<ul>
<li>BufferGeometryUtils</li>
<li>GeometryUtils</li>
<li>MathUtils</li>
<li>SceneUtils</li>
<li>ShadowMapViewer</li>
<li>SkeletonUtils</li>
<li>TypedArrayUtils</li>
<li>UVsDebug</li>
</ul>
</li>
<li>vr
<ul>
<li>deprecated
<ul>
<li>DaydreamController</li>
<li>GearVRController</li>
</ul>
</li>
<li>PaintViveController</li>
<li>ViveController</li>
</ul>
</li>
</ul>
</p>
<p>
<p>
Note: When using code from the examples directory, it's important that all files match the version of
Note: When using code from the examples directory, it's important that all files match the version of
your three.js main file. For example, it's not acceptable to use *GLTFLoader* and *OrbitControls* from R96 together
your three.js main file. For example, it's not acceptable to use *GLTFLoader* and *OrbitControls* from R96 together
with three.js R103. You can easily keep your files in sync by using the modules from the JSM directory. If the file
with three.js R103.
is not available as a module, you can still use third-party npm packages or convert the file to a module by yourself.
In both cases, ensure the code is compatible with your three.js main file.
