|
@@ -12,85 +12,101 @@
|
|
|
|
|
|
<h1>[name]</h1>
|
|
<h1>[name]</h1>
|
|
|
|
|
|
- <div class="desc">Level of Detail - Show meshes with more or less geometry based on distance.</div>
|
|
|
|
|
|
+ <div class="desc">
|
|
|
|
+ Level of Detail - show meshes with more or less geometry based on distance from the camera.<br /><br />
|
|
|
|
+
|
|
|
|
+ Every level is associated with an object, and rendering switches automatically between them at the distances
|
|
|
|
+ specified. Typically you would create, say, three meshes, one for far away (low detail), one for mid range (medium detail)
|
|
|
|
+ and one for close up (high detail).
|
|
|
|
+ </div>
|
|
|
|
|
|
<h2>Example</h2>
|
|
<h2>Example</h2>
|
|
|
|
|
|
<div>
|
|
<div>
|
|
- [example:webgl_lod LOD]
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
<code>
|
|
<code>
|
|
- var lod = new THREE.LOD();
|
|
|
|
|
|
+var lod = new THREE.LOD();
|
|
|
|
|
|
- //Create 5 levels of spheres
|
|
|
|
- for( var i = 0; i < 5; i++ ) {
|
|
|
|
|
|
+//Create spheres with 3 levels of detail and create new LOD levels for them
|
|
|
|
+for( var i = 0; i < 3; i++ ) {
|
|
|
|
|
|
- var geometry = new THREE.IcosahedronGeometry( 10, 5 - i )
|
|
|
|
|
|
+ var geometry = new THREE.IcosahedronBufferGeometry( 10, 3 - i )
|
|
|
|
|
|
- new THREE.Mesh( geometry, material );
|
|
|
|
|
|
+ new THREE.Mesh( geometry, material );
|
|
|
|
|
|
- lod.addLevel( mesh, i * 50 );
|
|
|
|
|
|
+ lod.addLevel( mesh, i * 75 );
|
|
|
|
|
|
- }
|
|
|
|
- </code>
|
|
|
|
|
|
+}
|
|
|
|
|
|
- <h2>Constructor</h2>
|
|
|
|
|
|
+scene.add( lod );
|
|
|
|
+ </code>
|
|
|
|
+ Note that for the LOD to switch between the different detail levels, you will
|
|
|
|
+ have to call [page:.update update]( camera ) in your render loop. See the source code
|
|
|
|
+ for this example for details:
|
|
|
|
+ [example:webgl_lod WebGL / LOD]
|
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
|
- <h3>[name]()</h3>
|
|
|
|
|
|
+ <h2>Constructor</h2>
|
|
|
|
+ <h3>[name]( )</h3>
|
|
|
|
+ <div>
|
|
|
|
+ Creates a new [name].
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
|
<h2>Properties</h2>
|
|
<h2>Properties</h2>
|
|
<div>See the base [page:Object3D] class for common properties.</div>
|
|
<div>See the base [page:Object3D] class for common properties.</div>
|
|
|
|
|
|
-
|
|
|
|
-
|
|
|
|
<h3>[property:array levels]</h3>
|
|
<h3>[property:array levels]</h3>
|
|
<div>
|
|
<div>
|
|
- An array of [page:object level] objects
|
|
|
|
- </div>
|
|
|
|
- <div>
|
|
|
|
- level is an object with two properties.
|
|
|
|
- </div>
|
|
|
|
- <div>
|
|
|
|
- distance -- The distance at which to display this level of detail<br />
|
|
|
|
- object -- The Object3D which will be displayed
|
|
|
|
|
|
+ An array of [page:object level] objects<br /><br />
|
|
|
|
+
|
|
|
|
+ Each level is an object with two properties:<br />
|
|
|
|
+ [page:Object3D object] - The [page:Object3D] to display at this level.<br />
|
|
|
|
+ [page:Float distance] - The distance at which to display this level of detail.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h2>Methods</h2>
|
|
<h2>Methods</h2>
|
|
<div>See the base [page:Object3D] class for common methods.</div>
|
|
<div>See the base [page:Object3D] class for common methods.</div>
|
|
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- <h3>[method:null addLevel]( [page:Object3D mesh], [page:Float distance] )</h3>
|
|
|
|
- <div>
|
|
|
|
- mesh -- The Object3D to display <br />
|
|
|
|
- distance -- The distance at which to display this level of detail
|
|
|
|
- </div>
|
|
|
|
|
|
+ <h3>[method:null addLevel]( [page:Object3D object], [page:Float distance] )</h3>
|
|
<div>
|
|
<div>
|
|
|
|
+ [page:Object3D object] - The [page:Object3D] to display at this level.<br />
|
|
|
|
+ [page:Float distance] - The distance at which to display this level of detail.<br /><br />
|
|
|
|
+
|
|
Adds a mesh that will display at a certain distance and greater. Typically the further away the distance,
|
|
Adds a mesh that will display at a certain distance and greater. Typically the further away the distance,
|
|
the lower the detail on the mesh.
|
|
the lower the detail on the mesh.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <h3>[method:Object3D getObjectForDistance]( [page:Float distance] )</h3>
|
|
|
|
|
|
+ <h3>[method:LOD clone]()</h3>
|
|
<div>
|
|
<div>
|
|
- Get a reference to the first [page:Object3D] (mesh) that is greater than supplied distance.
|
|
|
|
|
|
+ Returns a clone of this LOD object and its associated distance specific objects.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <h3>[method:null update]( [page:Camera camera] )</h3>
|
|
|
|
|
|
+
|
|
|
|
+ <h3>[method:Object3D getObjectForDistance]( [page:Float distance] )</h3>
|
|
<div>
|
|
<div>
|
|
- camera -- The current camera
|
|
|
|
|
|
+ Get a reference to the first [page:Object3D] (mesh) that is greater than [page:Float distance].
|
|
</div>
|
|
</div>
|
|
|
|
+
|
|
|
|
+ <h3>[method:Array raycast]( [page:Raycaster raycaster], [page:Array intersects] )</h3>
|
|
<div>
|
|
<div>
|
|
- Update the visiblility of the level of detail based on the distance from the camera.
|
|
|
|
|
|
+ Get intersections between a casted [page:Ray] and this LOD.
|
|
|
|
+ [page:Raycaster.intersectObject] will call this method.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <h3>[method:LOD clone]()</h3>
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <h3>[method:null toJSON]( meta )</h3>
|
|
<div>
|
|
<div>
|
|
- Returns a clone of this LOD object and its associated distance specific objects.
|
|
|
|
|
|
+ Create a JSON structure with details of this LOD object.
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
+ <h3>[method:null update]( [page:Camera camera] )</h3>
|
|
|
|
+ <div>
|
|
|
|
+ Set the visibility of each [page:levels level]'s [page:Object3D object] based on
|
|
|
|
+ distance from the [page:Camera camera]. This needs to be called in the render loop
|
|
|
|
+ for levels of detail to be updated dynamically.
|
|
|
|
+ </div>
|
|
|
|
|
|
<h2>Source</h2>
|
|
<h2>Source</h2>
|
|
|
|
|