提交 f6b28bcb 编写于 作者: M Mugen87

Docs: Consolidate examples section.

上级 40188b6b
......@@ -18,13 +18,7 @@
This uses the [link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API].
</p>
<h2>Example</h2>
<p>
[example:webaudio_sandbox webaudio / sandbox ]<br />
[example:webaudio_visualizer webaudio / visualizer ]
</p>
<h2>Code Example</h2>
<code>
// create an AudioListener and add it to the camera
......@@ -44,6 +38,12 @@
});
</code>
<h2>Examples</h2>
<p>
[example:webaudio_sandbox webaudio / sandbox ]<br />
[example:webaudio_visualizer webaudio / visualizer ]
</p>
<h2>Constructor</h2>
......
......@@ -18,13 +18,7 @@
</p>
<h2>Example</h2>
<p>
[example:webaudio_sandbox webaudio / sandbox ]<br />
[example:webaudio_visualizer webaudio / visualizer ]
</p>
<h2>Code Example</h2>
<code>
// create an AudioListener and add it to the camera
......@@ -50,6 +44,12 @@
var data = analyser.getAverageFrequency();
</code>
<h2>Examples</h2>
<p>
[example:webaudio_sandbox webaudio / sandbox ]<br />
[example:webaudio_visualizer webaudio / visualizer ]
</p>
<h2>Constructor</h2>
......
......@@ -18,14 +18,7 @@
In most cases, the listener object is a child of the camera. So the 3D transformation of the camera represents the 3D transformation of the listener.
</p>
<h2>Example</h2>
<p>
[example:webaudio_sandbox webaudio / sandbox ]<br />
[example:webaudio_timing webaudio / timing ]<br />
[example:webaudio_visualizer webaudio / visualizer ]
</p>
<h2>Code Example</h2>
<code>
// create an AudioListener and add it to the camera
......@@ -45,6 +38,13 @@
});
</code>
<h2>Examples</h2>
<p>
[example:webaudio_sandbox webaudio / sandbox ]<br />
[example:webaudio_timing webaudio / timing ]<br />
[example:webaudio_visualizer webaudio / visualizer ]
</p>
<h2>Constructor</h2>
......
......@@ -18,14 +18,7 @@
This uses the [link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API].
</p>
<h2>Example</h2>
<p>
[example:webaudio_orientation webaudio / orientation ]<br />
[example:webaudio_sandbox webaudio / sandbox ]<br />
[example:webaudio_timing webaudio / timing ]
</p>
<h2>Code Example</h2>
<code>
// create an AudioListener and add it to the camera
......@@ -53,6 +46,13 @@
mesh.add( sound );
</code>
<h2>Examples</h2>
<p>
[example:webaudio_orientation webaudio / orientation ]<br />
[example:webaudio_sandbox webaudio / sandbox ]<br />
[example:webaudio_timing webaudio / timing ]
</p>
<h2>Constructor</h2>
......
......@@ -17,7 +17,7 @@
An instance of [name] always has an array of sub cameras. It's mandatory to define for each sub camera the *viewport* property which determines the part of the viewport that is rendered with this camera.
</p>
<h2>Example</h2>
<h2>Examples</h2>
<p>[example:webgl_camera_array camera / array ]</p>
......
......@@ -14,10 +14,7 @@
<p class="desc">Creates 6 cameras that render to a [page:WebGLCubeRenderTarget].</p>
<h2>Examples</h2>
<p>[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]</p>
<p>[example:webgl_shading_physical shading / physical ]</p>
<h2>Code Example</h2>
<code>// Create cube camera
var cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
......@@ -38,6 +35,12 @@
renderer.render( scene, camera );
</code>
<h2>Examples</h2>
<p>
[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]<br />
[example:webgl_shading_physical shading / physical ]
</p>
<h2>Constructor</h2>
......
......@@ -21,22 +21,26 @@
This can be useful for rendering 2D scenes and UI elements, amongst other things.
</p>
<h2>Code Example</h2>
<h2>Example</h2>
<code>
var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );
</code>
<p>[example:webgl_camera camera ]</p>
<p>[example:webgl_interactive_cubes_ortho interactive / cubes / ortho ]</p>
<p>[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]</p>
<p>[example:webgl_postprocessing_advanced postprocessing / advanced ]</p>
<p>[example:webgl_postprocessing_dof2 postprocessing / dof2 ]</p>
<p>[example:webgl_postprocessing_godrays postprocessing / godrays ]</p>
<p>[example:webgl_rtt rtt ]</p>
<p>[example:webgl_shaders_tonemapping shaders / tonemapping ]</p>
<p>[example:webgl_shadowmap shadowmap ]</p>
<code>var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );</code>
<h2>Examples</h2>
<p>
[example:webgl_camera camera ]<br />
[example:webgl_interactive_cubes_ortho interactive / cubes / ortho ]<br />
[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]<br />
[example:webgl_postprocessing_advanced postprocessing / advanced ]<br />
[example:webgl_postprocessing_dof2 postprocessing / dof2 ]<br />
[example:webgl_postprocessing_godrays postprocessing / godrays ]<br />
[example:webgl_rtt rtt ]<br />
[example:webgl_shaders_tonemapping shaders / tonemapping ]<br />
[example:webgl_shadowmap shadowmap ]
</p>
<h2>Constructor</h2>
......
......@@ -19,18 +19,22 @@
common projection mode used for rendering a 3D scene.
</p>
<h2>Code Example</h2>
<h2>Example</h2>
<code>
var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
scene.add( camera );
</code>
<p>[example:webgl_animation_skinning_blending animation / skinning / blending ]</p>
<p>[example:webgl_animation_skinning_morph animation / skinning / blending ]</p>
<p>[example:webgl_effects_stereo effects / stereo ]</p>
<p>[example:webgl_interactive_cubes interactive / cubes ]</p>
<p>[example:webgl_loader_collada_skinning loader / collada / skinning ]</p>
<code>var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
scene.add( camera );</code>
<h2>Examples</h2>
<p>
[example:webgl_animation_skinning_blending animation / skinning / blending ]<br />
[example:webgl_animation_skinning_morph animation / skinning / blending ]<br />
[example:webgl_effects_stereo effects / stereo ]<br />
[example:webgl_interactive_cubes interactive / cubes ]<br />
[example:webgl_loader_collada_skinning loader / collada / skinning ]
</p>
<h2>Constructor</h2>
......
......@@ -16,22 +16,14 @@
[link:https://en.wikipedia.org/wiki/Anaglyph_3D 3D Anaglyph] or [link:https://en.wikipedia.org/wiki/parallax_barrier Parallax Barrier].
</p>
<h2>Example</h2>
<p>[example:webgl_effects_anaglyph effects / anaglyph ]</p>
<p>[example:webgl_effects_parallaxbarrier effects / parallaxbarrier ]</p>
<p>[example:webgl_effects_stereo effects / stereo ]</p>
<h2>Examples</h2>
<p>
This class is used internally in the files<br /><br />
[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/effects/AnaglyphEffect.js examples/jsm/effects/AnaglyphEffect.js]<br /><br />
[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/effects/ParallaxBarrierEffect.js examples/jsm/effects/ParallaxBarrierEffect.js]<br /><br />
[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/effects/StereoEffect.js examples/jsm/effects/StereoEffect.js]<br /><br />
used in the above examples.
[example:webgl_effects_anaglyph effects / anaglyph ]<br />
[example:webgl_effects_parallaxbarrier effects / parallaxbarrier ]<br />
[example:webgl_effects_stereo effects / stereo ]
</p>
<h2>Constructor</h2>
<h3>[name]( )</h3>
......
......@@ -10,15 +10,12 @@
<body>
<h1>Custom Blending Equation Constants</h1>
<h2>Example</h2>
<p>[example:webgl_materials_blending_custom materials / blending / custom ]</p>
<h2>Usage</h2>
<p>
These work with all material types. First set the material's blending mode to THREE.CustomBlending, then set the desired Blending Equation, Source Factor and Destination Factor.
</p>
<h2>Code Example</h2>
<code>
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
material.blending = THREE.CustomBlending;
......@@ -27,6 +24,9 @@
material.blendDst = THREE.OneMinusSrcAlphaFactor; //default
</code>
<h2>Examples</h2>
<p>[example:webgl_materials_blending_custom materials / blending / custom ]</p>
<h2>Blending Equations</h2>
<code>
THREE.AddEquation
......
......@@ -22,7 +22,7 @@
For a less efficient but easier-to-use representation of geometry, see [page:Geometry].
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var geometry = new THREE.BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
......@@ -42,6 +42,8 @@
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var mesh = new THREE.Mesh( geometry, material );
</code>
<h2>Examples</h2>
<p>
[example:webgl_buffergeometry Mesh with non-indexed faces]<br />
[example:webgl_buffergeometry_indexed Mesh with indexed faces]<br />
......
......@@ -15,36 +15,36 @@
[link:https://github.com/mrdoob/eventdispatcher.js Eventdispatcher on GitHub]
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
// Adding events to a custom object
// Adding events to a custom object
var Car = function () {
var Car = function () {
this.start = function () {
this.start = function () {
this.dispatchEvent( { type: 'start', message: 'vroom vroom!' } );
this.dispatchEvent( { type: 'start', message: 'vroom vroom!' } );
};
};
};
};
// Mixing the EventDispatcher.prototype with the custom object prototype
// Mixing the EventDispatcher.prototype with the custom object prototype
Object.assign( Car.prototype, EventDispatcher.prototype );
Object.assign( Car.prototype, EventDispatcher.prototype );
// Using events with the custom object
// Using events with the custom object
var car = new Car();
var car = new Car();
car.addEventListener( 'start', function ( event ) {
car.addEventListener( 'start', function ( event ) {
alert( event.message );
alert( event.message );
} );
} );
car.start();
car.start();
</code>
<h2>Constructor</h2>
......
......@@ -16,39 +16,40 @@
create them manually.
</p>
<h2>Examples</h2>
<p>[example:svg_sandbox svg / sandbox ]</p>
<p>[example:misc_exporter_obj exporter / obj ]</p>
<p>[example:webgl_shaders_vector WebGL / shaders / vector ]</p>
<h2>Code Example</h2>
<code>
var material = new THREE.MeshStandardMaterial( { color : 0x00cc00 } );
var material = new THREE.MeshStandardMaterial( { color : 0x00cc00 } );
//create a triangular geometry
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( -50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3( 50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3( 50, 50, 0 ) );
//create a triangular geometry
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( -50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3( 50, -50, 0 ) );
geometry.vertices.push( new THREE.Vector3( 50, 50, 0 ) );
//create a new face using vertices 0, 1, 2
var normal = new THREE.Vector3( 0, 0, 1 ); //optional
var color = new THREE.Color( 0xffaa00 ); //optional
var materialIndex = 0; //optional
var face = new THREE.Face3( 0, 1, 2, normal, color, materialIndex );
//create a new face using vertices 0, 1, 2
var normal = new THREE.Vector3( 0, 0, 1 ); //optional
var color = new THREE.Color( 0xffaa00 ); //optional
var materialIndex = 0; //optional
var face = new THREE.Face3( 0, 1, 2, normal, color, materialIndex );
//add the face to the geometry's faces array
geometry.faces.push( face );
//add the face to the geometry's faces array
geometry.faces.push( face );
//the face normals and vertex normals can be calculated automatically if not supplied above
geometry.computeFaceNormals();
geometry.computeVertexNormals();
//the face normals and vertex normals can be calculated automatically if not supplied above
geometry.computeFaceNormals();
geometry.computeVertexNormals();
scene.add( new THREE.Mesh( geometry, material ) );
scene.add( new THREE.Mesh( geometry, material ) );
</code>
<h2>Examples</h2>
<p>
[example:svg_sandbox svg / sandbox ]<br />
[example:misc_exporter_obj exporter / obj ]<br />
[example:webgl_shaders_vector WebGL / shaders / vector ]
</p>
<h2>Constructor</h2>
......
......@@ -21,20 +21,10 @@
</p>
</div>
<h2>Code Example</h2>
<h2>Example</h2>
<div>[example:webgl_geometry_minecraft WebGL / geometry / minecraft ]</div>
<div>[example:webgl_geometry_minecraft_ao WebGL / geometry / minecraft / ao ]</div>
<div>[example:webgl_geometry_nurbs WebGL / geometry / nurbs ]</div>
<div>[example:webgl_geometry_spline_editor WebGL / geometry / spline / editor ]</div>
<div>[example:webgl_interactive_cubes_gpu WebGL / interactive / cubes / gpu ]</div>
<div>[example:webgl_interactive_lines WebGL / interactive / lines ]</div>
<div>[example:webgl_interactive_raycasting_points WebGL / interactive / raycasting / points ]</div>
<div>[example:webgl_interactive_voxelpainter WebGL / interactive / voxelpainter ]</div>
<code>var geometry = new THREE.Geometry();
<code>
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( -10, 10, 0 ),
......@@ -47,6 +37,20 @@
geometry.computeBoundingSphere();
</code>
<h2>Examples</h2>
<p>
[example:webgl_geometry_minecraft WebGL / geometry / minecraft ]<br />
[example:webgl_geometry_minecraft_ao WebGL / geometry / minecraft / ao ]<br />
[example:webgl_geometry_nurbs WebGL / geometry / nurbs ]<br />
[example:webgl_geometry_spline_editor WebGL / geometry / spline / editor ]<br />
[example:webgl_interactive_cubes_gpu WebGL / interactive / cubes / gpu ]<br />
[example:webgl_interactive_lines WebGL / interactive / lines ]<br />
[example:webgl_interactive_raycasting_points WebGL / interactive / raycasting / points ]<br />
[example:webgl_interactive_voxelpainter WebGL / interactive / voxelpainter ]
</p>
<h2>Constructor</h2>
......
......@@ -16,7 +16,7 @@
An introduction into interleaved arrays can be found here: [link:https://blog.tojicode.com/2011/05/interleaved-array-basics.html Interleaved array basics]
</p>
<h2>Example</h2>
<h2>Examples</h2>
<p>[example:webgl_buffergeometry_points_interleaved webgl / buffergeometry / points / interleaved]</p>
......
......@@ -16,7 +16,7 @@
other things.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
......@@ -54,8 +54,11 @@
window.requestAnimationFrame(render);
</code>
<div>
Examples: [example:webgl_interactive_cubes Raycasting to a Mesh]<br />
<h2>Examples</h2>
<p>
[example:webgl_interactive_cubes Raycasting to a Mesh]<br />
[example:webgl_interactive_cubes_ortho Raycasting to a Mesh in using an OrthographicCamera]<br />
[example:webgl_interactive_buffergeometry Raycasting to a Mesh with BufferGeometry]<br />
[example:webgl_instancing_raycast Raycasting to a InstancedMesh]<br />
......@@ -64,13 +67,8 @@
[example:webgl_geometry_terrain_raycast Terrain raycasting]<br />
[example:webgl_interactive_voxelpainter Raycasting to paint voxels]<br />
[example:webgl_raycast_texture Raycast to a Texture]
</div>
<p>
</p>
<h2>Constructor</h2>
<h3>[name]( [param:Vector3 origin], [param:Vector3 direction], [param:Float near], [param:Float far] ) {</h3>
......
......@@ -13,7 +13,7 @@
<p class="desc">Uniforms are global [link:https://www.opengl.org/documentation/glsl/ GLSL] variables. They are passed to shader programs.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<p>
When declaring a uniform of a [page:ShaderMaterial], it is declared by value or by object.
</p>
......
......@@ -16,7 +16,7 @@
A 2D path representation. The class provides methods for creating paths and contours of 2D shapes similar to the 2D Canvas API.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var path = new THREE.Path();
......
......@@ -17,6 +17,8 @@
[page:ShapeGeometry], to get points, or to get triangulated faces.
</p>
<h2>Code Example</h2>
<code>
var heartShape = new THREE.Shape();
......
......@@ -16,7 +16,7 @@
series of paths.
</p>
<h2>Example</h2>
<h2>Examples</h2>
<p>
[example:webgl_geometry_extrude_shapes2 geometry / extrude / shapes2]
</p>
......
......@@ -15,30 +15,32 @@
<p class="desc">Create a smooth 3d spline curve from a series of points using the
[link:https://en.wikipedia.org/wiki/Centripetal_Catmull-Rom_spline Catmull-Rom] algorithm.</p>
<h2>Example</h2>
<h2>Code Example</h2>
<p>
[example:webgl_geometry_extrude_splines WebGL / geometry / extrude / splines]
</p>
<code>
//Create a closed wavey loop
var curve = new THREE.CatmullRomCurve3( [
new THREE.Vector3( -10, 0, 10 ),
new THREE.Vector3( -5, 5, 5 ),
new THREE.Vector3( 0, 0, 0 ),
new THREE.Vector3( 5, -5, 5 ),
new THREE.Vector3( 10, 0, 10 )
] );
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
<code>
//Create a closed wavey loop
var curve = new THREE.CatmullRomCurve3( [
new THREE.Vector3( -10, 0, 10 ),
new THREE.Vector3( -5, 5, 5 ),
new THREE.Vector3( 0, 0, 0 ),
new THREE.Vector3( 5, -5, 5 ),
new THREE.Vector3( 10, 0, 10 )
] );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
</code>
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
<h2>Examples</h2>
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
</code>
<p>
[example:webgl_geometry_extrude_splines WebGL / geometry / extrude / splines]
</p>
<h2>Constructor</h2>
......
......@@ -18,24 +18,24 @@
defined by a start point, endpoint and two control points.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var curve = new THREE.CubicBezierCurve(
new THREE.Vector2( -10, 0 ),
new THREE.Vector2( -5, 15 ),
new THREE.Vector2( 20, 15 ),
new THREE.Vector2( 10, 0 )
);
<code>
var curve = new THREE.CubicBezierCurve(
new THREE.Vector2( -10, 0 ),
new THREE.Vector2( -5, 15 ),
new THREE.Vector2( 20, 15 ),
new THREE.Vector2( 10, 0 )
);
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
</code>
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
</code>
<h2>Constructor</h2>
......
......@@ -18,25 +18,25 @@
defined by a start point, endpoint and two control points.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var curve = new THREE.CubicBezierCurve3(
new THREE.Vector3( -10, 0, 0 ),
new THREE.Vector3( -5, 15, 0 ),
new THREE.Vector3( 20, 15, 0 ),
new THREE.Vector3( 10, 0, 0 )
);
<code>
var curve = new THREE.CubicBezierCurve3(
new THREE.Vector3( -10, 0, 0 ),
new THREE.Vector3( -5, 15, 0 ),
new THREE.Vector3( 20, 15, 0 ),
new THREE.Vector3( 10, 0, 0 )
);
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
</code>
</code>
<h2>Constructor</h2>
......
......@@ -17,25 +17,25 @@
[page:Number xRadius] equal to the [page:Number yRadius] will result in a circle.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var curve = new THREE.EllipseCurve(
0, 0, // ax, aY
10, 10, // xRadius, yRadius
0, 2 * Math.PI, // aStartAngle, aEndAngle
false, // aClockwise
0 // aRotation
);
<code>
var curve = new THREE.EllipseCurve(
0, 0, // ax, aY
10, 10, // xRadius, yRadius
0, 2 * Math.PI, // aStartAngle, aEndAngle
false, // aClockwise
0 // aRotation
);
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final object to add to the scene
var ellipse = new THREE.Line( geometry, material );
</code>
// Create the final object to add to the scene
var ellipse = new THREE.Line( geometry, material );
</code>
<h2>Constructor</h2>
......
......@@ -18,23 +18,23 @@
defined by a startpoint, endpoint and a single control point.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var curve = new THREE.QuadraticBezierCurve(
new THREE.Vector2( -10, 0 ),
new THREE.Vector2( 20, 15 ),
new THREE.Vector2( 10, 0 )
);
<code>
var curve = new THREE.QuadraticBezierCurve(
new THREE.Vector2( -10, 0 ),
new THREE.Vector2( 20, 15 ),
new THREE.Vector2( 10, 0 )
);
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
//Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
</code>
//Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
</code>
<h2>Constructor</h2>
......
......@@ -18,23 +18,23 @@
defined by a startpoint, endpoint and a single control point.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var curve = new THREE.QuadraticBezierCurve3(
new THREE.Vector3( -10, 0, 0 ),
new THREE.Vector3( 20, 15, 0 ),
new THREE.Vector3( 10, 0, 0 )
);
<code>
var curve = new THREE.QuadraticBezierCurve3(
new THREE.Vector3( -10, 0, 0 ),
new THREE.Vector3( 20, 15, 0 ),
new THREE.Vector3( 10, 0, 0 )
);
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
</code>
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );
</code>
<h2>Constructor</h2>
......
......@@ -17,26 +17,26 @@
[page:Interpolations.CatmullRom] to create the curve.
</p>
<h2>Example</h2>
<code>
// Create a sine-like wave
var curve = new THREE.SplineCurve( [
new THREE.Vector2( -10, 0 ),
new THREE.Vector2( -5, 5 ),
new THREE.Vector2( 0, 0 ),
new THREE.Vector2( 5, -5 ),
new THREE.Vector2( 10, 0 )
] );
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final object to add to the scene
var splineObject = new THREE.Line( geometry, material );
</code>
<h2>Code Example</h2>
<code>
// Create a sine-like wave
var curve = new THREE.SplineCurve( [
new THREE.Vector2( -10, 0 ),
new THREE.Vector2( -5, 5 ),
new THREE.Vector2( 0, 0 ),
new THREE.Vector2( 5, -5 ),
new THREE.Vector2( 10, 0 )
] );
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final object to add to the scene
var splineObject = new THREE.Line( geometry, material );
</code>
<h2>Constructor</h2>
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var geometry = new THREE.CircleBufferGeometry( 5, 32 );
......
......@@ -33,7 +33,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var geometry = new THREE.CircleGeometry( 5, 32 );
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.ConeBufferGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.ConeGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.CylinderBufferGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
......
......@@ -14,9 +14,7 @@
<p class="desc">This can be used as a helper object to view the edges of a [page:Geometry Geometry] object.</p>
<h2>Example</h2>
[example:webgl_helpers helpers]
<h2>Code Example</h2>
<code>
var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
......@@ -25,6 +23,11 @@ var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color:
scene.add( line );
</code>
<h2>Examples</h2>
<p>
[example:webgl_helpers helpers]
</p>
<h2>Constructor</h2>
<h3>[name]( [param:Geometry geometry], [param:Integer thresholdAngle] )</h3>
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var points = [];
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var points = [];
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, 25, 25 );
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var geometry = new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, 25, 25 );
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.PlaneBufferGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.PlaneGeometry( 5, 20, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
......
......@@ -19,7 +19,7 @@
and [page:TetrahedronBufferGeometry] to generate their respective geometries.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var verticesOfCube = [
-1,-1,-1, 1,-1,-1, 1, 1,-1, -1, 1,-1,
......
......@@ -17,7 +17,7 @@
project them onto a sphere, and then divide them up to the desired level of detail.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var verticesOfCube = [
-1,-1,-1, 1,-1,-1, 1, 1,-1, -1, 1,-1,
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.RingBufferGeometry( 1, 5, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.RingGeometry( 1, 5, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
......
......@@ -33,7 +33,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
......
......@@ -33,7 +33,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.SphereGeometry( 5, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
......
......@@ -36,11 +36,7 @@
</script>
<h2>Examples</h2>
<p>
[example:webgl_geometry_text geometry / text ]
</p>
<h2>Code Example</h2>
<code>
var loader = new THREE.FontLoader();
......@@ -61,6 +57,12 @@
} );
</code>
<h2>Examples</h2>
<p>
[example:webgl_geometry_text geometry / text ]
</p>
<h2>Constructor</h2>
<h3>[name]([param:String text], [param:Object parameters])</h3>
......
......@@ -36,11 +36,7 @@
</script>
<h2>Examples</h2>
<p>
[example:webgl_geometry_text geometry / text ]
</p>
<h2>Code Example</h2>
<code>
var loader = new THREE.FontLoader();
......@@ -61,6 +57,12 @@
} );
</code>
<h2>Examples</h2>
<p>
[example:webgl_geometry_text geometry / text ]
</p>
<h2>Constructor</h2>
<h3>[name]([param:String text], [param:Object parameters])</h3>
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.TorusBufferGeometry( 10, 3, 16, 100 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.TorusGeometry( 10, 3, 16, 100 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.TorusKnotBufferGeometry( 10, 3, 100, 16 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>var geometry = new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
function CustomSinCurve( scale ) {
......
......@@ -32,7 +32,7 @@
</script>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
function CustomSinCurve( scale ) {
......
......@@ -14,41 +14,27 @@
<p class="desc">This can be used as a helper object to view a [page:Geometry Geometry] object as a wireframe.</p>
<!-- <iframe id="scene" src="scenes/geometry-browser.html#EdgeGeometry"></iframe>
<script>
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
var scene = document.getElementById( 'scene' );
scene.style.width = getComputedStyle( scene ).width;
scene.style.height = getComputedStyle( scene ).height;
scene.setAttribute( 'scrolling', 'no' );
}
</script> -->
<h2>Example</h2>
[example:webgl_helpers helpers]
<h2>Code Example</h2>
<code>
var geometry = new THREE.SphereBufferGeometry( 100, 100, 100 );
var geometry = new THREE.SphereBufferGeometry( 100, 100, 100 );
var wireframe = new THREE.WireframeGeometry( geometry );
var wireframe = new THREE.WireframeGeometry( geometry );
var line = new THREE.LineSegments( wireframe );
line.material.depthTest = false;
line.material.opacity = 0.25;
line.material.transparent = true;
var line = new THREE.LineSegments( wireframe );
line.material.depthTest = false;
line.material.opacity = 0.25;
line.material.transparent = true;
scene.add( line );
scene.add( line );
</code>
<h2>Examples</h2>
<p>
[example:webgl_helpers helpers]
</p>
<h2>Constructor</h2>
<h3>[name]( [param:Geometry geometry] )</h3>
......
......@@ -14,13 +14,7 @@
<p class="desc">An 3D arrow object for visualizing directions.</p>
<h2>Example</h2>
<p>
[example:webgl_geometries WebGL / geometries]<br/>
[example:webgl_geometry_normals WebGL / geometry / normals]<br/>
[example:webgl_shadowmesh WebGL / shadowmesh]
</p>
<h2>Code Example</h2>
<code>
var dir = new THREE.Vector3( 1, 2, 0 );
......@@ -36,6 +30,14 @@
scene.add( arrowHelper );
</code>
<h2>Examples</h2>
<p>
[example:webgl_geometries WebGL / geometries]<br/>
[example:webgl_geometry_normals WebGL / geometry / normals]<br/>
[example:webgl_shadowmesh WebGL / shadowmesh]
</p>
<h2>Constructor</h2>
<h3>[name]([param:Vector3 dir], [param:Vector3 origin], [param:Number length], [param:Number hex], [param:Number headLength], [param:Number headWidth] )</h3>
......
......@@ -13,9 +13,17 @@
<h1>[name]</h1>
<p class="desc">An axis object to visualize the 3 axes in a simple way. <br />
The X axis is red. The Y axis is green. The Z axis is blue.</p>
The X axis is red. The Y axis is green. The Z axis is blue.
</p>
<h2>Code Example</h2>
<code>
var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
</code>
<h2>Example</h2>
<h2>Examples</h2>
<p>
[example:webgl_geometries WebGL / geometries]<br/>
......@@ -23,11 +31,6 @@
[example:webgl_geometry_spline_editor WebGL / geometry / spline / editor]
</p>
<code>
var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );
</code>
<h2>Constructor</h2>
......
......@@ -17,7 +17,7 @@
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var box = new THREE.Box3();
......
......@@ -19,13 +19,7 @@
so it won't work with [page:Sprite Sprites].
</p>
<h2>Example</h2>
<p>
[example:webgl_helpers WebGL / helpers]<br/>
[example:webgl_loader_nrrd WebGL / loader / nrrd]<br/>
[example:webgl_buffergeometry_drawrange WebGL / buffergeometry / drawrange]
</p>
<h2>Code Example</h2>
<code>
var sphere = new THREE.SphereBufferGeometry();
......@@ -34,6 +28,13 @@
scene.add( box );
</code>
<h2>Examples</h2>
<p>
[example:webgl_helpers WebGL / helpers]<br/>
[example:webgl_loader_nrrd WebGL / loader / nrrd]<br/>
[example:webgl_buffergeometry_drawrange WebGL / buffergeometry / drawrange]
</p>
<h2>Constructor</h2>
......
......@@ -17,18 +17,18 @@
It visualizes the frustum of a camera using a [page:LineSegments].
</p>
<h2>Example</h2>
<p>
[example:webgl_camera WebGL / camera]<br/>
[example:webgl_geometry_extrude_splines WebGL / extrude / splines]
</p>
<h2>Code Example</h2>
<code>
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var helper = new THREE.CameraHelper( camera );
scene.add( helper );
</code>
<h2>Examples</h2>
<p>
[example:webgl_camera WebGL / camera]<br/>
[example:webgl_geometry_extrude_splines WebGL / extrude / splines]
</p>
<h2>Constructor</h2>
......
......@@ -18,17 +18,14 @@
This consists of plane and a line representing the light's position and direction.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var light = new THREE.DirectionalLight( 0xFFFFFF );
var helper = new THREE.DirectionalLightHelper( light, 5 );
scene.add( helper );
</code>
<h2>Constructor</h2>
......
......@@ -14,11 +14,7 @@
<p class="desc">The GridHelper is an object to define grids. Grids are two-dimensional arrays of lines.</p>
<h2>Example</h2>
<p>
[example:webgl_helpers WebGL / helpers]
</p>
<h2>Code Example</h2>
<code>var size = 10;
var divisions = 10;
......@@ -27,6 +23,12 @@
scene.add( gridHelper );
</code>
<h2>Examples</h2>
<p>
[example:webgl_helpers WebGL / helpers]
</p>
<h2>Constructor</h2>
<h3>[name]( [param:number size], [param:Number divisions], [param:Color colorCenterLine], [param:Color colorGrid] )</h3>
......
......@@ -16,12 +16,12 @@
Creates a visual aid consisting of a spherical [page:Mesh] for a [page:HemisphereLight HemisphereLight].
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
var helper = new THREE.HemisphereLightHelper( light, 5 );
scene.add( helper );
var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
var helper = new THREE.HemisphereLightHelper( light, 5 );
scene.add( helper );
</code>
......
......@@ -17,7 +17,7 @@
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var plane = new THREE.Plane( new THREE.Vector3( 1, 1, 0.2 ), 3 );
......
......@@ -17,12 +17,7 @@
a [page:PointLight].
</p>
<h2>Example</h2>
<p>
[example:webgl_helpers WebGL / helpers]
</p>
<h2>Code Example</h2>
<code>
var pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
......@@ -34,8 +29,11 @@
scene.add( pointLightHelper );
</code>
<h2>Examples</h2>
<p>
[example:webgl_helpers WebGL / helpers]
</p>
<h2>Constructor</h2>
......
......@@ -14,13 +14,10 @@
<p class="desc">The PolarGridHelper is an object to define polar grids. Grids are two-dimensional arrays of lines.</p>
<h2>Example</h2>
<h2>Code Example</h2>
<p>
[example:webgl_helpers WebGL / helpers]
</p>
<code>var radius = 10;
<code>
var radius = 10;
var radials = 16;
var circles = 8;
var divisions = 64;
......@@ -29,6 +26,12 @@
scene.add( helper );
</code>
<h2>Examples</h2>
<p>
[example:webgl_helpers WebGL / helpers]
</p>
<h2>Constructor</h2>
<h3>[name]( [param:Number radius], [param:Number radials], [param:Number circles], [param:Number divisions], [param:Color color1], [param:Color color2] )</h3>
......
......@@ -17,8 +17,14 @@
The helper is renderered using a [page:LineBasicMaterial LineBasicMaterial].
</p>
<h2>Code Example</h2>
<h2>Example</h2>
<code>
var helper = new THREE.SkeletonHelper( skinnedMesh );
scene.add( helper );
</code>
<h2>Examples</h2>
<p>
[example:webgl_animation_skinning_blending WebGL / animation / skinning / blending]<br />
......@@ -26,13 +32,6 @@
[example:webgl_loader_bvh WebGL / loader / bvh ]
</p>
<code>
var helper = new THREE.SkeletonHelper( skinnedMesh );
scene.add( helper );
</code>
<h2>Constructor</h2>
......
......@@ -14,11 +14,6 @@
<p class="desc">This displays a cone shaped helper object for a [page:SpotLight].</p>
<h2>Examples</h2>
<p>
[example:webgl_lights_spotlights WebGL/ lights / spotlights ]
</p>
<h2>Code Example</h2>
<code>
var spotLight = new THREE.SpotLight( 0xffffff );
......@@ -29,6 +24,11 @@
scene.add( spotLightHelper );
</code>
<h2>Examples</h2>
<p>
[example:webgl_lights_spotlights WebGL/ lights / spotlights ]
</p>
<h2>Constructor</h2>
<h3>[name]( [param:SpotLight light], [param:Hex color] )</h3>
......
......@@ -18,16 +18,19 @@
This light cannot be used to cast shadows as it does not have a direction.
</p>
<h2>Code Example</h2>
<h2>Example</h2>
<code>
var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
</code>
<h2>Examples</h2>
<p>
[example:webgl_animation_cloth animation / cloth ]<br />
[example:webgl_animation_skinning_blending animation / skinning / blending ]
[example:webgl_animation_cloth animation / cloth ]<br />
[example:webgl_animation_skinning_blending animation / skinning / blending ]
</p>
<code>var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );</code>
<h2>Constructor</h2>
<h3>[name]( [param:Integer color], [param:Float intensity] )</h3>
......
......@@ -37,8 +37,15 @@
See the [page:.target target] property below for details on updating the target.
</p>
<h2>Code Example</h2>
<h2>Example</h2>
<code>
// White directional light at half intensity shining from the top.
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( directionalLight );
</code>
<h2>Examples</h2>
<p>
[example:misc_controls_fly controls / fly ]<br />
[example:webgl_effects_parallaxbarrier effects / parallaxbarrier ]<br />
......@@ -48,13 +55,6 @@
[example:webgl_materials_cubemap_balls_reflection materials / cubemap / balls / reflection ]
</p>
<code>
// White directional light at half intensity shining from the top.
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( directionalLight );
</code>
<h2>Constructor</h2>
<h3>[name]( [param:Integer color], [param:Float intensity] )</h3>
......
......@@ -19,21 +19,23 @@
This light cannot be used to cast shadows.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<div>
<code>
var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
scene.add( light );
</code>
<h2>Examples</h2>
<p>
[example:webgl_lights_hemisphere lights / hemisphere ]<br />
[example:misc_controls_pointerlock controls / pointerlock ]<br />
[example:webgl_decals decals ]<br />
[example:webgl_loader_collada_kinematics loader / collada / kinematics ]<br />
[example:webgl_materials_lightmap materials / lightmap ]<br />
[example:webgl_shaders_ocean shaders / ocean ]
</div>
<code>
var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
scene.add( light );
</code>
[example:misc_controls_pointerlock controls / pointerlock ]<br />
[example:webgl_decals decals ]<br />
[example:webgl_loader_collada_kinematics loader / collada / kinematics ]<br />
[example:webgl_materials_lightmap materials / lightmap ]<br />
[example:webgl_shaders_ocean shaders / ocean ]
</p>
<h2>Constructor</h2>
<h3>[name]( [param:Integer skyColor], [param:Integer groundColor], [param:Float intensity] )</h3>
......
......@@ -19,8 +19,15 @@
This light can cast shadows - see [page:PointLightShadow] page for details.
</p>
<h2>Code Example</h2>
<h2>Example</h2>
<code>
var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );
</code>
<h2>Examples</h2>
<p>
[example:webgl_lights_pointlights lights / pointlights ]<br />
......@@ -30,13 +37,6 @@
[example:webgl_lensflares lensflares ]
</p>
<code>
var light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );
</code>
<h2>Constructor</h2>
<h3>[name]( [param:Integer color], [param:Float intensity], [param:Number distance], [param:Float decay] )</h3>
......
......@@ -24,14 +24,9 @@
</ul>
</p>
<h2>Code Example</h2>
<h2>Examples</h2>
<p>
[example:webgl_lights_rectarealight WebGL / rectarealight ]
<code>
<code>
var width = 10;
var height = 10;
var intensity = 1;
......@@ -43,9 +38,13 @@ scene.add( rectLight )
rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
rectLight.add( rectLightHelper );
</code>
</p>
</code>
<h2>Examples</h2>
<p>
[example:webgl_lights_rectarealight WebGL / rectarealight ]
</p>
<h2>Constructor</h2>
......
......@@ -19,13 +19,6 @@
This light can cast shadows - see the [page:SpotLightShadow] page for details.
</p>
<h2>Example</h2>
<p>
[example:webgl_lights_spotlight lights / spotlight ]<br />
[example:webgl_lights_spotlights lights / spotlights ]
</p>
<h2>Code Example</h2>
<code>
// white spotlight shining from the side, casting a shadow
......@@ -45,6 +38,13 @@
scene.add( spotLight );
</code>
<h2>Examples</h2>
<p>
[example:webgl_lights_spotlight lights / spotlight ]<br />
[example:webgl_lights_spotlights lights / spotlights ]
</p>
<h2>Constructor</h2>
......
......@@ -20,46 +20,45 @@
are parallel.
</p>
<h2>Example</h2>
<p>
<code>
//Create a WebGLRenderer and turn on shadows in the renderer
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
//Create a DirectionalLight and turn on shadows for the light
var light = new THREE.DirectionalLight( 0xffffff, 1, 100 );
light.position.set( 0, 1, 0 ); //default; light shining from top
light.castShadow = true; // default false
scene.add( light );
//Set up shadow properties for the light
light.shadow.mapSize.width = 512; // default
light.shadow.mapSize.height = 512; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 500; // default
//Create a sphere that cast shadows (but does not receive them)
var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.castShadow = true; //default is false
sphere.receiveShadow = false; //default
scene.add( sphere );
//Create a plane that receives shadows (but does not cast them)
var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.receiveShadow = true;
scene.add( plane );
//Create a helper for the shadow camera (optional)
var helper = new THREE.CameraHelper( light.shadow.camera );
scene.add( helper );
</code>
</p>
<h2>Code Example</h2>
<code>
//Create a WebGLRenderer and turn on shadows in the renderer
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
//Create a DirectionalLight and turn on shadows for the light
var light = new THREE.DirectionalLight( 0xffffff, 1, 100 );
light.position.set( 0, 1, 0 ); //default; light shining from top
light.castShadow = true; // default false
scene.add( light );
//Set up shadow properties for the light
light.shadow.mapSize.width = 512; // default
light.shadow.mapSize.height = 512; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 500; // default
//Create a sphere that cast shadows (but does not receive them)
var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.castShadow = true; //default is false
sphere.receiveShadow = false; //default
scene.add( sphere );
//Create a plane that receives shadows (but does not cast them)
var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.receiveShadow = true;
scene.add( plane );
//Create a helper for the shadow camera (optional)
var helper = new THREE.CameraHelper( light.shadow.camera );
scene.add( helper );
</code>
<h2>Constructor</h2>
<h3>[name]( )</h3>
......
......@@ -16,46 +16,44 @@
</p>
<h2>Example</h2>
<p>
<code>
//Create a WebGLRenderer and turn on shadows in the renderer
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
//Create a PointLight and turn on shadows for the light
var light = new THREE.PointLight( 0xffffff, 1, 100 );
light.position.set( 0, 10, 0 );
light.castShadow = true; // default false
scene.add( light );
//Set up shadow properties for the light
light.shadow.mapSize.width = 512; // default
light.shadow.mapSize.height = 512; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 500 // default
//Create a sphere that cast shadows (but does not receive them)
var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.castShadow = true; //default is false
sphere.receiveShadow = false; //default
scene.add( sphere );
//Create a plane that receives shadows (but does not cast them)
var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.receiveShadow = true;
scene.add( plane );
//Create a helper for the shadow camera (optional)
var helper = new THREE.CameraHelper( light.shadow.camera );
scene.add( helper );
</code>
</p>
<h2>Code Example</h2>
<code>
//Create a WebGLRenderer and turn on shadows in the renderer
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
//Create a PointLight and turn on shadows for the light
var light = new THREE.PointLight( 0xffffff, 1, 100 );
light.position.set( 0, 10, 0 );
light.castShadow = true; // default false
scene.add( light );
//Set up shadow properties for the light
light.shadow.mapSize.width = 512; // default
light.shadow.mapSize.height = 512; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 500 // default
//Create a sphere that cast shadows (but does not receive them)
var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.castShadow = true; //default is false
sphere.receiveShadow = false; //default
scene.add( sphere );
//Create a plane that receives shadows (but does not cast them)
var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.receiveShadow = true;
scene.add( plane );
//Create a helper for the shadow camera (optional)
var helper = new THREE.CameraHelper( light.shadow.camera );
scene.add( helper );
</code>
<h2>Constructor</h2>
<h3>[name]( )</h3>
......
......@@ -16,46 +16,43 @@
This is used internally by [page:SpotLight SpotLights] for calculating shadows.
</p>
<h2>Example</h2>
<p>
<code>
//Create a WebGLRenderer and turn on shadows in the renderer
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
//Create a SpotLight and turn on shadows for the light
var light = new THREE.SpotLight( 0xffffff );
light.castShadow = true; // default false
scene.add( light );
//Set up shadow properties for the light
light.shadow.mapSize.width = 512; // default
light.shadow.mapSize.height = 512; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 500 // default
//Create a sphere that cast shadows (but does not receive them)
var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.castShadow = true; //default is false
sphere.receiveShadow = false; //default
scene.add( sphere );
//Create a plane that receives shadows (but does not cast them)
var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.receiveShadow = true;
scene.add( plane );
//Create a helper for the shadow camera (optional)
var helper = new THREE.CameraHelper( light.shadow.camera );
scene.add( helper );
</code>
</p>
<h2>Code Example</h2>
<code>
//Create a WebGLRenderer and turn on shadows in the renderer
var renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
//Create a SpotLight and turn on shadows for the light
var light = new THREE.SpotLight( 0xffffff );
light.castShadow = true; // default false
scene.add( light );
//Set up shadow properties for the light
light.shadow.mapSize.width = 512; // default
light.shadow.mapSize.height = 512; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 500 // default
//Create a sphere that cast shadows (but does not receive them)
var sphereGeometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
var sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
var sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.castShadow = true; //default is false
sphere.receiveShadow = false; //default
scene.add( sphere );
//Create a plane that receives shadows (but does not cast them)
var planeGeometry = new THREE.PlaneBufferGeometry( 20, 20, 32, 32 );
var planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.receiveShadow = true;
scene.add( plane );
//Create a helper for the shadow camera (optional)
var helper = new THREE.CameraHelper( light.shadow.camera );
scene.add( helper );
</code>
<h2>Constructor</h2>
......
......@@ -17,7 +17,7 @@
This uses the [page:FileLoader] internally for loading files.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
// instantiate a loader
......
......@@ -18,7 +18,7 @@
This uses the [page:FileLoader] internally for loading files.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
// instantiate a listener
......
......@@ -17,11 +17,7 @@
This uses the [page:FileLoader] internally for loading files.
</p>
<h2>Example</h2>
<p>
[example:webgl_performance WebGL / performance]
</p>
<h2>Code Example</h2>
<code>
// instantiate a loader
......@@ -51,6 +47,12 @@
);
</code>
<h2>Examples</h2>
<p>
[example:webgl_performance WebGL / performance]
</p>
<h2>Constructor</h2>
<h3>[name]( [param:LoadingManager manager] )</h3>
......
......@@ -14,6 +14,14 @@
A simple caching system, used internally by [page:FileLoader].
</p>
<h2>Code Example</h2>
<p>To enable caching across all loaders that use [page:FileLoader], set</p>
<code>
THREE.Cache.enabled = true.
</code>
<h2>Examples</h2>
<p>
......@@ -22,14 +30,6 @@
[example:webgl_loader_ttf WebGL / loader / ttf]
</p>
<h2>Usage</h2>
<p>To enable caching across all loaders that use [page:FileLoader], set</p>
<code>
THREE.Cache.enabled = true.
</code>
<h2>Properties</h2>
<h3>[property:Boolean enabled]</h3>
......
......@@ -17,15 +17,7 @@
This uses the [page:ImageLoader] internally for loading files.
</p>
<h2>Example</h2>
<p>
[example:webgl_materials_cubemap materials / cubemap]<br />
[example:webgl_materials_cubemap_balls_reflection materials / cubemap / balls / reflection]<br />
[example:webgl_materials_cubemap_balls_refraction materials / cubemap / balls / refraction]<br />
[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic]<br />
[example:webgl_materials_cubemap_refraction materials / cubemap / refraction]
</p>
<h2>Code Example</h2>
<code>
var scene = new THREE.Scene();
......@@ -41,6 +33,16 @@ scene.background = new THREE.CubeTextureLoader()
] );
</code>
<h2>Examples</h2>
<p>
[example:webgl_materials_cubemap materials / cubemap]<br />
[example:webgl_materials_cubemap_balls_reflection materials / cubemap / balls / reflection]<br />
[example:webgl_materials_cubemap_balls_refraction materials / cubemap / balls / refraction]<br />
[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic]<br />
[example:webgl_materials_cubemap_refraction materials / cubemap / refraction]
</p>
<h2>Constructor</h2>
<h3>[name]( [param:LoadingManager manager] )</h3>
......
......@@ -17,7 +17,7 @@
It can also be used directly to load any file type that does not have a loader.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
var loader = new THREE.FileLoader();
......
......@@ -20,12 +20,7 @@
You can convert fonts online using [link:https://gero3.github.io/facetype.js/ facetype.js]
</p>
<h2>Examples</h2>
<p>
[example:webgl_geometry_text_shapes geometry / text / shapes ]<br/>
[example:webgl_geometry_text geometry / text ]
</p>
<h2>Code Example</h2>
<code>
var loader = new THREE.FontLoader();
......@@ -51,6 +46,13 @@
);
</code>
<h2>Examples</h2>
<p>
[example:webgl_geometry_text_shapes geometry / text / shapes ]<br/>
[example:webgl_geometry_text geometry / text ]
</p>
<h2>Constructor</h2>
<h3>[name]( [param:LoadingManager manager] )</h3>
......
......@@ -25,11 +25,7 @@
instead. Refer to [link:https://www.khronos.org/registry/webgl/specs/latest/1.0/#6.10 WebGL specification] for the detail.
</p>
<h2>Example</h2>
<p>
[example:webgl_loader_imagebitmap WebGL / loader / ImageBitmap]
</p>
<h2>Code Example</h2>
<code>
// instantiate a loader
......@@ -59,6 +55,11 @@
);
</code>
<h2>Examples</h2>
<p>
[example:webgl_loader_imagebitmap WebGL / loader / ImageBitmap]
</p>
<h2>Constructor</h2>
......
......@@ -18,12 +18,7 @@
[page:CubeTextureLoader], [page:ObjectLoader] and [page:TextureLoader].
</p>
<h2>Example</h2>
<p>
[example:webgl_loader_obj WebGL / loader / obj]<br />
[example:webgl_shaders_ocean WebGL / shaders / ocean]
</p>
<h2>Code Example</h2>
<code>
// instantiate a loader
......@@ -57,6 +52,13 @@
that supports progress events, see [link:https://github.com/mrdoob/three.js/issues/10439#issuecomment-275785639 this thread].
</p>
<h2>Examples</h2>
<p>
[example:webgl_loader_obj WebGL / loader / obj]<br />
[example:webgl_shaders_ocean WebGL / shaders / ocean]
</p>
<h2>Constructor</h2>
<h3>[name]( [param:LoadingManager manager] )</h3>
......
......@@ -17,8 +17,7 @@
This uses the [page:FileLoader] internally for loading files.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<code>
// instantiate a loader
......
......@@ -18,12 +18,7 @@
This uses the [page:FileLoader] internally for loading files.
</p>
<h2>Example</h2>
<p>
[example:webgl_loader_json_claraio WebGL / loader / json / claraio]<br />
[example:webgl_materials_lightmap WebGL / materials / lightmap]
</p>
<h2>Code Example</h2>
<code>
var loader = new THREE.ObjectLoader();
......@@ -57,7 +52,12 @@
scene.add( object );
</code>
<h2>Examples</h2>
<p>
[example:webgl_loader_json_claraio WebGL / loader / json / claraio]<br />
[example:webgl_materials_lightmap WebGL / materials / lightmap]
</p>
<h2>Constructor</h2>
......
......@@ -17,11 +17,7 @@
This uses the [page:ImageLoader] internally for loading files.
</p>
<h2>Example</h2>
<p>
[example:webgl_geometry_cube geometry / cube]
</p>
<h2>Code Example</h2>
<code>
var texture = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );
......@@ -30,7 +26,7 @@
var material = new THREE.MeshBasicMaterial( { map: texture } );
</code>
<h2>Example with Callbacks</h2>
<h2>Code Example with Callbacks</h2>
<code>
// instantiate a loader
......@@ -59,7 +55,15 @@
);
</code>
Please note three.js r84 dropped support for TextureLoader progress events. For a TextureLoader that supports progress events, see [link:https://github.com/mrdoob/three.js/issues/10439#issuecomment-293260145 this thread].
<p>
Please note three.js r84 dropped support for TextureLoader progress events. For a TextureLoader that supports progress events, see [link:https://github.com/mrdoob/three.js/issues/10439#issuecomment-293260145 this thread].
</p>
<h2>Examples</h2>
<p>
[example:webgl_geometry_cube geometry / cube]
</p>
<h2>Constructor</h2>
......
......@@ -17,7 +17,7 @@
for say, textures and models.
</p>
<h2>Example</h2>
<h2>Code Example</h2>
<p>
You can optionally set the [page:LoadingManager.onStart onStart], [page:LoadingManager.onLoad onLoad],
......
......@@ -19,15 +19,7 @@
</p>
<h2>Example</h2>
<p>
[example:webgl_loader_fbx WebGL / loader / fbx]<br />
[example:webgl_loader_obj WebGL / loader / obj]<br />
[example:webgl_materials_physical_reflectivity WebGL / materials / physical / reflectivity]<br />
[example:webgl_postprocessing_outline WebGL / postprocesing / outline]
</p>
<h2>Code Example</h2>
<p>
This example shows how to use LoadingManager to track the progress of
......@@ -105,6 +97,15 @@
});
</code>
<h2>Examples</h2>
<p>
[example:webgl_loader_fbx WebGL / loader / fbx]<br />
[example:webgl_loader_obj WebGL / loader / obj]<br />
[example:webgl_materials_physical_reflectivity WebGL / materials / physical / reflectivity]<br />
[example:webgl_postprocessing_outline WebGL / postprocesing / outline]
</p>
<h2>Constructor</h2>
<h3>[name]( [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
......
......@@ -14,6 +14,17 @@
<p class="desc">A material for drawing wireframe-style geometries.</p>
<h2>Code Example</h2>
<code>
var material = new THREE.LineBasicMaterial( {
color: 0xffffff,
linewidth: 1,
linecap: 'round', //ignored by WebGLRenderer
linejoin: 'round' //ignored by WebGLRenderer
} );
</code>
<h2>Examples</h2>
<p>
......@@ -33,15 +44,6 @@
[example:webgl_physics_rope WebGL / phyics / rope]
</p>
<code>
var material = new THREE.LineBasicMaterial( {
color: 0xffffff,
linewidth: 1,
linecap: 'round', //ignored by WebGLRenderer
linejoin: 'round' //ignored by WebGLRenderer
} );
</code>
<h2>Constructor</h2>
<h3>[name]( [param:Object parameters] )</h3>
......
......@@ -14,22 +14,24 @@
<p class="desc">A material for drawing wireframe-style geometries with dashed lines.</p>
<h2>Code Example</h2>
<code>
var material = new THREE.LineDashedMaterial( {
color: 0xffffff,
linewidth: 1,
scale: 1,
dashSize: 3,
gapSize: 1,
} );
</code>
<h2>Examples</h2>
<p>
[example:webgl_lines_dashed WebGL / lines / dashed]<br />
</p>
<code>
var material = new THREE.LineDashedMaterial( {
color: 0xffffff,
linewidth: 1,
scale: 1,
dashSize: 3,
gapSize: 1,
} );
</code>
<h2>Constructor</h2>
......
......@@ -19,7 +19,7 @@
The following examples demonstrates this approach in order to ensure transparent parts of objects do no cast shadows.
</p>
<h2>Example</h2>
<h2>Examples</h2>
<p>
[example:webgl_shadowmap_pointlight WebGL / shadowmap / pointlight]
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册