static
This commit is contained in:
蔡玲
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<base href="../../../../" />
|
||||
<script src="page.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="page.css" />
|
||||
</head>
|
||||
<body>
|
||||
[page:LightShadow] →
|
||||
|
||||
<h1>[name]</h1>
|
||||
|
||||
<p class="desc">
|
||||
这是用于在[page:DirectionalLight DirectionalLights]内部计算阴影<br /><br />
|
||||
|
||||
与其他阴影类不同，它是使用OrthographicCamera来计算阴影，而不是PerspectiveCamera。这是因为来自DirectionalLight的光线是平行的。
|
||||
</p>
|
||||
|
||||
<h2>代码示例</h2>
|
||||
<code>
|
||||
//Create a WebGLRenderer and turn on shadows in the renderer
|
||||
const 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
|
||||
const 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)
|
||||
const sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );
|
||||
const sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
|
||||
const 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)
|
||||
const planeGeometry = new THREE.PlaneGeometry( 20, 20, 32, 32 );
|
||||
const planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
|
||||
const plane = new THREE.Mesh( planeGeometry, planeMaterial );
|
||||
plane.receiveShadow = true;
|
||||
scene.add( plane );
|
||||
|
||||
//Create a helper for the shadow camera (optional)
|
||||
const helper = new THREE.CameraHelper( light.shadow.camera );
|
||||
scene.add( helper );
|
||||
</code>
|
||||
|
||||
<h2>构造函数</h2>
|
||||
<h3>[name]( )</h3>
|
||||
<p>
|
||||
创建一个新的[name]，不能直接调用-它是在[page:DirectionalLight DirectionalLights]内部调用使用
|
||||
|
||||
</p>
|
||||
|
||||
<h2>属性</h2>
|
||||
<p>
|
||||
参阅[page:LightShadow LightShadow]类来了解常用的基本属性
|
||||
</p>
|
||||
|
||||
<h3>[property:Camera camera]</h3>
|
||||
<p>
|
||||
在光的世界里。这用于生成场景的深度图;从光的角度来看，其他物体背后的物体将处于阴影中。<br /><br />
|
||||
</p>
|
||||
|
||||
<h2>方法</h2>
|
||||
<p>
|
||||
有关常用方法，请参阅基础[page:LightShadow LightShadow]类。
|
||||
</p>
|
||||
|
||||
<h2>源码</h2>
|
||||
|
||||
<p>
|
||||
[link:https://github.com/mrdoob/three.js/blob/master/src/lights/[name].js src/lights/[name].js]
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<base href="../../../../" />
|
||||
<script src="page.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="page.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>[name]</h1>
|
||||
|
||||
<p class="desc">
|
||||
该类作为其他阴影类的基类来使用。
|
||||
</p>
|
||||
|
||||
|
||||
<h2>构造函数</h2>
|
||||
|
||||
<h3>[name]( [param:Camera camera] )</h3>
|
||||
<p>
|
||||
[page:Camera camera] - 在光的世界里<br /><br />
|
||||
|
||||
创建一个新的[name]。这不能直接调用的 - 它由其他阴影用作基类。
|
||||
</p>
|
||||
|
||||
<h2>属性</h2>
|
||||
|
||||
<h3>[property:Boolean autoUpdate]</h3>
|
||||
<p>
|
||||
Enables automatic updates of the light's shadow. Default is *true*.
|
||||
If you do not require dynamic lighting / shadows, you may set this to *false*.
|
||||
</p>
|
||||
|
||||
<h3>[property:Camera camera]</h3>
|
||||
<p>
|
||||
光的世界里。这用于生成场景的深度图;从光的角度来看，其他物体背后的物体将处于阴影中。
|
||||
</p>
|
||||
|
||||
<h3>[property:Float bias]</h3>
|
||||
<p>
|
||||
阴影贴图偏差，在确定曲面是否在阴影中时，从标准化深度添加或减去多少。<br />
|
||||
默认值为0.此处非常小的调整（大约0.0001）可能有助于减少阴影中的伪影
|
||||
</p>
|
||||
|
||||
<h3>[property:WebGLRenderTarget map]</h3>
|
||||
<p>
|
||||
使用内置摄像头生成的深度图;超出像素深度的位置在阴影中。在渲染期间内部计算。
|
||||
</p>
|
||||
|
||||
<h3>[property:WebGLRenderTarget mapPass]</h3>
|
||||
<p>
|
||||
The distribution map generated using the internal camera; an occlusion is calculated based
|
||||
on the distribution of depths. Computed internally during rendering.
|
||||
</p>
|
||||
|
||||
<h3>[property:Vector2 mapSize]</h3>
|
||||
<p>
|
||||
一个[Page:Vector2]定义阴影贴图的宽度和高度。<br /><br />
|
||||
|
||||
较高的值会以计算时间为代价提供更好的阴影质量。值必须是2的幂，直到给定设备的[page:WebGLRenderer.capabilities].maxTextureSize，
|
||||
虽然宽度和高度不必相同（例如，（512,1024）有效）。
|
||||
默认值为*（512,512）*。
|
||||
</p>
|
||||
|
||||
|
||||
<h3>[property:Matrix4 matrix]</h3>
|
||||
<p>
|
||||
模拟阴影相机空间，计算阴影贴图中的位置和深度。存储在[page:Matrix4 Matrix4]中。这是在渲染期间内部计算的。
|
||||
</p>
|
||||
|
||||
<h3>[property:Boolean needsUpdate]</h3>
|
||||
<p>
|
||||
When set to *true*, shadow maps will be updated in the next *render* call. Default is *false*.
|
||||
If you have set [page:.autoUpdate] to *false*, you will need to set this property to *true* and then make a render call to update the light's shadow.
|
||||
</p>
|
||||
|
||||
<h3>[property:Float normalBias]</h3>
|
||||
<p>
|
||||
Defines how much the position used to query the shadow map is offset along the object normal.
|
||||
The default is 0. Increasing this value can be used to reduce shadow acne especially in large scenes where light shines onto geometry at a shallow angle. The cost is that shadows may appear distorted.
|
||||
</p>
|
||||
|
||||
<h3>[property:Float radius]</h3>
|
||||
<p>
|
||||
将此值设置为大于1的值将模糊阴影的边缘。<br />
|
||||
|
||||
较高的值会在阴影中产生不必要的条带效果 - 更大的[page:.mapSize mapSize]将允许在这些效果变得可见之前使用更高的值。<br />
|
||||
If [page:WebGLRenderer.shadowMap.type] is set to [page:Renderer PCFSoftShadowMap], radius has
|
||||
no effect and it is recommended to increase softness by decreasing [page:.mapSize mapSize] instead.<br /><br />
|
||||
|
||||
请注意，如果[page：WebGLRenderer.shadowMap.type]设置为[page:Renderer BasicShadowMap]，将会无效。
|
||||
</p>
|
||||
|
||||
|
||||
<h2>方法</h2>
|
||||
|
||||
<h3>[method:Vector2 getFrameExtents]()</h3>
|
||||
<p>
|
||||
Used internally by the renderer to extend the shadow map to contain all viewports
|
||||
</p>
|
||||
|
||||
<h3>[method:null updateMatrices]( [param:Light light] )</h3>
|
||||
<p>
|
||||
Update the matrices for the camera and shadow, used internally by the renderer.<br /><br />
|
||||
|
||||
light -- the light for which the shadow is being rendered.
|
||||
</p>
|
||||
|
||||
<h3>[method:Frustum getFrustum]()</h3>
|
||||
<p>
|
||||
Gets the shadow cameras frustum. Used internally by the renderer to cull objects.
|
||||
</p>
|
||||
|
||||
<h3>[method:number getViewportCount]()</h3>
|
||||
<p>
|
||||
Used internally by the renderer to get the number of viewports that need to be rendered for this shadow.
|
||||
</p>
|
||||
|
||||
<h3>[method:LightShadow copy]( [param:LightShadow source] )</h3>
|
||||
<p>
|
||||
将[page:LightShadow source]中的所有属性的值复制到该Light。
|
||||
</p>
|
||||
|
||||
<h3>[method:LightShadow clone]()</h3>
|
||||
<p>
|
||||
克隆与此相同属性的新LightShadow。
|
||||
</p>
|
||||
|
||||
<h3>[method:Object toJSON]()</h3>
|
||||
<p>
|
||||
序列化这个LightShadow。
|
||||
</p>
|
||||
|
||||
<h2>源码</h2>
|
||||
<p>
|
||||
[link:https://github.com/mrdoob/three.js/blob/master/src/lights/[name].js src/lights/[name].js]
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,89 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<base href="../../../../" />
|
||||
<script src="page.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="page.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>[name]</h1>
|
||||
|
||||
<p class="desc">
|
||||
该类在内部由[page:PointLight PointLights]所使用，以用于计算阴影。
|
||||
</p>
|
||||
|
||||
|
||||
<h2>代码示例</h2>
|
||||
|
||||
<code>
|
||||
//Create a WebGLRenderer and turn on shadows in the renderer
|
||||
const 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
|
||||
const 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)
|
||||
const sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );
|
||||
const sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
|
||||
const 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)
|
||||
const planeGeometry = new THREE.PlaneGeometry( 20, 20, 32, 32 );
|
||||
const planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
|
||||
const plane = new THREE.Mesh( planeGeometry, planeMaterial );
|
||||
plane.receiveShadow = true;
|
||||
scene.add( plane );
|
||||
|
||||
//Create a helper for the shadow camera (optional)
|
||||
const helper = new THREE.CameraHelper( light.shadow.camera );
|
||||
scene.add( helper );
|
||||
</code>
|
||||
|
||||
<h2>构造函数</h2>
|
||||
<h3>[name]( )</h3>
|
||||
<p>
|
||||
创建一个新的[name]。该方法不是直接调用的 —— 其在内部由[page:PointLight]调用。
|
||||
</p>
|
||||
|
||||
<h2>属性</h2>
|
||||
<p>
|
||||
共有属性请参见其基类[page:LightShadow LightShadow]。
|
||||
</p>
|
||||
|
||||
<h2>方法</h2>
|
||||
|
||||
<p>
|
||||
共有方法请参见其基类[page:LightShadow LightShadow]。
|
||||
</p>
|
||||
|
||||
<h3>[method:null updateMatrices]( [param:Light light], [param:number viewportIndex])</h3>
|
||||
<p>
|
||||
Update the matrices for the camera and shadow, used internally by the renderer.<br /><br />
|
||||
|
||||
light -- the light for which the shadow is being rendered.<br />
|
||||
viewportIndex -- calculates the matrix for this viewport
|
||||
</p>
|
||||
|
||||
<h2>源代码</h2>
|
||||
|
||||
<p>
|
||||
[link:https://github.com/mrdoob/three.js/blob/master/src/lights/[name].js src/lights/[name].js]
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<base href="../../../../" />
|
||||
<script src="page.js"></script>
|
||||
<link type="text/css" rel="stylesheet" href="page.css" />
|
||||
</head>
|
||||
<body>
|
||||
[page:LightShadow] →
|
||||
|
||||
<h1>[name]</h1>
|
||||
|
||||
<p class="desc">
|
||||
这在SpotLights内部用于计算阴影。
|
||||
</p>
|
||||
|
||||
<h2>代码示例</h2>
|
||||
|
||||
<code>
|
||||
//Create a WebGLRenderer and turn on shadows in the renderer
|
||||
const 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
|
||||
const 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
|
||||
light.shadow.focus = 1; // default
|
||||
|
||||
//Create a sphere that cast shadows (but does not receive them)
|
||||
const sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );
|
||||
const sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xff0000 } );
|
||||
const 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)
|
||||
const planeGeometry = new THREE.PlaneGeometry( 20, 20, 32, 32 );
|
||||
const planeMaterial = new THREE.MeshStandardMaterial( { color: 0x00ff00 } )
|
||||
const plane = new THREE.Mesh( planeGeometry, planeMaterial );
|
||||
plane.receiveShadow = true;
|
||||
scene.add( plane );
|
||||
|
||||
//Create a helper for the shadow camera (optional)
|
||||
const helper = new THREE.CameraHelper( light.shadow.camera );
|
||||
scene.add( helper );
|
||||
</code>
|
||||
|
||||
<h2>构造函数</h2>
|
||||
<p>构造函数创建一个 [param:PerspectiveCamera PerspectiveCamera] 来管理阴影的世界视图</p>
|
||||
|
||||
<h2>属性</h2>
|
||||
<p>有关常用属性，请参阅基础LightShadow类。</p>
|
||||
|
||||
<h3>[property:Camera camera]</h3>
|
||||
<p>
|
||||
在光的世界里。这用于生成场景的深度图;从光的角度来看，其他物体背后的物体将处于阴影中。<br /><br />
|
||||
|
||||
默认值为PerspectiveCamera，近剪裁平面为0.5。 fov将通过更新方法跟踪拥有SpotLight的角度属性。同样，aspect属性将跟踪mapSize的方面。如果设置了灯光的距离属性，则远剪裁平面将跟踪该值，否则默认为500。
|
||||
</p>
|
||||
|
||||
<h3>[property:Number focus]</h3>
|
||||
<p>
|
||||
Used to focus the shadow camera. The camera's field of view is set as a percentage of the spotlight's field-of-view. Range is [0, 1]. Default is 1.0.<br/>
|
||||
</p>
|
||||
|
||||
<h2>方法</h2>
|
||||
<p>有关常用方法，请参阅基础LightShadow类。</p>
|
||||
|
||||
|
||||
<h2>Source</h2>
|
||||
|
||||
<p>
|
||||
[link:https://github.com/mrdoob/three.js/blob/master/src/lights/[name].js src/lights/[name].js]
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user