|
@@ -66,342 +66,16 @@
|
|
|
<p>
|
|
|
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
|
|
|
- for their project. However, not all files are modules which makes their usage in certain cases inconvenient. In order to address this issue,
|
|
|
- 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.
|
|
|
- If you install three.js via npm, you can import them like so:
|
|
|
+ for a project. You can find in the [link:https://github.com/mrdoob/three.js/tree/master/examples/jsm examples/jsm] directory an ES6
|
|
|
+ module version for almost all example files. If you install three.js via npm, you can import them like so:
|
|
|
</p>
|
|
|
<code>
|
|
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
|
|
|
</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>
|
|
|
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
|
|
|
- with three.js R103. You can easily keep your files in sync by using the modules from the JSM directory. If the file
|
|
|
- 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.
|
|
|
+ with three.js R103.
|
|
|
</p>
|
|
|
</body>
|
|
|
</html>
|