- <p>Film size used for the larger axis. Default is 35 (millimeters). This parameter does not influence the projection matrix unless .filmOffset is set to a nonzero value.</p>
+ <p>胶片尺寸,其默认值为35(毫米)。
+ 这个参数不会影响摄像机的投影矩阵,除非.filmOffset被设置为了一个非零的值。</p>
<h3>[property:Float filmOffset]</h3>
<h3>[property:Float filmOffset]</h3>
- <p>Horizontal off-center offset in the same unit as .filmGauge. Default is *0*.</p>
+ <p>水平偏离中心偏移量,和.filmGauge单位相同。默认值为*0*。</p>
<h3>[property:Float focus]</h3>
<h3>[property:Float focus]</h3>
- <p>Object distance used for stereoscopy and depth-of-field effects.
- This parameter does not influence the projection matrix unless a [page:StereoCamera] is being used.
- Default is *10*.
+ <p>用于立体视觉和景深效果的物体的距离。
+ 这个参数不会影响摄像机的投影矩阵,除非使用了[page:StereoCamera]。
+ 默认值是*10*。
</p>
</p>
<h3>[property:Float fov]</h3>
<h3>[property:Float fov]</h3>
- <p>Camera frustum vertical field of view, from bottom to top of view, in degrees. Default is *50*.</p>
+ <p>摄像机视锥体垂直视野角度,从视图的底部到顶部,以角度来表示。默认值是*50*。</p>
<h3>[property:Boolean isPerspectiveCamera]</h3>
<h3>[property:Boolean isPerspectiveCamera]</h3>
<p>
<p>
- Used to test whether this or derived classes are PerspectiveCameras. Default is *true*.<br /><br />
- This should not be changed as it is used internally by the renderer for optimisation.
+ 用于测试这个类或者派生类是否为PerspectiveCameras,默认为true。
+ <br /><br />
+
+ 你不应当对这个属性进行改变,因为它在内部由渲染器使用,以用于优化。
</p>
</p>
<h3>[property:Float near]</h3>
<h3>[property:Float near]</h3>
<p>
<p>
- Camera frustum near plane. Default is *0.1*.<br /><br />
-
- 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
- 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.
- These constants define properties common to all material types,
- with the exception of Texture Combine Operations which only apply to [page:MeshBasicMaterial.combine MeshBasicMaterial], [page:MeshLambertMaterial.combine MeshLambertMaterial] and [page:MeshPhongMaterial.combine MeshPhongMaterial].<br />
- Defines which side of faces will be rendered - front, back or both.
- Default is [page:Constant FrontSide].
+ 定义了哪一边的面将会被渲染 —— 正面,或是反面,还是两个面都渲染。
+ 默认值是[page:Constant FrontSide](只渲染正面)。
</p>
</p>
- <h2>Colors</h2>
+ <h2>颜色</h2>
<code>
<code>
THREE.NoColors
THREE.NoColors
THREE.FaceColors
THREE.FaceColors
THREE.VertexColors
THREE.VertexColors
</code>
</code>
<p>
<p>
- [page:Constant NoColors] is the default and applies the material's color to all faces.<br />
- [page:Constant FaceColors] colors faces according to each [page:Face3 Face3] [page:Color Color] value.<br />
- [page:Constant VertexColors] colors faces according to each [page:Face3 Face3] vertexColors value. This is an array of three [page:Color Color]s, one for each vertex in the face.<br />
- See the [example:webgl_geometry_colors geometry / colors] example.
- Which depth function the material uses to compare incoming pixels Z-depth against the current Z-depth buffer value. If the result of the comparison is true, the pixel will be drawn.<br />
- [page:Materials NeverDepth] will never return true.<br />
- [page:Materials AlwaysDepth] will always return true.<br />
- [page:Materials LessDepth] will return true if the incoming pixel Z-depth is less than the current buffer Z-depth.<br />
- [page:Materials LessEqualDepth] is the default and will return true if the incoming pixel Z-depth is less than or equal to the current buffer Z-depth.<br />
- [page:Materials GreaterEqualDepth] will return true if the incoming pixel Z-depth is greater than or equal to the current buffer Z-depth.<br />
- [page:Materials GreaterDepth] will return true if the incoming pixel Z-depth is greater than the current buffer Z-depth.<br />
- [page:Materials NotEqualDepth] will return true if the incoming pixel Z-depth is not equal to the current buffer Z-depth.<br />
- These define how the result of the surface's color is combined with the environment map (if present), for [page:MeshBasicMaterial.combine MeshBasicMaterial], [page:MeshLambertMaterial.combine MeshLambertMaterial] and [page:MeshPhongMaterial.combine MeshPhongMaterial]. <br />
- [page:Constant MultiplyOperation] is the default and multiplies the environment map color with the surface color.<br />
- [page:Constant MixOperation] uses reflectivity to blend between the two colors.<br />
- [page:Constant AddOperation] adds the two colors.
- There are four [link:https://en.wikipedia.org/wiki/S3_Texture_Compression S3TC] formats available via this extension. These are:<br />
- [page:constant RGB_S3TC_DXT1_Format]: A DXT1-compressed image in an RGB image format.<br />
- [page:constant RGBA_S3TC_DXT1_Format]: A DXT1-compressed image in an RGB image format with a simple on/off alpha value.<br />
- [page:constant RGBA_S3TC_DXT3_Format]: A DXT3-compressed image in an RGBA image format. Compared to a 32-bit RGBA texture, it offers 4:1 compression.<br />
- [page:constant RGBA_S3TC_DXT5_Format]: A DXT5-compressed image in an RGBA image format. It also provides a 4:1 compression, but differs to the DXT3 compression in how the alpha compression is done.<br />
- For use with a [page:CompressedTexture CompressedTexture]'s [page:Texture.format format] property,
- these require support for the [link:https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_pvrtc/ WEBGL_compressed_texture_pvrtc]
- extension. <br />
- PVRTC is typically only available on mobile devices with PowerVR chipsets, which are mainly Apple devices.<br /><br />
-
- There are four [link:https://en.wikipedia.org/wiki/PVRTC PVRTC] formats available via this extension. These are:<br />
- [page:constant RGB_PVRTC_4BPPV1_Format]: RGB compression in 4-bit mode. One block for each 4×4 pixels.<br />
- [page:constant RGB_PVRTC_2BPPV1_Format]: RGB compression in 2-bit mode. One block for each 8×4 pixels.<br />
- [page:constant RGBA_PVRTC_4BPPV1_Format]: RGBA compression in 4-bit mode. One block for each 4×4 pixels.<br />
- [page:constant RGBA_PVRTC_2BPPV1_Format]: RGBA compression in 2-bit mode. One block for each 8×4 pixels.<br />
- LensFlare has been moved to [link:https://github.com/mrdoob/three.js/blob/master/examples/js/objects/Lensflare.js /examples/js/objects/Lensflare.js].
- CanvasRenderer has been moved to [link:https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CanvasRenderer.js /examples/js/renderers/CanvasRenderer.js].
- Materials describe the appearance of [page:Object objects].
- They are defined in a (mostly) renderer-independent way, so you don't have to
- rewrite materials if you decide to use a different renderer.<br /><br />
-
- The following properties and methods are inherited by all other material types
- (although they may have different defaults).
- </p>
-
- <h2>Constructor</h2>
-
-
- <h3>[name]()</h3>
- <p>This creates a generic material.</p>
-
-
- <h2>Properties</h2>
-
- <h3>[property:Float alphaTest]</h3>
- <p>
- Sets the alpha value to be used when running an alpha test.
- The material will not be renderered if the opacity is lower than this value.
- Default is *0*.
- </p>
-
- <h3>[property:Integer blendDst]</h3>
- <p>
- Blending destination. Default is [page:CustomBlendingEquation OneMinusSrcAlphaFactor].
- See the destination factors [page:CustomBlendingEquation constants] for all possible values.<br />
- The material's [page:Constant blending] must be set to [page:Materials CustomBlending] for this to have any effect.
- </p>
-
- <h3>[property:Integer blendDstAlpha]</h3>
- <p>The transparency of the [page:.blendDst]. Default is *null*.</p>
-
- <h3>[property:Integer blendEquation]</h3>
- <p>
- Blending equation to use when applying blending. Default is [page:CustomBlendingEquation AddEquation].
- See the blending equation [page:CustomBlendingEquation constants] for all possible values.<br />
- The material's [page:Constant blending] must be set to [page:Materials CustomBlending] for this to have any effect.
- </p>
-
- <h3>[property:Integer blendEquationAlpha]</h3>
- <p>The tranparency of the [page:.blendEquation]. Default is *null*.</p>
-
- <h3>[property:Blending blending]</h3>
- <p>
- Which blending to use when displaying objects with this material. <br />
- This must be set to [page:Materials CustomBlending] to use custom [page:Constant blendSrc], [page:Constant blendDst] or [page:Constant blendEquation].<br />
- See the blending mode [page:Materials constants] for all possible values. Default is [page:Materials NormalBlending].
- </p>
-
- <h3>[property:Integer blendSrc]</h3>
- <p>
- Blending source. Default is [page:CustomBlendingEquation SrcAlphaFactor].
- See the source factors [page:CustomBlendingEquation constants] for all possible values.<br />
- The material's [page:Constant blending] must be set to [page:Materials CustomBlending] for this to have any effect.
- </p>
-
- <h3>[property:Integer blendSrcAlpha]</h3>
- <p>The tranparency of the [page:.blendSrc]. Default is *null*.</p>
-
- <h3>[property:Boolean clipIntersection]</h3>
- <p>
- Changes the behavior of clipping planes so that only their intersection is clipped, rather than their union.
- Default is *false*.
- </p>
-
- <h3>[property:Array clippingPlanes]</h3>
- <p>
- User-defined clipping planes specified as THREE.Plane objects in world space.
- These planes apply to the objects this material is attached to.
- Points in space whose signed distance to the plane is negative are clipped (not rendered).
- This requires [page:WebGLRenderer.localClippingEnabled] to be *true*.
- See the [example:webgl_clipping_intersection WebGL / clipping /intersection] example.
- Default is *null*.
- </p>
-
- <h3>[property:Boolean clipShadows]</h3>
- <p>
- Defines whether to clip shadows according to the clipping planes specified on this material. Default is *false*.
- </p>
-
- <h3>[property:Boolean colorWrite]</h3>
- <p>
- Whether to render the material's color.
- This can be used in conjunction with a mesh's [page:Integer renderOrder] property to create invisible objects that occlude other objects. Default is *true*.
- Same as customDepthMaterial, but used with [page:PointLight]. Default is *undefined*.
- </p>
-
- <h3>[property:Object defines]</h3>
- <p>
- Custom defines to be injected into the shader. These are passed in form of an object literal, with key/value pairs. { MY_CUSTOM_DEFINE: '' , PI2: Math.PI * 2 }. The pairs are defined in both vertex and fragment shaders. Default is *undefined*.
- </p>
-
- <h3>[property:Integer depthFunc]</h3>
- <p>
- Which depth function to use. Default is [page:Materials LessEqualDepth]. See the depth mode [page:Materials constants] for all possible values.
- </p>
-
- <h3>[property:Boolean depthTest]</h3>
- <p>
- Whether to have depth test enabled when rendering this material. Default is *true*.
- </p>
-
- <h3>[property:Boolean depthWrite]</h3>
- <p>
- Whether rendering this material has any effect on the depth buffer. Default is *true*.<br /><br />
-
- When drawing 2D overlays it can be useful to disable the depth writing in order to layer several things together without creating z-index artifacts.
- </p>
-
- <h3>[property:Boolean flatShading]</h3>
- <p>
- Define whether the material is rendered with flat shading. Default is false.
- </p>
-
- <h3>[property:Boolean fog]</h3>
- <p>Whether the material is affected by fog. Default is *true*.</p>
-
- <h3>[property:Integer id]</h3>
- <p>Unique number for this material instance.</p>
-
- <h3>[property:Boolean isMaterial]</h3>
- <p>
- Used to check whether this or derived classes are materials. Default is *true*.<br /><br />
-
- You should not change this, as it used internally for optimisation.
- </p>
-
- <h3>[property:Boolean lights]</h3>
- <p>Whether the material is affected by lights. Default is *true*.</p>
-
- <h3>[property:String name]</h3>
- <p>Optional name of the object (doesn't need to be unique). Default is an empty string.</p>
-
- <h3>[property:Boolean needsUpdate]</h3>
- <p>
- Specifies that the material needs to be recompiled.<br />
- This property is automatically set to *true* when instancing a new material.
- </p>
-
- <h3>[property:Float opacity]</h3>
- <p>
- Float in the range of *0.0* - *1.0* indicating how transparent the material is.
- A value of *0.0* indicates fully transparent, *1.0* is fully opaque.<br />
- If the material's [page:Boolean transparent] property is not set to *true*, the material will remain
- fully opaque and this value will only affect its color. <br />
- Default is *1.0*.
- </p>
-
- <h3>[property:Float overdraw]</h3>
- <p>
- Amount of triangle expansion at draw time.
- This is a workaround for cases when gaps appear between triangles when using [page:CanvasRenderer].
- *0.5* tends to give good results across browsers. Default is *0*.
- </p>
-
- <h3>[property:Boolean polygonOffset]</h3>
- <p>
- Whether to use polygon offset. Default is *false*. This corresponds to the *GL_POLYGON_OFFSET_FILL* WebGL feature.
- </p>
-
- <h3>[property:Integer polygonOffsetFactor]</h3>
- <p>Sets the polygon offset factor. Default is *0*.</p>
-
- <h3>[property:Integer polygonOffsetUnits]</h3>
- <p>Sets the polygon offset units. Default is *0*.</p>
-
- <h3>[property:String precision]</h3>
- <p>
- Override the renderer's default precision for this material. Can be "*highp*", "*mediump*" or "*lowp*".
- Default is *null*.
- </p>
-
- <h3>[property:Boolean premultipliedAlpha]</h3>
- <p>
- Whether to premultiply the alpha (transparency) value.
- See [Example:webgl_materials_transparency WebGL / Materials / Transparency] for an example of the difference.
- Default is *false*.
- </p>
-
- <h3>[property:Boolean dithering]</h3>
- <p>
- Whether to apply dithering to the color to remove the appearance of banding.
- Default is *false*.
- </p>
-
- <h3>[property:Integer shadowSide]</h3>
- <p>
- Defines which side of faces cast shadows.
- When set, can be [page:Materials THREE.FrontSide], [page:Materials THREE.BackSide], or [page:Materials THREE.DoubleSide]. Default is *null*. <br />
- If *null*, the side casting shadows is determined as follows: <br />
-
- <table>
- <thead>
- <tr>
- <th>[page:Material.side]</th>
- <th>Side casting shadows</th>
- </tr>
- </thead>
- <tbody>
-
- <tr>
- <td>THREE.FrontSide</td>
- <td>back side</td>
- </tr>
- <tr>
- <td>THREE.BackSide</td>
- <td>front side</td>
- </tr>
- <tr>
- <td>THREE.DoubleSide</td>
- <td>both sides</td>
- </tr>
- </tbody>
- </table>
-
-
- </p>
-
- <h3>[property:Integer side]</h3>
- <p>
- Defines which side of faces will be rendered - front, back or both.
- Default is [page:Materials THREE.FrontSide].
- Other options are [page:Materials THREE.BackSide] and [page:Materials THREE.DoubleSide].
- </p>
-
- <h3>[property:Boolean transparent]</h3>
- <p>
- Defines whether this material is transparent. This has an effect on rendering
- as transparent objects need special treatment and are rendered after
- non-transparent objects. <br />
- When set to true, the extent to which the material is transparent is
- controlled by setting it's [page:Float opacity] property. <br />
- Default is *false*.
- </p>
-
- <h3>[property:String type]</h3>
- <p>
- Value is the string 'Material'. This shouldn't be changed, and can be used to
- find all objects of this type in a scene.
- </p>
-
- <h3>[property:String uuid]</h3>
- <p>
- [link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] of this material instance.
- This gets automatically assigned, so this shouldn't be edited.
- </p>
-
- <h3>[property:Integer vertexColors]</h3>
- <p>
- Defines whether vertex coloring is used.
- Default is [page:Materials THREE.NoColors].
- Other options are [page:Materials THREE.VertexColors] and [page:Materials THREE.FaceColors].
- </p>
-
- <h3>[property:Boolean visible]</h3>
- <p>
- Defines whether this material is visible. Default is *true*.
- </p>
-
- <h3>[property:object userData]</h3>
- <p>
- An object that can be used to store custom data about the Material. It should not hold
- references to functions as these will not be cloned.
- </p>
-
- <h2>Methods</h2>
-
- <h3>[page:EventDispatcher EventDispatcher] methods are available on this class.</h3>
-
- <h3>[method:Material clone]( )</h3>
- <p>Return a new material with the same parameters as this material.</p>
- <p class="desc">A material for drawing geometry by depth. Depth is based off of the camera near and far plane. White is nearest, black is farthest.</p>
+ 使用[link:https://en.wikipedia.org/wiki/Phong_shading Phong]着色模型计算着色时,会计算每个像素的阴影(在[link:https://en.wikipedia.org/wiki/Shader#Pixel_shaders fragment shader],
- [page:Object parameters] - (optional) an object with one or more properties defining the material's appearance.
- Any property of the material (including any property inherited from [page:Material] and [page:MeshStandardMaterial]) can be passed in here.<br /><br />
-
- The exception is the property [page:Hexadecimal color], which can be passed in as a hexadecimal
- string and is *0xffffff* (white) by default. [page:Color.set]( color ) is called internally.
- [page:Object parameters] - (optional) an object with one or more properties defining the material's appearance.
- Any property of the material (including any property inherited from [page:Material] and [page:MeshStandardMaterial]) can be passed in here.<br /><br />
-
- The exception is the property [page:Hexadecimal color], which can be passed in as a hexadecimal
- string and is *0xffffff* (white) by default. [page:Color.set]( color ) is called internally.
- An object containing details about the capabilities of the current [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext RenderingContext].<br />
-
- - [page:Boolean floatFragmentTextures]: whether the context supports the [link:https://developer.mozilla.org/en-US/docs/Web/API/OES_texture_float OES_texture_float] extension.
- According to [link:https://webglstats.com/ WebGLStats], as of February 2016 over 95% of WebGL enabled devices support this.<br />
- - [page:Boolean floatVertexTextures]: *true* if [page:Boolean floatFragmentTextures] and [page:Boolean vertexTextures] are both true.<br />
- - [page:Method getMaxAnisotropy](): Returns the maximum available anisotropy.<br />
- - [page:Method getMaxPrecision](): Returns the maximum available precision for vertex and fragment shaders. <br />
- - [page:Boolean logarithmicDepthBuffer]: *true* if the [page:parameter logarithmicDepthBuffer] was set to true in the constructor and
- the context supports the [link:https://developer.mozilla.org/en-US/docs/Web/API/EXT_frag_depth EXT_frag_depth] extension.
- According to [link:https://webglstats.com/ WebGLStats], as of February 2016 around 66% of WebGL enabled devices support this.<br />
- - [page:Integer maxAttributes]: The value of *gl.MAX_VERTEX_ATTRIBS*.<br />
- - [page:Integer maxCubemapSize]: The value of *gl.MAX_CUBE_MAP_TEXTURE_SIZE*.
- Maximum height * width of cube map textures that a shader can use.<br />
- - [page:Integer maxFragmentUniforms]: The value of *gl.MAX_FRAGMENT_UNIFORM_VECTORS*.
- The number of uniforms that can be used by a fragment shader.<br />
- - [page:Integer maxTextureSize]: The value of *gl.MAX_TEXTURE_SIZE*.
- Maximum height * width of a texture that a shader use.<br />
- - [page:Integer maxTextures]: The value of *gl.MAX_TEXTURE_IMAGE_UNITS*.
- The maximum number of textures that can be used by a shader.<br />
- - [page:Integer maxVaryings]: The value of *gl.MAX_VARYING_VECTORS*.
- The number of varying vectors that can used by shaders.<br />
- - [page:Integer maxVertexTextures]: The value of *gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS*.
- The number of textures that can be used in a vertex shader.<br />
- - [page:Integer maxVertexUniforms]: The value of *gl.MAX_VERTEX_UNIFORM_VECTORS*.
- The maximum number of uniforms that can be used in a vertex shader.<br />
- - [page:String precision]: The shader precision currently being used by the renderer.<br />
- - [page:Boolean vertexTextures]: *true* if [property:Integer maxVertexTextures] is greater than 0 (i.e. vertext textures can be used).<br />
- <p>An object with a series of statistical information about the graphics board memory and the rendering process. Useful for debugging or just for the sake of curiosity. The object contains the following fields:</p>
- <p>By default these data are reset at each render calls, but when using the composer or mirrors it can be preferred to reset them with a custom pattern :
- Used internally by the renderer to keep track of various sub object properties.
+ 渲染器内部使用,以跟踪各种子对象属性。
</p>
</p>
<h3>[property:WebGLRenderLists renderLists]</h3>
<h3>[property:WebGLRenderLists renderLists]</h3>
<p>
<p>
- Used internally to handle ordering of scene object rendering.
+ 在内部用于处理场景渲染对象的排序。
</p>
</p>
<h3>[property:WebGLShadowMap shadowMap]</h3>
<h3>[property:WebGLShadowMap shadowMap]</h3>
<p>
<p>
- This contains the reference to the shadow map, if used.
+ 如果使用,它包含阴影贴图的引用。
</p>
</p>
<h3>[property:Boolean shadowMap.enabled]</h3>
<h3>[property:Boolean shadowMap.enabled]</h3>
- <p>If set, use shadow maps in the scene. Default is *false*.</p>
+ <p>如果设置, 请在场景中使用阴影贴图。 默认是 *false*</p>
<h3>[property:Boolean shadowMap.autoUpdate]</h3>
<h3>[property:Boolean shadowMap.autoUpdate]</h3>
- <p>Enables automatic updates to the shadows in the scene. Default is *true*.</p>
- <p>If you do not require dynamic lighting / shadows, you may set this to *false* when the renderer is instantiated.</p>
+ <p>启用场景中的阴影自动更新。默认是*true*</p>
+ <p>如果不需要动态光照/阴影, 则可以在实例化渲染器时将之设为false</p>
<h3>[property:Boolean shadowMap.needsUpdate]</h3>
<h3>[property:Boolean shadowMap.needsUpdate]</h3>
- <p>When set to *true*, shadow maps in the scene will be updated in the next *render* call. Default is *false*. </p>
- <p>If you have disabled automatic updates to shadow maps (*shadowMap.autoUpdate = false*), you will need to set this to *true* and then make a render call to update the shadows in your scene.</p>
- <p>Copies pixels from the current WebGLFramebuffer into a 2D texture. Enables access to [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/copyTexImage2D WebGLRenderingContext.copyTexImage2D].</p>
- <p>Copies all pixels of a texture to an existing texture starting from the given position. Enables access to [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texSubImage2D WebGLRenderingContext.texSubImage2D].</p>
- <p>Reads the pixel data from the renderTarget into the buffer you pass in. This is a wrapper around [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/readPixels WebGLRenderingContext.readPixels]().<br />
- See the [example:webgl_interactive_cubes_gpu interactive / cubes / gpu] example.
- Even with forceClear set to true you can prevent certain buffers being cleared by setting
- either the [page:WebGLRenderer.autoClearColor autoClearColor], [page:WebGLRenderer.autoClearStencil autoClearStencil] or [page:WebGLRenderer.autoClearDepth autoClearDepth] properties to false.
- <p>[page:Function callback] — The function will be called every available frame. If `null` is passed it will stop any already ongoing animation.</p>
- <p>A build in function that can be used instead of [link:https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame requestAnimationFrame]. For WebVR projects this function must be used.</p>
- Three.js can use WebGL to render your scenes on all modern browsers. For older browsers, especially Internet Explorer 10 and below, you may have to fallback to one of the other [link:https://github.com/mrdoob/three.js/tree/master/examples/js/renderers renderers] (CSS2DRenderer, CSS3DRenderer, SVGRenderer, CanvasRenderer). Additionally, you may have to include some polyfills, especially if you are using files from the [link:https://github.com/mrdoob/three.js/tree/master/examples /examples] folder.
+ 在所有现代浏览器中,Three.js可以使用WebGL来渲染场景。对于较旧的浏览器,特别是Internet Explorer 10或者更低版本浏览器,你将需要回落到其它[link:https://github.com/mrdoob/three.js/tree/master/examples/js/renderers renderers](CSS2DRenderer、CSS3DRenderer、SVGRenderer、CanvasRenderer)。此外,你或许不得不包含一些额外的“填充物”来解决兼容性问题,特别是当你使用[link:https://github.com/mrdoob/three.js/tree/master/examples /examples]目录中的文件时。
</p>
</p>
<p>
<p>
- Note: if you don't need to support these old browsers, then it is not recommended to use the other renderers as they are slower and support less features than the WebGLRenderer.
- Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 and Microsoft Edge. You can find which browsers support WebGL at [link:https://caniuse.com/#feat=webgl Can I use WebGL].
+ Google Chrome 9+、Firefox 4+、Opera 15+、Safari 5.1+、Internet Explorer 11 和 Microsoft Edge。你可以点击[link:https://caniuse.com/#feat=webgl Can I use WebGL]来查阅各个浏览器对WebGL的支持性。
</p>
</p>
</div>
</div>
- <h2>JavaScript Language Features or Web APIs Used in three.js</h2>
+ <h2>
+ 在Three.js中所使用到的JavaScript语言特性或者Web API
+ </h2>
<div>
<div>
<p>
<p>
- Here are some features used in three.js. Some of them may require additional polyfills.
+ 这里是一些在Three.js中使用到的特性,其中的一部分需要额外的“填充物”来解决兼容性问题。
</p>
</p>
<table>
<table>
<thead>
<thead>
<tr>
<tr>
- <th>Feature</th>
- <th>Use Scope</th>
- <th>Modules</th>
+ <th>特性</th>
+ <th>适用范围</th>
+ <th>模块</th>
</tr>
</tr>
</thead>
</thead>
<tbody>
<tbody>
@@ -90,16 +92,16 @@
</table>
</table>
</div>
</div>
- <h2>Polyfills</h2>
+ <h2>关于用于解决兼容性问题的“填充物”</h2>
<div>
<div>
- <p>Just import polyfills based on your requirements. Taking IE9 as an example, you need to polyfill at least these features:</p>
- <p>If you wish to keep the size of your app but render it at a lower resolution, you can do so by calling <strong>setSize</strong> with false as <strong>updateStyle</strong> (the third argument). For example, <strong>setSize(window.innerWidth/2, window.innerHeight/2, false)</strong> will render your app at half resolution, given that your <canvas> has 100% width and height.</p>
- <p>Last but not least, we add the <strong>renderer</strong> element to our HTML document. This is a <canvas> element the renderer uses to display the scene to us.</p>
- <p>To create a cube, we need a <strong>BoxGeometry</strong>. This is an object that contains all the points (<strong>vertices</strong>) and fill (<strong>faces</strong>) of the cube. We'll explore this more in the future.</p>
- <p>In addition to the geometry, we need a material to color it. Three.js comes with several materials, but we'll stick to the <strong>MeshBasicMaterial</strong> for now. All materials take an object of properties which will be applied to them. To keep things very simple, we only supply a color attribute of <strong>0x00ff00</strong>, which is green. This works the same way that colors work in CSS or Photoshop (<strong>hex colors</strong>).</p>
- <p>The third thing we need is a <strong>Mesh</strong>. A mesh is an object that takes a geometry, and applies a material to it, which we then can insert to our scene, and move freely around.</p>
- <p>By default, when we call <strong>scene.add()</strong>, the thing we add will be added to the coordinates <strong>(0,0,0)</strong>. This would cause both the camera and the cube to be inside each other. To avoid this, we simply move the camera out a bit.</p>
- <p>If you copied the code from above into the HTML file we created earlier, you wouldn't be able to see anything. This is because we're not actually rendering anything yet. For that, we need what's called a <strong>render or animate loop</strong>.</p>
- <p>This will create a loop that causes the renderer to draw the scene every time the screen is refreshed (on a typical screen this means 60 times per second). If you're new to writing games in the browser, you might say <em>"why don't we just create a setInterval ?"</em> The thing is - we could, but <strong>requestAnimationFrame</strong> has a number of advantages. Perhaps the most important one is that it pauses when the user navigates to another browser tab, hence not wasting their precious processing power and battery life.</p>
- <p>If you insert all the code above into the file you created before we began, you should see a green box. Let's make it all a little more interesting by rotating it.</p>
- <p>This will be run every frame (normally 60 times per second), and give the cube a nice rotation animation. Basically, anything you want to move or change while the app is running has to go through the animate loop. You can of course call other functions from there, so that you don't end up with a <strong>animate</strong> function that's hundreds of lines.</p>
- BMFonts (bitmap fonts) allow batching glyphs into a single BufferGeometry. BMFont rendering
- supports word-wrapping, letter spacing, kerning, signed distance fields with standard
- derivatives, multi-channel signed distance fields, multi-texture fonts, and more.
- See [link:https://github.com/Jam3/three-bmfont-text three-bmfont-text].
+ BMFonts (位图字体) 可以将字形批处理为单个BufferGeometry。BMFont的渲染支持自动换行、字母间距、字句调整、signed distance fields with standard derivatives、multi-channel signed distance fields、多纹理字体等特性。
- <h2>Which 3D model format is best supported?</h2>
+ <h2>哪一种三维物体格式能够得到最好地支持呢?</h2>
<div>
<div>
<p>
<p>
- The recommended format for importing and exporting assets is glTF (GL Transmission Format). Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load.
- three.js provides loaders for many other popular formats like FBX, Collada or OBJ as well. Nevertheless, you should always try to establish a glTF based workflow in your projects first. For more information, see [link:#manual/introduction/Loading-3D-models loading 3D models].
<p>[link:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Safari: Using the Viewport]</p>
<p>[link:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Safari: Using the Viewport]</p>
<p>[link:https://developer.mozilla.org/en/Mobile/Viewport_meta_tag MDN: Using the viewport meta tag]</p>
<p>[link:https://developer.mozilla.org/en/Mobile/Viewport_meta_tag MDN: Using the viewport meta tag]</p>
</div>
</div>
- <h2>How can scene scale be preserved on resize?</h2>
+ <h2>如何在窗口调整大小时保持场景比例不变?</h2>
<p>
<p>
- 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:
- 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.
- Many programming languages have simple HTTP servers built in. They are not as full featured as
- production servers such as [link:https://www.apache.org/ Apache] or [link:https://nginx.org NGINX], however they should be sufficient for testing your
- <p>Changes in these require building of new shader program. You'll need to set</p>
+ <p>这些变化需要建立新的shader程序. 你需要设置</p>
<code>material.needsUpdate = true</code>
<code>material.needsUpdate = true</code>
- <p>Bear in mind this might be quite slow and induce jerkiness in framerate (especially on Windows, as shader compilation is slower in DirectX than OpenGL).</p>
- <p>For smoother experience you can emulate changes in these features to some degree by having "dummy" values like zero intensity lights, white textures, or zero density fog.</p>
- <p>You can freely change the material used for geometry chunks, however you cannot change how an object is divided into chunks (according to face materials). </p>
+ <p>您可以自由更改用于几何块的材质,但是无法更改对象如何划分为块(根据面材料). </p>
- <h3>If you need to have different configurations of materials during runtime:</h3>
- <p>If the number of materials / chunks is small, you could pre-divide the object beforehand (e.g. hair / face / body / upper clothes / trousers for a human, front / sides / top / glass / tire / interior for a car). </p>
- <p>If the number is large (e.g. each face could be potentially different), consider a different solution, such as using attributes / textures to drive different per-face look.</p>
- <li>You have to manually fetch and include a copy of the library as part of your project's source code</li>
- <li>Updating the library's version is a manual process</li>
- <li>When checking in a new version of the library your version control diffs are cluttered by the many lines of the build file</li>
+ <li>你必须手动获得并在你的源代码中包含这个库的一个拷贝</li>
+ <li>更新这个库的版本是一个手动操作的过程</li>
+ <li>在检查新版本的库时,你的版本差异对比将会被许多行给弄乱。</li>
</ul>
</ul>
</p>
</p>
- <p>Using a dependency manager like npm avoids these caveats by allowing you to simply download and import your desired version of the library onto your machine.</p>
- <p>Three.js is published as an npm module, see: [link:https://www.npmjs.com/package/three npm]. This means all you need to do to include three.js into your project is run "npm install three"</p>
- <p>Assuming that you're bundling your files with a tool such as [link:https://webpack.github.io/ Webpack] or [link:https://github.com/substack/node-browserify Browserify], which allow you to "require('modules') in the browser by bundling up all of your dependencies."</p>
- or if you wish to import only select parts of three.js library, for example Scene:
+ 或者,如果你希望只导入three.js库中的特定部分,例如Scene:
</p>
</p>
<code>
<code>
@@ -62,11 +62,11 @@
...
...
</code>
</code>
- <h2>Caveats</h2>
+ <h2>注意事项</h2>
<p>
<p>
- Currently it's not possible to import the files within the "examples/js" directory in this way.
- This is due to some of the files relying on global namespace pollution of THREE. For more information see <a href="https://github.com/mrdoob/three.js/issues/9562" target="_blank">Transform `examples/js` to support modules #9562</a>.
+ 目前,无法用这种方式导入"examples/js"目录中的文件。
+ 这是因为一些文件依赖于THREE的全局命名空间污染。了解更多详情,请参阅<a href="https://github.com/mrdoob/three.js/issues/9562" target="_blank">Transform `examples/js` to support modules #9562</a>。
- Three.js uses *matrices* to encode 3D transformations---translations (position), rotations, and scaling. Every instance of [page:Object3D] has a [page:Object3D.matrix matrix] which stores that object's position, rotation, and scale. This page describes how to update an object's transformation.
- <h2>Convenience properties and *matrixAutoUpdate*</h2>
+ <h2>Convenience properties and *matrixAutoUpdate*(便利属性和 *matrixAutoUpdate*)</h2>
- There are two ways to update an object's transformation:
+ 有两种方法可以更新对象的转换:
<ol>
<ol>
<li>
<li>
- Modify the object's *position*, *quaternion*, and *scale* properties, and let three.js recompute
- the object's matrix from these properties:
+ 修改对象的* position *,* quaternion *和* scale *属性,让three.js重新计算
+ 来自这些属性的对象矩阵:
<code>
<code>
object.position.copy(start_position);
object.position.copy(start_position);
object.quaternion.copy(quaternion);
object.quaternion.copy(quaternion);
</code>
</code>
- By default, the *matrixAutoUpdate* property is set true, and the matrix will be automatically recalculated.
- If the object is static, or you wish to manually control when recalculation occurs, better performance can be obtained by setting the property false:
- Note that *matrixAutoUpdate* <em>must</em> be set to *false* in this case, and you should make sure <em>not</em> to call *updateMatrix*. Calling *updateMatrix* will clobber the manual changes made to the matrix, recalculating the matrix from *position*, *scale*, and so on.
- An object's [page:Object3D.matrix matrix] stores the object's transformation <em>relative</em> to the object's [page:Object3D.parent parent]; to get the object's transformation in <em>world</em> coordinates, you must access the object's [page:Object3D.matrixWorld].
+ An object's [page:Object3D.matrix matrix] stores the object's transformation
</p>
</p>
<p>
<p>
- When either the parent or the child object's transformation changes, you can request that the child object's [page:Object3D.matrixWorld matrixWorld] be updated by calling [page:Object3D.updateMatrixWorld updateMatrixWorld]().
- Three.js provides two ways of representing 3D rotations: [page:Euler Euler angles] and [page:Quaternion Quaternions], as well as methods for converting between the two. Euler angles are subject to a problem called "gimbal lock," where certain configurations can lose a degree of freedom (preventing the object from being rotated about one axis). For this reason, object rotations are <em>always</em> stored in the object's [page:Object3D.quaternion quaternion].
- Previous versions of the library included a *useQuaternion* property which, when set to false, would cause the object's [page:Object3D.matrix matrix] to be calculated from an Euler angle. This practice is deprecated---instead, you should use the [page:Object3D.setRotationFromEuler setRotationFromEuler] method, which will update the quaternion.
[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] by [link:https://codepen.io/rachsmith/ Rachel Smith].
[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] by [link:https://codepen.io/rachsmith/ Rachel Smith].
@@ -41,7 +39,7 @@
</li>
</li>
</ul>
</ul>
- <h3>More extensive / advanced articles and courses</h3>
+ <h3>更加广泛、高级的文章与教程</h3>
<ul>
<ul>
<li>
<li>
[link:http://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
[link:http://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
@@ -65,7 +63,7 @@
</li>
</li>
</ul>
</ul>
- <h3>Tutorials in other languages</h3>
+ <h3>其它非英语的教程</h3>
<ul>
<ul>
<li>
<li>
[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
@@ -73,7 +71,7 @@
</ul>
</ul>
- <h2>News and Updates</h2>
+ <h2>新闻与更新</h2>
<ul>
<ul>
<li>
<li>
[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
@@ -88,8 +86,7 @@
[link:https://plus.google.com/104300307601542851567/posts Three.js posts] on Google+ – frequent posts on Three.js
[link:https://plus.google.com/104300307601542851567/posts Three.js posts] on Google+ – frequent posts on Three.js
</li>
</li>
</ul>
</ul>
-
- <h2>Examples</h2>
+ <h2>示例</h2>
<ul>
<ul>
<li>
<li>
[link:https://github.com/edwinwebb/three-seed/ three-seed] - three.js starter project with ES6 and Webpack
[link:https://github.com/edwinwebb/three-seed/ three-seed] - three.js starter project with ES6 and Webpack
@@ -109,7 +106,7 @@
</li>
</li>
</ul>
</ul>
- <h2>Tools</h2>
+ <h2>工具</h2>
<ul>
<ul>
<li>
<li>
[link:http://www.physgl.org/ physgl.org] - javascript front-end with wrappers to three.js, to bring WebGL
[link:http://www.physgl.org/ physgl.org] - javascript front-end with wrappers to three.js, to bring WebGL
@@ -127,17 +124,16 @@
</li>
</li>
</ul>
</ul>
- <h2>WebGL References</h2>
+ <h2>WebGL参考</h2>
<ul>
<ul>
<li>
<li>
[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf] - Reference of all WebGL and GLSL keywords, terminology, syntex and definations.
[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf] - Reference of all WebGL and GLSL keywords, terminology, syntex and definations.
</li>
</li>
</ul>
</ul>
- <h2>Old Links</h2>
+ <h2>较旧的链接</h2>
<p>
<p>
- These links are kept for historical purposes - you may still find them useful, but be warned that
- they may have information relating to very old versions of three.js.