javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
							<!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>
		<div>
			<p>All objects by default automatically update their matrices if the have been added to the scene with</p>
			<code>
var object = new THREE.Object3D;
scene.add( object );
			</code>
			or if they are the child of another object that has been added to the scene:
			<code>
var object1 = new THREE.Object3D;
var object2 = new THREE.Object3D;

object1.add( object2 );
scene.add( object1 ); //object1 and object2 will automatically update their matrices
			</code>
		</div>

		<p>However, if you know object will be static, you can disable this and update the transform matrix manually just when needed.</p>

		<code>
object.matrixAutoUpdate  = false;
object.updateMatrix();
		</code>

		<h2>Geometries</h2>
		<div>
			<p>
				You can only update the content of buffers, you cannot resize buffers (this is very costly,
				basically equivalent to creating new geometry).
			</p>

			<p>
				You can emulate resizing by pre-allocating a larger buffer and then keeping unneeded vertices
				collapsed / hidden.
			</p>

			<p>
				The following flag control updating of various geometry attributes. Set flags only
				for attributes that you need to update, updates are costly. Once buffers
				change, these flags reset automatically back to false. You need to keep setting them to
				true if you wanna keep updating buffers. Note that this applies only to [page:Geometry]
				and not to [page:BufferGeometry].
			</p>
			<code>
var geometry = new THREE.Geometry();
geometry.verticesNeedUpdate = true;
geometry.elementsNeedUpdate = true;
geometry.morphTargetsNeedUpdate = true;
geometry.uvsNeedUpdate = true;
geometry.normalsNeedUpdate = true;
geometry.colorsNeedUpdate = true;
geometry.tangentsNeedUpdate = true;
			</code>

			<p>
				In versions prior to [link:https://github.com/mrdoob/three.js/releases/tag/r66 r66] meshes
				additionally need the <em>dynamic</em> flag enabled (to keep internal typed arrays):
			</p>

			<code>
	//removed after r66
	geometry.dynamic = true;
			</code>

			<h3>Examples:</h3>
				[example:webgl_geometry_dynamic WebGL / geometry / dynamic]<br />
				[example:webgl_custom_attributes WebGL / custom / attributes]<br />
				[example:webgl_custom_attributes_particles WebGL / custom / attributes / particles]
		</div>


		<h2>Materials</h2>
		<div>
			<p>All uniforms values can be changed freely (e.g. colors, textures, opacity, etc), values are sent to the shader every frame.</p>

			<p>Also GLstate related parameters can change any time (depthTest, blending, polygonOffset, etc).</p>

			<p>Flat / smooth shading is baked into normals. You need to reset normals buffer (see above).</p>

			<p>The following properties can't be easily changed at runtime (once the material is rendered at least once):</p>
			<ul>
				<li>numbers and types of uniforms</li>
				<li>numbers and types of lights</li>
				<li>presence or not of
					<ul>
						<li>texture</li>
						<li>fog</li>
						<li>vertex colors</li>
						<li>skinning</li>
						<li>morphing</li>
						<li>shadow map</li>
						<li>alpha test</li>
					</ul>
				</li>
			</ul>

			<p>Changes in these require building of new shader program. You'll need to set</p>
			<code>material.needsUpdate = true</code>

			<p>Bear in mind this might be quite slow and induce jerkiness in framerate (especially on Windows, as shader compilation is slower in DirectX than OpenGL).</p>

			<p>For smoother experience you can emulate changes in these features to some degree by having "dummy" values like zero intensity lights, white textures, or zero density fog.</p>

			<p>You can freely change the material used for geometry chunks, however you cannot change how an object is divided into chunks (according to face materials). </p>

			<h3>If you need to have different configurations of materials during runtime:</h3>
			<p>If the number of materials / chunks is small, you could pre-divide the object beforehand (e.g. hair / face / body / upper clothes / trousers for a human, front / sides / top / glass / tire / interior for a car). </p>

			<p>If the number is large (e.g. each face could be potentially different), consider a different solution, such as using attributes / textures to drive different per-face look.</p>

			<h3>Examples:</h3>
			[example:webgl_materials_cars WebGL / materials / cars]<br />
			[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
		</div>


		<h2>Textures</h2>
		<div>
			<p>Image, canvas, video and data textures need to have the following flag set if they are changed:</p>
			<code>
				texture.needsUpdate = true;
			</code>
			<p>Render targets update automatically.</p>

			<h3>Examples:</h3>
			[example:webgl_materials_video WebGL / materials / video]<br />
			[example:webgl_rtt WebGL / rtt]

		</div>


		<h2>Cameras</h2>
		<div>
			<p>A camera's position and target is updated automatically. If you need to change</p>
			<ul>
				<li>
					fov
				</li>
				<li>
					aspect
				</li>
				<li>
					near
				</li>
				<li>
					far
				</li>
			</ul>
			<p>
				then you'll need to recompute the projection matrix:
			</p>
			<code>
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
			</code>
		</div>
	</body>
</html>