javascript
/
three.js
peilaus alkaen https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<base href="../../../" />
		<script src="list.js"></script>
		<script src="page.js"></script>
		<link type="text/css" rel="stylesheet" href="page.css" />
	</head>
	<body>
		<h1>[name]</h1><br />

		<p>
			While importing three.js via script tags is a great way to get up and running fast, it has a few drawbacks for longer lived projects, for example:
			<ul>
				<li>You have to manually fetch and include a copy of the library as part of your project's source code</li>
				<li>Updating the library's version is a manual process</li>
				<li>When checking in a new version of the library your version control diffs are cluttered by the many lines of the build file</li>
			</ul>
		</p>

		<p>Using a dependency manager like npm avoids these caveats by allowing you to simply download and import your desired version of the library onto your machine.</p>

		<h2>Installation via npm</h2>

		<p>Three.js is published as an npm module, see: [link:https://www.npmjs.com/package/three npm]. This means all you need to do to include three.js into your project is run "npm install three"</p>

		<h2>Importing the module</h2>

		<p>Assuming that you're bundling your files with a tool such as [link:https://webpack.github.io/ Webpack] or [link:https://github.com/substack/node-browserify Browserify], which allow you to "require('modules')" in the browser by bundling up all of your dependencies.</p>

		<p>
			You should now be able to import the module into your source files and continue to use it as per normal.
		</p>

		<code>
		var THREE = require('three');

		var scene = new THREE.Scene();
		...
		</code>

		<p>
			You're also able to leverage [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import ES6 import syntax]:
		</p>

		<code>
		import * as THREE from 'three';

		const scene = new THREE.Scene();
		...
		</code>

		<p>
			or if you wish to import only select parts of three.js library, for example Scene:
		</p>

		<code>
		import { Scene } from 'three';

		const scene = new Scene();
		...
		</code>

		<h2>Importable Examples</h2>
		<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:
		</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>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>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>3MFLoader</li>
						<li>AMFLoader</li>
						<li>AWDLoader</li>
						<li>AssimpJSONLoader</li>
						<li>AssimpLoader</li>
						<li>BabylonLoader</li>
						<li>BVHLoader</li>
						<li>ColladaLoader</li>
						<li>DDSLoader</li>
						<li>DRACOLoader</li>
						<li>EXRLoader</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>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>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>
			</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.
		</p>
	</body>
</html>