提交 50b2d2f7 编写于 作者: B bdysvik 提交者: GitHub

Merge branch 'dev' into dev

The MIT License
Copyright © 2010-2016 three.js authors
Copyright © 2010-2017 three.js authors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
......
......@@ -13,7 +13,7 @@ The aim of the project is to create an easy to use, lightweight, 3D library. The
[Examples](http://threejs.org/examples/) —
[Documentation](http://threejs.org/docs/) —
[Wiki](https://github.com/mrdoob/three.js/wiki) —
[Migrating](https://github.com/mrdoob/three.js/wiki/Migration) —
[Migrating](https://github.com/mrdoob/three.js/wiki/Migration-Guide) —
[Help](http://stackoverflow.com/questions/tagged/three.js)
### Usage ###
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
......@@ -11,7 +11,7 @@
<h1>Polyfills</h1>
<div class="desc">Three includes polyfills for the following functions and constants.</div>
<div class="desc">Three.js includes polyfills for the following functions and constants.</div>
<h3>[page:Number.EPSILON Number.EPSILON]</h3>
<div>
......
......@@ -67,8 +67,7 @@ scene.add( camera );</code>
<div>
Camera frustum far plane. Default is *2000*.<br /><br />
Note that Three does not currently give warnings for incorrect values here, however the expected
range is between the current value of the [page:.far far] plane and infinity.
The valid range is between the current value of the [page:.near near] plane and infinity.
</div>
<h3>[property:Boolean isOrthographicCamera]</h3>
......@@ -83,10 +82,11 @@ scene.add( camera );</code>
<h3>[property:Float near]</h3>
<div>
Camera fustum near plane. Default is *0.1*.<br /><br />
Camera frustum near plane. Default is *0.1*.<br /><br />
Note that Three does not currently give warnings for incorrect values here, however the expected
range is between 0 and the current value of the [page:.far far] plane.
The valid range is between 0 and the current value of the [page:.far far] plane.
Note that, unlike for the [page:PerspectiveCamera], *0* is a valid value for an
OrthographicCamera's near plane.
</div>
<h3>[property:Float right]</h3>
......
......@@ -57,8 +57,7 @@ scene.add( camera );</code>
<div>
Camera frustum far plane. Default is *2000*.<br /><br />
Note that Three does not currently give warnings for incorrect values here, however the expected
range is between the current value of the [page:.far far] plane and infinity.
The valid range is between the current value of the [page:.near near] plane and infinity.
</div>
<h3>[property:Float filmGauge]</h3>
......@@ -86,10 +85,11 @@ scene.add( camera );</code>
<h3>[property:Float near]</h3>
<div>
Camera fustum near plane. Default is *0.1*.<br /><br />
Camera frustum near plane. Default is *0.1*.<br /><br />
Note that Three does not currently give warnings for incorrect values here, however the expected
range is between 0 and the current value of the [page:.far far] plane.
The valid range is greater than 0 and less than the current value of the [page:.far far] plane.
Note that, unlike for the [page:OrthographicCamera], *0* is <em>not</em> a valid value
for a PerspectiveCamera's near plane.
</div>
<h3>[property:Object view]</h3>
......
......@@ -17,7 +17,7 @@
</code>
<div id="rev">
The current Three.js [link:https://github.com/mrdoob/three.js/releases revision number].
The current three.js [link:https://github.com/mrdoob/three.js/releases revision number].
</div>
<h2>Mouse Buttons</h2>
......
......@@ -11,7 +11,7 @@
<h1>[name]</h1>
<div class="desc">
This is the base class for most objects in Three and provides a set of properties and methods
This is the base class for most objects in three.js and provides a set of properties and methods
for manipulating objects in 3D space.<br /><br />
Note that this can be used for grouping objects via the [page:.add]( object ) method
......@@ -64,7 +64,7 @@
<h3>[property:Boolean matrixAutoUpdate]</h3>
<div>
When this is set, it calculates the matrix of position, (rotation or quaternion) and
scale every frame and also recalculates the matrixWorld property. Default is *true*.
scale every frame and also recalculates the matrixWorld property. Default is [page:Object3D.DefaultMatrixAutoUpdate] (true).
</div>
<h3>[property:Matrix4 matrixWorld]</h3>
......@@ -132,7 +132,10 @@
</div>
<h3>[property:Vector3 up]</h3>
<div>Up direction. Default is [page:Vector3]( 0, 1, 0 ).</div>
<div>
This is used by the [page:.lookAt lookAt] method, for example, to determine the orientation of the result.<br />
Default is [page:Object3D.DefaultUp] - that is, ( 0, 1, 0 ).
</div>
<h3>[property:object userData]</h3>
<div>
......@@ -152,7 +155,27 @@
<h2>Static Properties</h2>
<div>
Static properties and methods are defined per class rather than per instance of that class.
This means that changing [page:Object3D.DefaultUp] or [page:Object3D.DefaultMatrixAutoUpdate]
will change the values of [page:.up up] and [page:.matrixAutoUpdate matrixAutoUpdate] for
<em>every</em> instance of Object3D (or derived classes) created after the change has
been made (already created Object3Ds will not be affected).
</div>
<h3>[property:Vector3 DefaultUp]</h3>
<div>
The default [page:.up up] direction for objects, also used as the default position for [page:DirectionalLight],
[page:HemisphereLight] and [page:Spotlight] (which creates lights shining from the top down).<br />
Set to (0, 1, 0) by default.
</div>
<h3>[property:Vector3 DefaultMatrixAutoUpdate]</h3>
<div>
The default setting for [page.matrixAutoUpdate matrixAutoUpdate] for newly created Object3Ds.<br />
</div>
<h2>Methods</h2>
......
......@@ -13,7 +13,7 @@
<h1>BufferAttribute Types</h1>
<div class="desc">
There are nine types of [page:BufferAttribute] available in Three. These correspond to the JavaScript
There are nine types of [page:BufferAttribute] available in three.js. These correspond to the JavaScript
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax Typed Arrays].
</div>
......
......@@ -11,7 +11,7 @@
<h1>Deprecated API List</h1>
<div>
As Three.js has a rapidly evolving interface, you may come across examples that
As three.js has a rapidly evolving interface, you may come across examples that
suggest the use of API elements that are no longer part of the core.<br /><br />
Below is a list of such elements, along with info regarding their replacements.
......@@ -34,6 +34,8 @@
<h3>[page:AudioAnalyser]</h3>
<div>AudioAnalyser.getData() has been renamed to [page:AudioAnalyser.getFrequencyData]().</div>
<h3>[page:BinaryTextureLoader]</h3>
<div>BinaryTextureLoader has been renamed to [page:DataTextureLoader].</div>
......@@ -117,7 +119,7 @@
<h2>Core</h2>
<h3>[page:EventDispatcher]</h3>
<div>EventDispatcher.apply has been has been removed. Inherit or Object.assign the prototype to mix-in instead.</div>
<div>EventDispatcher.apply has been removed. Inherit or Object.assign the prototype to mix-in instead.</div>
<h3>[page:Raycaster]</h3>
<div>Raycaster.params.PointCloud has been renamed to [page:Raycaster.params.Points].</div>
......@@ -125,9 +127,9 @@
<h3>[page:Uniform]</h3>
<div>
Uniform.dynamic has been has been removed. Use object.onBeforeRender() instead.<br /><br />
Uniform.dynamic has been removed. Use object.onBeforeRender() instead.<br /><br />
Uniform.onUpdate has been has been removed. Use object.onBeforeRender() instead.
Uniform.onUpdate has been removed. Use object.onBeforeRender() instead.
</div>
......@@ -316,8 +318,7 @@
Matrix4.setRotationFromQuaternion() has been renamed to [page:Matrix4.makeRotationFromQuaternion]( quaternion ).<br /><br />
Matrix4.multiplyVector3() has been has been removed. Use vector.applyMatrix4( matrix )
or vector.applyProjection( matrix ) instead.<br /><br />
Matrix4.multiplyVector3() has been removed. Use vector.applyMatrix4( matrix ) instead.<br /><br />
Matrix4.multiplyVector4() has been removed. Use vector.applyMatrix4( matrix ) instead.<br /><br />
......@@ -355,6 +356,10 @@
Ray.isIntersectionSphere has been renamed to [page:Ray.intersectsSphere].
</div>
<h3>[page:Vector2]</h3>
<div>
Vector2.fromAttribute() has been renamed to [page:Vector2.fromBufferAttribute]().
</div>
<h3>[page:Vector3]</h3>
<div>
......@@ -366,12 +371,24 @@
Vector3.getScaleFromMatrix() has been renamed to [page:Vector3.setFromMatrixScale]().<br /><br />
Vector3.getColumnFromMatrix() has been renamed to [page:Vector3.setFromMatrixColumn]().
Vector3.getColumnFromMatrix() has been renamed to [page:Vector3.setFromMatrixColumn]().<br /><br />
Vector3.applyProjection() has been removed. Use [page:Vector3.applyMatrix4]() instead.<br /><br />
Vector3.fromAttribute() has been renamed to [page:Vector3.fromBufferAttribute]().
</div>
<h3>[page:Vector4]</h3>
<div>
Vector4.fromAttribute() has been renamed to [page:Vector4.fromBufferAttribute]().
</div>
<h3>[page:Vertex]</h3>
<div>Vertex has been removed. Use [page:Vector3] instead.</div>
<h3>[page:Spline]</h3>
<div>Spline has been removed. Use [page:CatmullRomCurve3] instead.</div>
......@@ -568,6 +585,9 @@
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/Three.Legacy.js src/Three.Legacy.js]
</body>
......
......@@ -86,6 +86,6 @@
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
[link:https://github.com/mrdoob/three.js/blob/master/src/extras/core/Path.js src/extras/core/Path.js]
</body>
</html>
......@@ -35,25 +35,24 @@
<h2>Example</h2>
<code>
var CustomSinCurve = THREE.Curve.create(
function CustomSinCurve( scale ){
function ( scale ) { //custom curve constructor
this.scale = ( scale === undefined ) ? 1 : scale;
this.scale = ( scale === undefined ) ? 1 : scale;
},
}
function ( t ) { //getPoint: t is between 0-1
CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
CustomSinCurve.prototype.constructor = CustomSinCurve;
var tx = t * 3 - 1.5;
var ty = Math.sin( 2 * Math.PI * t );
var tz = 0;
CustomSinCurve.prototype.getPoint = function ( t ) {
return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
var tx = t * 3 - 1.5;
var ty = Math.sin( 2 * Math.PI * t );
var tz = 0;
}
return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
);
};
var path = new CustomSinCurve( 10 );
var geometry = new THREE.TubeBufferGeometry( path, 20, 2, 8, false );
......
......@@ -35,25 +35,24 @@
<h2>Example</h2>
<code>
var CustomSinCurve = THREE.Curve.create(
function CustomSinCurve( scale ){
function ( scale ) { //custom curve constructor
this.scale = ( scale === undefined ) ? 1 : scale;
this.scale = ( scale === undefined ) ? 1 : scale;
},
}
function ( t ) { //getPoint: t is between 0-1
CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
CustomSinCurve.prototype.constructor = CustomSinCurve;
var tx = t * 3 - 1.5;
var ty = Math.sin( 2 * Math.PI * t );
var tz = 0;
CustomSinCurve.prototype.getPoint = function ( t ) {
return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
var tx = t * 3 - 1.5;
var ty = Math.sin( 2 * Math.PI * t );
var tz = 0;
}
return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
);
};
var path = new CustomSinCurve( 10 );
var geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
......
......@@ -24,7 +24,7 @@
<h2>A Note about Position, Target and rotation</h2>
<div>
A common point of confusion for directional lights is that setting the rotation has no effect.
This is because Three's DirectionalLight is the equivalent to what is often called a 'Target
This is because three.js's DirectionalLight is the equivalent to what is often called a 'Target
Direct Light' in other applications.<br /><br />
This means that its direction is calculated as pointing
......@@ -54,7 +54,6 @@
<code>
// White directional light at half intensity shining from the top.
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
directionalLight.position.set( 0, 1, 0 );
scene.add( directionalLight );
</code>
......
......@@ -95,7 +95,8 @@ scene.add( light );
<h3>[property:LightShadow shadow]</h3>
<div>
A [page:LightShadow] used to calculate shadows for this light.<br />
A [page:LightShadow] used to calculate shadows for this light.<br /><br />
The lightShadow's [page:LightShadow.camera camera]
is set to a [page:PerspectiveCamera] with [page:PerspectiveCamera.fov fov] of 90,
[page:PerspectiveCamera.aspect aspect] of 1, [page:PerspectiveCamera.near near]
......
......@@ -12,22 +12,86 @@
<h1>[name]</h1>
<div class="desc">TODO</div>
<div class="desc">
This used internally by [page:DirectionalLight DirectionalLights] for calculating shadows.<br /><br />
<h2>Constructor</h2>
Unlike the other shadow classes, this uses an [page:OrthographicCamera] to calculate the shadows,
rather than a [page:PerspectiveCamera]. This is because light rays from a [page:DirectionalLight]
are parallel.
</div>
<h2>Example</h2>
<div>
<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 );
The constructor creates an [page:OrthographicCamera OrthographicCamera] to manage the shadow's view of the world.
//Create a helper for the shadow camera (optional)
var helper = new THREE.CameraHelper( light.shadow.camera );
scene.add( helper );
</code>
</div>
<h2>Constructor</h2>
<h3>[name]( )</h3>
<div>
Creates a new [name]. This is not intended to be called directly - it is called
internally by [page:DirectionalLight].
</div>
<h2>Properties</h2>
<div>
See the base [page:LightShadow LightShadow] class for common properties.
</div>
See the base [page:LightShadow LightShadow] class for common properties.
<h3>[property:Camera camera]</h3>
<div>
The light's view of the world. This is used to generate a depth map of the scene; objects behind
other objects from the light's perspective will be in shadow.<br /><br />
<h2>Methods</h2>
The default is an [page:OrthographicCamera] with [page:OrthographicCamera.left left] and
[page:OrthographicCamera.bottom bottom] set to -5, [page:OrthographicCamera.right right]
and [page:OrthographicCamera.top top] set to 5, the [page:OrthographicCamera.near near]
clipping plane at 0.5 and the [page:OrthographicCamera.far far] clipping plane at 500.
</div>
See the base [page:LightShadow LightShadow] class for common methods.
<h2>Methods</h2>
<div>
See the base [page:LightShadow LightShadow] class for common methods.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
[link:https://github.com/mrdoob/three.js/blob/master/src/lights/[name].js src/lights/[name].js]
</body>
</html>
......@@ -11,65 +11,131 @@
<h1>[name]</h1>
<div class="desc">TODO</div>
<div class="desc">
This used internally by [page:PointLight PointLights] for calculating shadows, and also serves as
a base class for the other shadow classes.
</div>
<h2>Constructor</h2>
<h2>Example</h2>
<div>
<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>
</div>
<h2>Constructor</h2>
<h3>[name]( [page:Camera camera] )</h3>
<div>
[page:Camera camera] — The shadow's view of the world.
[page:Camera camera] - the light's view of the world.<br /><br />
Create a new [name]. This is not intended to be called directly - it is called
internally by [page:PointLight] or used as a base class by other light shadows.
</div>
<h2>Properties</h2>
<h3>[property:Camera camera]</h3>
<div>
The shadow's view of the world.
The light's view of the world. This is used to generate a depth map of the scene; objects behind
other objects from the light's perspective will be in shadow.
</div>
<h3>[property:Float bias]</h3>
<div>
Shadow map bias, how much to add or subtract from the normalized depth when deciding whether a surface is in shadow.<br />
Default — *0*.
The default is 0. Very tiny adjustments here (in the order of 0.0001) may help reduce artefacts in shadows
</div>
<h3>[property:Float radius]</h3>
<h3>[property:WebGLRenderTarget map]</h3>
<div>
TODO<br />
Default - *0*.
The depth map generated using the internal camera; a location beyond a pixel's depth is
in shadow. Computed internally during rendering.
</div>
<h3>[property:Vector2 mapSize]</h3>
<div>
The width and height of the shadow map stored in a [page:Vector2 Vector2].<br />
Default — *( 512, 512 )*.
A [Page:Vector2] defining the width and height of the shadow map.<br /><br />
Higher values give better quality shadows at the cost of computation time. Values must be
powers of 2, up to the [page:WebGLRenderer.capabilities].maxTextureSize for a given device,
although the width and height don't have to be the same (so, for example, (512, 1024) is valid).
The default is *( 512, 512 )*.
</div>
<h3>[property:WebGLRenderTarget map]</h3>
<h3>[property:Matrix4 matrix]</h3>
<div>
The depth map generated using the internal camera; a location beyond a pixel's depth is in shadow. Computed internally during rendering.
Model to shadow camera space, to compute location and depth in shadow map. Stored
in a [page:Matrix4 Matrix4]. This is computed internally during rendering.
</div>
<h3>[property:Matrix4 matrix]</h3>
<h3>[property:Float radius]</h3>
<div>
Model to shadow camera space, to compute location and depth in shadow map. Stored in a [page:Matrix4 Matrix4]. Computed internally during rendering.
Setting this this to values greater than 1 will blur the edges of the shadow.<br />
High values will cause unwanted banding effects in the shadows - a greater [page:.mapSize mapSize]
will allow for a higher value to be used here before these effects become visible.<br /><br />
Note that this has no effect if the [page:WebGLRenderer.shadowMap.type] is set to [page:Renderer BasicShadowMap].
</div>
<h2>Methods</h2>
<h3>[method:LightShadow copy]( [page:LightShadow source] )</h3>
<div>
Copies value of *source* to this LightShadow object.
Copies value of all the properties from the [page:LightShadow source] to this
SpotLight.
</div>
<h3>[method:LightShadow clone]()</h3>
<div>
It returns a clone of LightShadow.
Creates a new LightShadow with the same properties as this one.
</div>
<h3>[method:Object toJSON]()</h3>
<div>
Serialize this LightShadow.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
[link:https://github.com/mrdoob/three.js/blob/master/src/lights/[name].js src/lights/[name].js]
</body>
</html>
......@@ -49,6 +49,6 @@
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
[link:https://github.com/mrdoob/three.js/blob/master/src/lights/[name].js src/lights/[name].js]
</body>
</html>
......@@ -12,27 +12,86 @@
<h1>[name]</h1>
<div class="desc">TODO</div>
<div class="desc">
This used internally by [page:SpotLight SpotLights] for calculating shadows.
</div>
<h2>Example</h2>
<div>
<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>
</div>
<h2>Constructor</h2>
The constructor creates a [page:PerspectiveCamera PerspectiveCamera] to manage the shadow's view of the world.
<h2>Properties</h2>
See the base [page:LightShadow LightShadow] class for common properties.
<h2>Methods</h2>
<h3>[property:Camera camera]</h3>
<div>
The light's view of the world. This is used to generate a depth map of the scene; objects behind
other objects from the light's perspective will be in shadow.<br /><br />
The default is a [page:PerspectiveCamera] with [page:PerspectiveCamera.fov fov] of 90,
[page:PerspectiveCamera.aspect aspect] of 1, [page:PerspectiveCamera.near near]
clipping plane at 0.5 and [page:PerspectiveCamera.far far] clipping plane at 500.
</div>
<h3>[property:Boolean isSpotLightShadow]</h3>
<div>
Used to check whether this or derived classes are spot light shadows. Default is *true*.<br /><br />
You should not change this, as it used internally for optimisation.
</div>
<h2>Methods</h2>
See the base [page:LightShadow LightShadow] class for common methods.
<h3>[method:SpotLightShadow update]( [page:SpotLight light] )</h3>
<div>
Updates the internal perspective camera.
Updates the internal perspective [page:.camera camera] based on the passed in [page:SpotLight light].
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
[link:https://github.com/mrdoob/three.js/blob/master/src/lights/[name].js src/lights/[name].js]
</body>
</html>
<!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 class="desc">
Abstract base class to load generic binary textures formats (rgbe, hdr, ...).
This uses the [page:FileLoader] internally for loading files.
</div>
<h2>Examples</h2>
<div>
See the [link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/RGBELoader.js RGBELoader]
for an example of a derived class.
</div>
<h2>Constructor</h2>
<h3>[name]( [page:LoadingManager manager] )</h3>
<div>
[page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use.
Default is [page:LoadingManager THREE.DefaultLoadingManager].<br /><br />
Creates a new [name].
</div>
<h2>Properties</h2>
<h3>[property:LoadingManager manager]</h3>
<div>
The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
</div>
<h2>Methods</h2>
<h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
<div>
[page:String url] — the path or URL to the file. This can also be a
[link:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs Data URI].<br />
[page:Function onLoad] — Will be called when load completes. The argument will be the loaded texture.<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — Will be called when load errors.<br />
</div>
<div>
Begin loading from url and pass the loaded texture to onLoad.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
......@@ -10,9 +10,54 @@
<body>
<h1>[name]</h1>
<div class="desc">This is an alias for the [page:BinaryTextureLoader BinaryTextureLoader].
See that page for details.
<div class="desc">
Abstract base class to load generic binary textures formats (rgbe, hdr, ...).
This uses the [page:FileLoader] internally for loading files, and creates a new
[page:DataTexture].
</div>
<h2>Examples</h2>
<div>
See the [link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/RGBELoader.js RGBELoader]
for an example of a derived class.
</div>
<h2>Constructor</h2>
<h3>[name]( [page:LoadingManager manager] )</h3>
<div>
[page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use.
Default is [page:LoadingManager THREE.DefaultLoadingManager].<br /><br />
Creates a new [name].
</div>
<h2>Properties</h2>
<h3>[property:LoadingManager manager]</h3>
<div>
The [page:LoadingManager loadingManager] the loader is using. Default is [page:DefaultLoadingManager].
</div>
<h2>Methods</h2>
<h3>[method:null load]( [page:String url], [page:Function onLoad], [page:Function onProgress], [page:Function onError] )</h3>
<div>
[page:String url] — the path or URL to the file. This can also be a
[link:https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs Data URI].<br />
[page:Function onLoad] — Will be called when load completes. The argument will be the loaded texture.<br />
[page:Function onProgress] — Will be called while load progresses. The argument will be the XmlHttpRequest instance, that contain .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — Will be called when load errors.<br />
</div>
<div>
Begin loading from url and pass the loaded texture to onLoad.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
......@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
......@@ -70,6 +70,6 @@ THREE.DefaultLoadingManager.onError = function ( url ) {
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/loaders/loadingManager.js loadingManager.js]
[link:https://github.com/mrdoob/three.js/blob/master/src/loaders/LoadingManager.js src/loaders/LoadingManager.js]
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../" />
<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" />
......@@ -150,6 +150,6 @@
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
[link:https://github.com/mrdoob/three.js/blob/master/src/loaders/LoadingManager.js src/loaders/LoadingManager.js]
</body>
</html>
......@@ -256,7 +256,7 @@
<h3>[method:null toJSON]( [page:object meta] )</h3>
<div>
meta -- object containing metadata such as textures or images for the material.<br />
Convert the material to Three JSON format.
Convert the material to three.js JSON format.
</div>
<h3>[method:null update]()</h3>
......
......@@ -48,7 +48,7 @@
</li>
</ul>
Technical details of the approach used in Three (and most other PBR systems) can be found is this
Technical details of the approach used in three.js (and most other PBR systems) can be found is this
[link:https://disney-animation.s3.amazonaws.com/library/s2012_pbs_disney_brdf_notes_v2.pdf paper from Disney] (pdf),
by Brent Burley.
</div>
......
......@@ -42,12 +42,12 @@
//The following will create a cube with a different material applied to each side
var materials = [
new THREE.MeshBasicMaterial( { color: 0xff0000 ) } ), // right
new THREE.MeshBasicMaterial( { color: 0x0000ff ) } ), // left
new THREE.MeshBasicMaterial( { color: 0x00ff00 ) } ), // top
new THREE.MeshBasicMaterial( { color: 0xffff00 ) } ), // bottom
new THREE.MeshBasicMaterial( { color: 0x00ffff ) } ), // back
new THREE.MeshBasicMaterial( { color: 0xff00ff ) } ) // front
new THREE.MeshBasicMaterial( { color: 0xff0000 } ), // right
new THREE.MeshBasicMaterial( { color: 0x0000ff } ), // left
new THREE.MeshBasicMaterial( { color: 0x00ff00 } ), // top
new THREE.MeshBasicMaterial( { color: 0xffff00 } ), // bottom
new THREE.MeshBasicMaterial( { color: 0x00ffff } ), // back
new THREE.MeshBasicMaterial( { color: 0xff00ff } ) // front
];
......@@ -100,7 +100,7 @@ scene.add( cubeMesh );
<h3>[method:null toJSON]( [page:object meta] )</h3>
<div>
meta -- object containing metadata such as textures or images for the material.<br />
Convert the material to Three JSON format.
Convert the material to three.js JSON format.
</div>
<h2>Source</h2>
......
......@@ -44,13 +44,13 @@ for ( var i = 0; i < 10000; i ++ ) {
star.y = THREE.Math.randFloatSpread( 2000 );
star.z = THREE.Math.randFloatSpread( 2000 );
geometry.vertices.push( star );
starsGeometry.vertices.push( star )
}
var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } )
var starField = new THREE.Points( geometry, starsMaterial );
var starField = new THREE.Points( starsGeometry, starsMaterial );
scene.add( starField );
</code>
......
......@@ -51,7 +51,7 @@ var color = new THREE.Color( 1, 0, 0 );
[page:Float g] - (optional) The green component of the color if it is defined.<br />
[page:Float b] - (optional) The blue component of the color if it is defined.<br /><br />
Note that standard method of specifying color in Three is with a [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet], and that method is used
Note that standard method of specifying color in three.js is with a [link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet], and that method is used
throughout the rest of the documentation.<br /><br />
When all arguments are defined then r is the red component, g is the green component and b is the blue component of the color.<br />
......
......@@ -38,8 +38,8 @@ m.elements = [ 11, 21, 31,
</code>
and internally all calculations are performed using column-major ordering. However, as the actual ordering
makes no difference mathematically and most people are used to thinking about matrices in row-major order,
the Three.js documentation shows matrices in row-major order. Just bear in mind that if you are reading the source
code, you'll have to take the transpose of any matrices outlined here to make sense of the calculations.
the three.js documentation shows matrices in row-major order. Just bear in mind that if you are reading the source
code, you'll have to take the [link:https://en.wikipedia.org/wiki/Transpose transpose] of any matrices outlined here to make sense of the calculations.
</div>
<h2>Constructor</h2>
......@@ -78,7 +78,7 @@ m.elements = [ 11, 21, 31,
Multiplies (applies) this matrix to every 3D vector in the [page:BufferAttribute attribute].
</div>
<h3>[method:Matrix3 clone]()</h3>
<div>Creates a new Matrix3 and with identical elements to this one.</div>
......
......@@ -40,7 +40,7 @@
[page:Camera Cameras] have two additional matrix4s:
<ul>
<li>
[page:Object3D.matrixWorldInverse]: The inverse of the [page:Object3D.matrixWorld] descibed above.
[page:Object3D.matrixWorldInverse]: The inverse of the [page:Object3D.matrixWorld] described above.
</li>
<li>
[page:Object3D.projectionMatrix]:
......@@ -48,13 +48,6 @@
</ul>
</div>
<h2>Example</h2>
<code>
var m = new Matrix4();
</code>
<h2>A Note on Row-Major and Column-Major Ordering</h2>
<div>
The [page:set]() method takes arguments in [link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order row-major]
......@@ -62,21 +55,25 @@ var m = new Matrix4();
This means that calling
<code>
var m = new Matrix4();
m.set( 11, 12, 13, 14,
21, 22, 23, 24,
31, 32, 33, 34 );
31, 32, 33, 34,
41, 42, 43, 44 );
</code>
will result in the [page:.elements elements] array containing:
<code>
m.elements = [ 11, 21, 31, 41,
12, 22, 32, 42,
13, 23, 33, 43 ];
13, 23, 33, 43,
14, 24, 34, 44 ];
</code>
and internally all calculations are performed using column-major ordering. However, as the actual ordering
makes no difference mathematically and most people are used to thinking about matrices in row-major order,
the Three.js documentation shows matrices in row-major order. Just bear in mind that if you are reading the source
code, you'll have to take the transpose of any matrices outlined here to make sense of the calculations.
the three.js documentation shows matrices in row-major order. Just bear in mind that if you are reading the source
code, you'll have to take the [link: https://en.wikipedia.org/wiki/Transpose transpose] of any matrices outlined here to make sense of the calculations.
</div>
......
<!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 class="desc">
Class representing a [link:https://en.wikipedia.org/wiki/Spline_(mathematics) spline].<br /><br />
</div>
<h2>Examples</h2>
<div>
[example:webgl_lines_splines WebGL / lines / splines]<br />
[example:webgl_lines_dashed WebGL / lines / dashed]<br />
[example:software_sandbox Software / sandbox]<br />
[example:canvas_lines_dashed Canvas / lines / dashed]
</div>
<h2>Constructor</h2>
<h3>[name]( [page:Array points] )</h3>
<div>
Initialises the spline with [page:Array points], which are the [page:Vector3 Vector3s]
through which the spline will pass.
</div>
<h2>Properties</h2>
<h3>[property:Array points]</h3>
<h2>Methods</h2>
<h3>[method:Array getControlPointsArray]( )</h3>
<div>
Returns an array with triplets of [ x, y, z ] coordinates that correspond to the
current control points.
</div>
<h3>[method:Vector3 getPoint]( [page:Integer k] )</h3>
<div>
[page:Integer k] — point index<br /><br />
Return the interpolated point at [page:Integer k].
</div>
<h3>[method:Object getLength]( [page:Integer nSubDivisions] )</h3>
<div>
[page:Integer nSubDivisions] — number of subdivisions between control points. Default is *100*.<br /><br />
Returns an object with the two properties. The property <strong>[page:Number total]</strong> contains
the length of the spline when using [page:Integer nSubDivisions]. The property [page:Array chunkLength]
contains an array with the total length from the beginning of the spline to the end of that chunk.
</div>
<h3>[method:null initFromArray]( [page:Array a] )</h3>
<div>
[page:Array a] — array of the form
<code>
var a = [ [x1, y1, z1], [x2, y2, z2], ... ];
</code>
from which to initialise the points array.<br /><br />
Initialises using the data in the array as a series of points. Each value in *a* must
be another array with three values, where a[n] is v, the value for the *nth* point,
and v[0], v[1] and v[2] are the x, y and z coordinates of that point n, respectively.
</div>
<h3>[method:Vector3 interpolate]( p0, p1, p2, p3, t, t2, t3 )</h3>
<div>
</div>
<h3>[method:null reparametrizeByArcLength]( [page:Float samplingCoef] )</h3>
<div>
[page:Float samplingCoef] — how many intermediate values to use between spline points<br /><br />
Modifies the spline so that it looks similar to the original but has its points distributed
in such way that moving along the spline it's done at a more or less constant speed.
The points should also appear more uniformly spread along the curve.
This is done by resampling the original spline, with the density of sampling controlled by [page:Float samplingCoef].
Here it's interesting to note that denser sampling is not necessarily better:
if sampling is too high, you may get weird kinks in curvature.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
......@@ -21,7 +21,7 @@
A point in 2D space (i.e. a position on a plane).
</li>
<li>
A direction and length across a plane. In Three the length will always be the
A direction and length across a plane. In three.js the length will always be the
[link:https://en.wikipedia.org/wiki/Euclidean_distance Euclidean distance]
(straight-line distance) from (0, 0) to (x, y) and the direction is also
measured from (0, 0) towards (x, y).
......@@ -32,7 +32,7 @@
</ul>
There are other things a 2D vector can be used to represent, such as momentum
vectors, complex numbers and so on, however these are the most common uses in Three.
vectors, complex numbers and so on, however these are the most common uses in three.js.
</div>
<h2>Example</h2>
......@@ -184,11 +184,10 @@
Sets this vector's [page:.x x] value to be array[0] and [page:.y y] value to be array[1].
</div>
<h3>[method:Vector2 fromAttribute]( [page:BufferAttribute attribute], [page:Integer index], [page:Integer offset] )</h3>
<h3>[method:Vector2 fromBufferAttribute]( [page:BufferAttribute attribute], [page:Integer index] )</h3>
<div>
[page:BufferAttribute attribute] - the source attribute.<br />
[page:Integer index] - index in the attribute.<br /><br />
[page:Integer offset] - (optional) offset into the attribute. Default is 0.<br /><br />
Sets this vector's [page:.x x] and [page:.y y] values from the [page:BufferAttribute attribute].
</div>
......
......@@ -20,7 +20,7 @@
A point in 3D space.
</li>
<li>
A direction and length in 3D space. In Three the length will always be the
A direction and length in 3D space. In three.js the length will always be the
[link:https://en.wikipedia.org/wiki/Euclidean_distance Euclidean distance]
(straight-line distance) from (0, 0, 0) to (x, y, z) and the direction is also
measured from (0, 0, 0) towards (x, y, z).
......@@ -31,7 +31,7 @@
</ul>
There are other things a 3D vector can be used to represent, such as momentum
vectors and so on, however these are the most common uses in Three.
vectors and so on, however these are the most common uses in three.js.
</div>
......@@ -108,29 +108,7 @@ var d = a.distanceTo( b );
<h3>[method:Vector3 applyMatrix4]( [page:Matrix4 m] )</h3>
<div>
Multiply this vector by 4 x 3 subset of a [page:Matrix4 m]. If [page:Matrix4 m] is:
<code>
a, b, c, d,
e, f, g, h,
i, j, k, l,
m, n, o, p
</code>
Then the 4 x 3 matrix will be:
<code>
a, b, c,
e, f, g,
i, j, k,
m, n, o
</code>
Note that the input matrix [page:Matrix4 m] is assumed to be
[link:https://en.wikipedia.org/wiki/Affine_transformation affine].
</div>
<h3>[method:Vector3 applyProjection]( [page:Matrix4 m] )</h3>
<div>
[page:Matrix4 m] - [page:Matrix4] projection matrix.<br /><br />
Multiplies this vector and m, and divides by perspective.
Multiplies this vector (with an implicit 1 in the 4th dimension) and m, and divides by perspective.
</div>
<h3>[method:Vector3 applyQuaternion]( [page:Quaternion quaternion] )</h3>
......@@ -242,11 +220,10 @@ m, n, o
and [page:.z z] value to be array[ offset + 2 ].
</div>
<h3>[method:Vector3 fromAttribute]( [page:BufferAttribute attribute], [page:Integer index], [page:Integer offset] )</h3>
<h3>[method:Vector3 fromBufferAttribute]( [page:BufferAttribute attribute], [page:Integer index] )</h3>
<div>
[page:BufferAttribute attribute] - the source attribute.<br />
[page:Integer index] - index in the attribute.<br /><br />
[page:Integer offset] - (optional) offset into the attribute. Default is 0.<br /><br />
Sets this vector's [page:.x x], [page:.y y] and [page:.z z] values from the [page:BufferAttribute attribute].
</div>
......
......@@ -20,7 +20,7 @@
A point in 4D space.
</li>
<li>
A direction and length in 4D space. In Three the length will always be the
A direction and length in 4D space. In three.js the length will always be the
[link:https://en.wikipedia.org/wiki/Euclidean_distance Euclidean distance]
(straight-line distance) from (0, 0, 0, 0, 0) to (x, y, z, w) and the direction is also
measured from (0, 0, 0, 0) towards (x, y, z, w).
......@@ -30,7 +30,7 @@
</li>
</ul>
There are other things a 4D vector can be used to represent, however these are the most common uses in Three.
There are other things a 4D vector can be used to represent, however these are the most common uses in three.js.
</div>
......@@ -157,11 +157,10 @@ var d = a.distanceTo( b );
[page:.z z] value to be array[ offset + 2 ] and [page:.w w ] value to be array[ offset + 3 ].
</div>
<h3>[method:Vector4 fromAttribute]( [page:BufferAttribute attribute], [page:Integer index], [page:Integer offset] )</h3>
<h3>[method:Vector4 fromBufferAttribute]( [page:BufferAttribute attribute], [page:Integer index] )</h3>
<div>
[page:BufferAttribute attribute] - the source attribute.<br />
[page:Integer index] - index in the attribute.<br /><br />
[page:Integer offset] - (optional) offset into the attribute. Default is 0.<br /><br />
Sets this vector's [page:.x x], [page:.y y], [page:.z z] and [page:.w w] values from the [page:BufferAttribute attribute].
</div>
......
......@@ -14,7 +14,7 @@
<div class="desc">
Class representing triangular [link:https://en.wikipedia.org/wiki/Polygon_mesh polygon mesh] based objects.
Also serves as a base for other classes such as [page:MorphAnimMesh] and [page:SkinnedMesh].
Also serves as a base for other classes such as [page:MorphBlendMesh] and [page:SkinnedMesh].
</div>
......
......@@ -48,7 +48,7 @@
<h3>[property:Image image]</h3>
<div>
An image object, typically created using the [page:TextureLoader.load] method.
This can be any image (e.g., PNG, JPG, GIF, DDS) or video (e.g., MP4, OGG/OGV) type supported by Three.<br /><br />
This can be any image (e.g., PNG, JPG, GIF, DDS) or video (e.g., MP4, OGG/OGV) type supported by three.js.<br /><br />
To use video as a texture you need to have a playing HTML5
video element as a source for your texture image and continuously update this texture
......@@ -84,7 +84,7 @@
NOTE: tiling of images in textures only functions if image dimensions are powers of two
(2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, ...) in terms of pixels.
Individual dimensions need not be equal, but each must be a power of two.
This is a limitation of WebGL, not Three.js.
This is a limitation of WebGL, not three.js.
</div>
<h3>[property:number magFilter]</h3>
......@@ -202,7 +202,7 @@
<h3>[method:Texture toJSON]( meta )</h3>
<div>
meta -- optional object containing metadata.<br />
Convert the material to Three JSON format.
Convert the material to three.js JSON format.
</div>
<h3>[method:null dispose]()</h3>
......
......@@ -133,7 +133,7 @@
value -- the data value to be displayed as a color.
</div>
<div>
Returns a Three.Color.
Returns a [page:Color].
</div>
<h2>Source</h2>
......
......@@ -16,7 +16,7 @@
API.<br /><br />
<b>
NOTE: The Canvas renderer has been deprecated and is no longer part of the Three.js core.
NOTE: The Canvas renderer has been deprecated and is no longer part of the three.js core.
</b>
If you still need to use it you can find it here: [link:https://github.com/mrdoob/three.js/blob/master/examples/js/[path].js examples/js/[path].js].<br /><br />
......
var list = {
"Manual": {
"Introduction": [
"Getting Started": [
[ "Creating a scene", "manual/introduction/Creating-a-scene" ],
[ "Detecting WebGL and browser compatibility", "manual/introduction/Detecting-WebGL-and-browser-compatibility" ],
[ "How to run things locally", "manual/introduction/How-to-run-thing-locally" ],
[ "Drawing Lines", "manual/introduction/Drawing-lines" ],
[ "Creating Text", "manual/introduction/Creating-text" ],
[ "Migration Guide", "manual/introduction/Migration-guide" ],
[ "Code Style Guide", "manual/introduction/Code-style-guide" ],
[ "FAQ", "manual/introduction/FAQ" ],
[ "Useful links", "manual/introduction/Useful-links" ]
],
"Next Steps": [
[ "How to update things", "manual/introduction/How-to-update-things" ],
[ "Matrix transformations", "manual/introduction/Matrix-transformations" ]
],
"Build Tools": [
[ "Testing with NPM", "manual/buildTools/Testing-with-NPM" ]
]
},
......@@ -71,7 +87,7 @@ var list = {
[ "Layers", "api/core/Layers" ],
[ "Object3D", "api/core/Object3D" ],
[ "Raycaster", "api/core/Raycaster" ],
[ "Uniform", "api/core/Uniform"]
[ "Uniform", "api/core/Uniform" ]
],
"Core / BufferAttributes": [
......@@ -195,7 +211,6 @@ var list = {
"Loaders": [
[ "AnimationLoader", "api/loaders/AnimationLoader" ],
[ "AudioLoader", "api/loaders/AudioLoader" ],
[ "BinaryTextureLoader", "api/loaders/BinaryTextureLoader" ],
[ "BufferGeometryLoader", "api/loaders/BufferGeometryLoader" ],
[ "Cache", "api/loaders/Cache" ],
[ "CompressedTextureLoader", "api/loaders/CompressedTextureLoader" ],
......@@ -212,8 +227,8 @@ var list = {
],
"Loaders / Managers": [
[ "DefaultLoadingManager", "api/loaders/DefaultLoadingManager" ],
[ "LoadingManager", "api/loaders/LoadingManager" ]
[ "DefaultLoadingManager", "api/loaders/managers/DefaultLoadingManager" ],
[ "LoadingManager", "api/loaders/managers/LoadingManager" ]
],
"Materials": [
......@@ -253,7 +268,6 @@ var list = {
[ "Ray", "api/math/Ray" ],
[ "Sphere", "api/math/Sphere" ],
[ "Spherical", "api/math/Spherical" ],
[ "Spline", "api/math/Spline" ],
[ "Triangle", "api/math/Triangle" ],
[ "Vector2", "api/math/Vector2" ],
[ "Vector3", "api/math/Vector3" ],
......
<!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 class="desc">
This article shows how to get three.js into a [link:https://nodejs.org/en/ node.js] environment so that you
can execute automated tests. Tests can be run on the command line, or by automated
CI tools like [link:https://travis-ci.org/ Travis].
</div>
<h2>The short version</h2>
<div>
If you're comfortable with node and npm,
<code>
$ npm install three --save-dev
</code>
and add
<code>
var THREE = require('three');
</code>
to your test.
</div>
<h2>Create a testable project from scratch</h2>
<div>
If you're not familiar with these tools, here's a quick guide (for linux, the installation process
will be slightly different using windows, but the NPM commands are identical).
</div>
<h3>Basic setup</h3>
<div>
<ol>
<li>
Install [link:https://www.npmjs.org/ npm] and nodejs. The shortest path typically looks something like
<code>
$ sudo apt-get install -y npm nodejs-legacy
# fix any problems with SSL in the default registry URL
$ npm config set registry http://registry.npmjs.org/
</code>
</li>
<li>
Make a new project directory
<code>
$ mkdir test-example; cd test-example
</code>
</li>
<li>
Ask npm to create a new project file for you:
<code>
$ npm init
</code>
and accept all defaults by hitting Enter on all the prompts.
This will create package.json.
</li><br />
<li>
Try and start the test feature with
<code>
$ npm test
</code>
This will fail, which is expected.
If you look in the package.json, the definition of the test script is
<code>
"test": "echo \"Error: no test specified\" && exit 1"
</code>
</li>
</ol>
</div>
<h2>Add mocha</h2>
<div>
We're going to use [link:https://mochajs.org/ mocha].
<ol>
<li>
Install mocha with
<code>
$ npm install mocha --save-dev
</code>
Notice that node_modules/ is created and your dependencies appear in there.
Also notice that your package.json has been updated: the property devDependencies
is added and updated by the use of --save-dev.
</li><br />
<li>
Edit package.json to use mocha for testing. When test is invoked, we just want to run
mocha and specify a verbose reporter. By default this will run anything in test/
(not having directory test/ can run into npm ERR!, create it by mkdir test)
<code>
"test": "mocha --reporter list"
</code>
</li>
<li>
Rerun the test with
<code>
$ npm test.
</code>
This should now succeed, reporting 0 passing (1ms)
or similar.
</li>
</ol>
</div>
<h2>Add three.js</h2>
<div>
<ol>
<li>
Let's pull in our three.js dependency with
<code>
$ npm install three --save-dev
</code>
<ul>
<li>
If you need a different three version, use
<code>
$ npm show three versions
</code>
to see
what's available. To tell npm the right one, use
<code>
$ npm install three@0.84.0 --save
</code>
(0.84.0 in this example). --save makes this a dependency of this project, rather than
dev dependency. See the docs [link:https://www.npmjs.org/doc/json.html here] for more info.
</li>
</ul>
</li>
<li>
Mocha will look for tests in test/, so let's
<code>
$ mkdir test.
</code>
</li>
<li>
Finally we actually need a JS test to run. Let's add a simple test that will verify that
the three.js object is available and working. Create test/verify-three.js containing:
<code>
var THREE = require('three');
var assert = require("assert");
describe('The THREE object', function() {
it('should have a defined BasicShadowMap constant', function() {
assert.notEqual('undefined', THREE.BasicShadowMap);
}),
it('should be able to construct a Vector3 with default of x=0', function() {
var vec3 = new THREE.Vector3();
assert.equal(0, vec3.x);
})
})
</code>
</li>
<li>
Finally let's test again with $ npm test. This should run the tests above and succeed,
showing something like:
<code>
The THREE object should have a defined BasicShadowMap constant: 0ms
The THREE object should be able to construct a Vector3 with default of x=0: 0ms
2 passing (8ms)
</code>
</li>
</ol>
</div>
<h2>Add your own code</h2>
<div>
You need to do three things:
<ol>
<li>
Write a test for the expected behaviour of your code, and place it under test/.
[linkk:https://github.com/air/encounter/blob/master/test/Physics-test.js Here] is an example from a real project.
</li>
<li>
Export your functional code in such a way that nodejs can see it, for use in conjunction with require.
See it [link:https://github.com/air/encounter/blob/master/js/Physics.js here].
</li>
<li>
Require your code into the test file, in the same way we did a require('three') in the example above.
</li>
</ol>
Items 2 and 3 will vary depending on how you manage your code. In the example of Physics.js
given above, the export part is right at the end. We assign an object to module.exports:
<code>
//=============================================================================
// make available in nodejs
//=============================================================================
if (typeof exports !== 'undefined')
{
module.exports = Physics;
}
</code>
</div>
<h2>Dealing with dependencies</h2>
<div>
<p>
If you're already using something clever like require.js or browserify, skip this part.
</p>
<p>
Typically a three.js project is going to run in the browser. Module loading is hence done by
the browser executing a bunch of script tags. Your individual files don't have to worry
about dependencies. In a nodejs context however, there is no index.html binding everything
together, so you have to be explicit.
</p>
<p>
If you're exporting a module that depends on other files, you're going to have to tell node to load them.
Here is one approach:
</p>
<ol>
<li>
At the start of your module, check to see if you're in a nodejs environment.
</li>
<li>
If so, explicitly declare your dependencies.
</li>
<li>
If not, you're probably in a browser so you don't need to do anything else.
</li>
</ol>
Example code from Physics.js:
<code>
//=============================================================================
// setup for server-side testing
//=============================================================================
if (typeof require === 'function') // test for nodejs environment
{
var THREE = require('three');
var MY3 = require('./MY3.js');
}
</code>
</div>
</body>
</html>
<!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]</a></h1>
<div class="desc">
All code and examples in three.js are written using Mr.doob's Code Style.
Of course you are free to use whatever style you prefer for your own work, but
if you are adding code to the library or examples then you must follow this guide.<br /><br />
You can find details
<a href="https://github.com/mrdoob/three.js/wiki/Mr.doob%27s-Code-Style%E2%84%A2">here</a>.
</div>
</body>
</html>
......@@ -10,18 +10,18 @@
<body>
<h1>[name]</h1><br />
<div>The goal of this section is to give a brief introduction to Three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page in case you get stuck and need help.</div>
<div>The goal of this section is to give a brief introduction to three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page in case you get stuck and need help.</div>
<h2>Before we start</h2>
<div>Before you can use Three.js, you need somewhere to display it. Save the following HTML to a file on your computer, along with a copy of <a href="http://threejs.org/build/three.js">three.js</a> in the js/ directory, and open it in your browser.</div>
<div>Before you can use three.js, you need somewhere to display it. Save the following HTML to a file on your computer, along with a copy of <a href="http://threejs.org/build/three.js">three.js</a> in the js/ directory, and open it in your browser.</div>
<code>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=utf-8&gt;
&lt;title&gt;My first Three.js app&lt;/title&gt;
&lt;title&gt;My first three.js app&lt;/title&gt;
&lt;style&gt;
body { margin: 0; }
canvas { width: 100%; height: 100% }
......@@ -40,7 +40,7 @@
<h2>Creating the scene</h2>
<div>To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.</div>
<div>To actually be able to display anything with three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.</div>
<code>
var scene = new THREE.Scene();
......@@ -51,13 +51,13 @@
document.body.appendChild( renderer.domElement );
</code>
<div>Let's take a moment to explain what's going on here. We have now set up the scene, our camera and the renderer. There are a few different cameras in Three.js. For now, let's use a PerspectiveCamera. The first attribute is the <strong>field of view</strong>.</div>
<div>Let's take a moment to explain what's going on here. We have now set up the scene, our camera and the renderer. There are a few different cameras in three.js. For now, let's use a PerspectiveCamera. The first attribute is the <strong>field of view</strong>.</div>
<div>The second one is the <strong>aspect ratio</strong>. You almost always want to use the width of the element divided by the height, or you'll get the same result as when you play old movies on a widescreen TV - the image looks squished.</div>
<div>The next two attributes are the <strong>near</strong> and <strong>far</strong> clipping plane. What that means, is that objects further away from the camera than the value of <strong>far</strong> or closer than <strong>near</strong> won't be rendered. You don't have to worry about this now, but you may want to use other values in your apps to get better performance.</div>
<div>Next up is the renderer. This is where the magic happens. In addition to the WebGLRenderer we use here, Three.js comes with a few others, often used as fallbacks for users with older browsers or for those who don't have WebGL support for some reason.</div>
<div>Next up is the renderer. This is where the magic happens. In addition to the WebGLRenderer we use here, three.js comes with a few others, often used as fallbacks for users with older browsers or for those who don't have WebGL support for some reason.</div>
<div>In addition to creating the renderer instance, we also need to set the size at which we want it to render our app. It's a good idea to use the width and height of the area we want to fill with our app - in this case, the width and height of the browser window. For performance intensive apps, you can also give <strong>setSize</strong> smaller values, like <strong>window.innerWidth/2</strong> and <strong>window.innerHeight/2</strong>, which will make the app render at half size.</div>
......@@ -113,14 +113,14 @@
</div>
<h2>The result</h2>
<div>Congratulations! You have now completed your first Three.js application. It's simple, you have to start somewhere.</div>
<div>Congratulations! You have now completed your first three.js application. It's simple, you have to start somewhere.</div>
<div>The full code is available below. Play around with it to get a better understanding of how it works.</div>
<code>
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;My first Three.js app&lt;/title&gt;
&lt;title&gt;My first three.js app&lt;/title&gt;
&lt;style&gt;
body { margin: 0; }
canvas { width: 100%; height: 100% }
......
<!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>
There are often times when you might need to use text in your three.js application - here are
a couple of ways that you can do so.
</p>
</div>
<h2>1. DOM + CSS</h2>
<div>
<p>
Using HTML is generally the easiest and fastest manner to add text. This is the method
used for descriptive overlays in most three.js examples.
</p>
<p>You can add content to a</p>
<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code>
<p>
and use CSS markup to position absolutely at a position above all others with a
z-index especially if you are running three.js full screen.
</p>
<code>
#info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
</code>
</div>
<h2>2. Draw text to canvas and use as a [page:Texture]</h2>
<div>
<p>Use this method if you wish to draw text easily on a plane in your three.js scene.</p>
</div>
<h2>3. Create a model in your favourite 3D application and export to three.js</h2>
<div>
<p>Use this method if you prefer working with your 3d applications and importing the models to three.js</p>
</div>
<h2>4. Procedural Text Geometry</h2>
<div>
<p>
Use this method if you prefer to work purely in three.js or create procedural and dynamic 3d
text geometries. However, font data files <a href="http://typeface.neocracy.org/fonts.html">http://typeface.neocracy.org/fonts.html</a>
in the typeface.js format needs to be loaded.
</p>
<p>A Text Geometry can then be created with </p>
<code>new THREE.TextGeometry( text, parameters );</code>
<h3>Examples</h3>
[example:webgl_geometry_text WebGL / geometry / text]<br />
[example:canvas_geometry_text canvas / geometry / text]<br />
[example:webgl_shadowmap WebGL / shadowmap]
<p>
If Typeface is down, or you want to use a font that is not there, there's a tutorial
with a python script for blender that allows you to export text to Three.js's JSON format:
[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
</p>
</div>
</body>
</html>
<!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>
Even though this is becoming less and less of a problem, some devices or browsers may still not support WebGL.
The following method allows you to check if it is supported and display a message to the user if it is not.
</p>
<p>
Add [link:https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js]
to your javascript and run the following before attempting to render anything.
</p>
<code>
if (Detector.webgl) {
init();
animate();
} else {
var warning = Detector.getWebGLErrorMessage();
document.getElementById('container').appendChild(warning);
}
</code>
</body>
</html>
<!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>
Let's say you want to draw a line or a circle, not a wireframe [page:Mesh].
First we need to setup the [page:WebGLRenderer renderer], [page:Scene scene] and camera (see the Creating a scene page).
</p>
<p>Here is the code that we will use:</p>
<code>
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
camera.position.set(0, 0, 100);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var scene = new THREE.Scene();
</code>
<p>Next thing we will do is define a material. For lines we have to use [page:LineBasicMaterial] oe [page:LineDashedMaterial].</p>
<code>
//create a blue LineBasicMaterial
var material = new THREE.LineBasicMaterial({ color: 0x0000ff });
</code>
<p>
After material we will need a [page:Geometry] or [page:BufferGeometry] with some vertices
(it's reccomended to use a BufferGeometry as it's more performant, however for simplicity we'll use a Geometry here):
</p>
<code>
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
geometry.vertices.push(new THREE.Vector3(0, 10, 0));
geometry.vertices.push(new THREE.Vector3(10, 0, 0));
</code>
<p>Note that lines are drawn between each consecutive pair of vertices, but not between the first and last (the line is not closed.)</p>
<p>Now that we have points for two lines and a material, we can put them together to form a line.</p>
<code>
var line = new THREE.Line(geometry, material);
</code>
<p>All that's left is to add it to the scene and call [page:WebGLRenderer.render render].</p>
<code>
scene.add(line);
renderer.render(scene, camera);
</code>
<p>You should now be seeing a arrow pointing upwards, made from two blue lines.</p>
</div>
</body>
</html>
<!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>
<h2>Which Import Format/Exporter is best supported?</h2>
<div>
TODO
</div>
<h2>Why are there meta viewport tags in examples?</h2>
<div>
<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">meta</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>viewport<span class="pl-pds">"</span></span> <span class="pl-e">content</span>=<span class="pl-s"><span class="pl-pds">"</span>width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0<span class="pl-pds">"</span></span>&gt;</pre></div>
<p>These tags control viewport size and scale for mobile browsers (where page content may be rendered at different size than visible viewport).</p>
<p><a href="http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html</a></p>
<p><a href="https://developer.mozilla.org/en/Mobile/Viewport_meta_tag">https://developer.mozilla.org/en/Mobile/Viewport_meta_tag</a></p>
</div>
<h2>How can scene scale be preserved on resize?</h2>
<div>
We want all objects, regardless of their distance from the camera, to appear the same size, even as the window is resized.
The key equation to solving this is this formula for the visible height at a given distance:
<code>s
visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
</code>
If we increase the window height by a certain percentage, then what we want is the visible height at all distances
to increase by the same percentage.
This can not be done by changing the camera position. Instead you have to change the camera field-of-view.
[link:http://jsfiddle.net/Q4Jpu/ Example].
</div>
<h2>Why is part of my object invisible?</h2>
<div>
This could be because of face culling. Faces have an orientation that decides which side is which. And the culling removes the backside in normal circumstances. To see if this is your problem, change the material side to THREE.DoubleSide.
<code>material.side = THREE.DoubleSide</code>
</div>
</body>
</html>
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册