未验证 提交 6563449b 编写于 作者: M Mr.doob 提交者: GitHub

Merge pull request #17345 from gogoend/zh_doc

Zh doc: Translations for some new contents; Fixes; Sync with the En doc to 2019-8-21.
......@@ -90,6 +90,9 @@
<h3>[property:Number offset]</h3>
<p>音频开始播放的偏移时间. 和[link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start AudioBufferSourceNode.start]()的*offset*参数一样. 默认为 *0*.</p>
<h3>[property:Number duration]</h3>
<p>覆盖音频的持续时间。与[link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start AudioBufferSourceNode.start]()中的*duration*属性相同。默认为*undefined*,以用于播放整个buffer。</p>
<h3>[property:String source]</h3>
<p>使用 [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createBufferSource AudioContext.createBufferSource]()创建的[link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode AudioBufferSourceNode].</p>
......
......@@ -103,9 +103,17 @@
这个值不应当为负,并且应当比near属性小。
</p>
<h3>[property:Camera camera]</h3>
<p>
The camera to use when raycasting against view-dependent objects such as billboarded objects like [page:Sprites]. This field
can be set manually or is set when calling "setFromCamera".
Defaults to null.
</p>
<h3>[property:Object params]</h3>
<p>
具有以下属性的物体<code>
具有以下属性的对象<code>
{
Mesh: {},
Line: {},
......
......@@ -36,10 +36,10 @@
</p>
<h2>属性</h2>
<p>See the base [page:Loader] class for common properties.</p>
<p>共有属性请参见其基类[page:Loader]。</p>
<h2>方法</h2>
<p>See the base [page:Loader] class for common methods.</p>
<p>共有属性请参见其基类[page:Loader]。</p>
<h3>[method:null load]( [param:String url], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
<p>
......
......@@ -51,7 +51,7 @@
这意味着
<code>
var m = new Matrix4();
var m = new THREE.Matrix4();
m.set( 11, 12, 13, 14,
21, 22, 23, 24,
......
......@@ -32,7 +32,7 @@
</ul>
<p>
其他的一些事物也可以使用维向量进行表示,但以上这些是它在three.js中的常用用途。
其他的一些事物也可以使用维向量进行表示,但以上这些是它在three.js中的常用用途。
</p>
......
......@@ -10,9 +10,7 @@
<body>
<h1>雾-指数([name])</h1>
<p class="desc">
这个类中的参数定义了指数雾。也就是说,雾的密度是随着距离指数增大的。</p>
<p class="desc">该类所包含的参数定义了指数雾,它可以在相机附近提供清晰的视野,且距离相机越远,雾的浓度随着指数增长越快。</p>
<h2>构造器</h2>
......
......@@ -84,7 +84,7 @@
<h3>[method:null loadAnimation]( [param:String url], [param:Object3D object], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
<p>
[page:String url] — A string or an array of string containing the path/URL of the <em>.vmd</em> file(s).If two or more files are specified, they'll be merged.<br />
[page:Object3D object] — [page:SkinnedMesh] or [page:Camera]. Clip and its tacks will be fitting to this object.<br />
[page:Object3D object] — [page:SkinnedMesh] or [page:Camera]. Clip and its tracks will be fitting to this object.<br />
[page:Function onLoad] — A function to be called after the loading is successfully completed.<br />
[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, that contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives error as an argument.<br />
......
......@@ -8,18 +8,18 @@
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<h1>轨道控制器([name])</h1>
<p class="desc">
Orbit controls allow the camera to orbit around a target.<br>
Orbit controls(轨道控制器)可以使得相机围绕目标进行轨道运动。<br>
To use this, as with all files in the /examples directory, you will have to
include the file seperately in your HTML.
要使用这一功能,就像在/examples(示例)目录中的所有文件一样,
您必须在HTML中包含这个文件。
</p>
<h2>Example</h2>
<h2>示例</h2>
<p>[example:misc_controls_orbit misc / controls / orbit ]</p>
......@@ -54,10 +54,10 @@ function animate() {
<h3>[name]( [param:Camera object], [param:HTMLDOMElement domElement] )</h3>
<p>
[page:Camera object]: (required) The camera to be controlled. The camera must not be a child of another object, unless that object is the scene itself.<br><br>
[page:Camera object]: (必须)将要被控制的相机。该相机不允许是其他任何对象的子级,除非该对象是场景自身。<br><br>
[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.
[page:HTMLDOMElement domElement]: (可选)用于事件监听的HTML元素,其默认值为整个文档,
但是如果你只希望在特定的元素上(例如Canvas上)进行控制,在这里进行指定即可。
</p>
......@@ -65,72 +65,71 @@ function animate() {
<h3>[property:Boolean autoRotate]</h3>
<p>
Set to true to automatically rotate around the target.<br> Note that if this is enabled, you must call [page:.update]
() in your animation loop.
将其设为true,以自动围绕目标旋转。<br>
请注意,如果它被启用,你必须在你的动画循环里调用[page:.update]()。
</p>
<h3>[property:Float autoRotateSpeed]</h3>
<p>
How fast to rotate around the target if [property:Boolean autoRotate] is true. Default is 2.0, which equates to 30 seconds
per rotation at 60fps.<br> Note that if [property:Boolean autoRotate] is enabled, you must call [page:.update]
() in your animation loop.
当[property:Boolean autoRotate]为true时,围绕目标旋转的速度将有多快,默认值为2.0,相当于在60fps时每旋转一次需要30秒。<br>
请注意,如果[property:Boolean autoRotate]被启用,你必须在你的动画循环里调用[page:.update]()。
</p>
<h3>
[property:Float dampingFactor]</h3>
<p>
The damping inertia used if [property:Boolean enableDamping] is set to true.<br> Note that for this to work, you must
call [page:.update] () in your animation loop.
当[property:Boolean enableDamping]设置为true的时候,阻尼惯性有多大。<br>
请注意,要使得这一值生效,你必须在你的动画循环里调用[page:.update]()。
</p>
<h3>[property:HTMLDOMElement domElement]</h3>
<p>
The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
not set up new event listeners. Default is the whole document.
用于监听鼠标事件或触摸事件的HTMLDOMElement(DOM元素)。该值必须在构造函数中进行传入;
在此更改它将不会设置新的事件监听器。默认值是整个文档。
</p>
<h3>[property:Boolean enabled]</h3>
<p>
Whether or not the controls are enabled.
控制器是否被启用。
</p>
<h3>[property:Boolean enableDamping]</h3>
<p>
Set to true to enable damping (inertia), which can be used to give a sense of weight to the controls. Default is false.<br>
Note that if this is enabled, you must call [page:.update] () in your animation loop.
将其设置为true以启用阻尼(惯性),这将给控制器带来重量感。默认值为false。<br>
请注意,如果该值被启用,你将必须在你的动画循环里调用[page:.update]()。
</p>
<h3>[property:Boolean enableKeys]</h3>
<p>
Enable or disable the use of keyboard controls.
启用或禁用键盘控制。
</p>
<h3>[property:Boolean enablePan]</h3>
<p>
Enable or disable camera panning. Default is true.
启用或禁用摄像机平移,默认为true。
</p>
<h3>[property:Boolean enableRotate]</h3>
<p>
Enable or disable horizontal and vertical rotation of the camera. Default is true.<br>
Note that it is possible to disable a single axis by setting the min and max of the
[page:.minPolarAngle polar angle] or [page:.minAzimuthAngle azimuth angle] to the same value,
which will cause the vertical or horizontal rotation to be fixed at that value.
启用或禁用摄像机水平或垂直旋转。默认值为true。<br>
请注意,可以通过将[page:.minPolarAngle polar angle]或者[page:.minAzimuthAngle azimuth angle]
的min和max设置为相同的值来禁用单个轴,
这将使得水平旋转或垂直旋转固定为所设置的值。
</p>
<h3>[property:Boolean enableZoom]</h3>
<p>
Enable or disable zooming (dollying) of the camera.
启用或禁用摄像机的缩放。
</p>
<h3>[property:Float keyPanSpeed]</h3>
<p>
How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.
当使用键盘按键的时候,相机平移的速度有多快。默认值为每次按下按键时平移7像素。
</p>
<h3>[property:Object keys]</h3>
<p>
This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys.
这一对象包含了用于控制相机平移的按键代码的引用。默认值为4个箭头(方向)键。
<code>
controls.keys = {
LEFT: 37, //left arrow
......@@ -138,56 +137,55 @@ controls.keys = {
RIGHT: 39, // right arrow
BOTTOM: 40 // down arrow
}
</code> See [link:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode this page] for a full
list of keycodes.
</code>请参阅[link:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode this page]来查看所有按键的代码列表。
</p>
<h3>[property:Float maxAzimuthAngle]</h3>
<p>
How far you can orbit horizontally, upper limit. Range is - Math.PI to Math.PI ( or Infinity for no limit ) and default is
Infinity;
你能够水平旋转的角度的上限,范围是-Math.PI到Math.PI(或Infinity无限制),
其默认值为Infinity。
</p>
<h3>[property:Float maxDistance]</h3>
<p>
How far you can dolly out ( [page:PerspectiveCamera] only ). Default is Infinity.
你能够将相机向外移动多少(仅适用于[page:PerspectiveCamera]),其默认值为Infinity。
</p>
<h3>[property:Float maxPolarAngle]</h3>
<p>
How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.
你能够垂直旋转的角度的上限,范围是0到Math.PI,其默认值为Math.PI。
</p>
<h3>[property:Float maxZoom]</h3>
<p>
How far you can zoom out ( [page:OrthographicCamera] only ). Default is Infinity.
你能够将相机缩小多少( 仅适用于[page:OrthographicCamera] only ),其默认值为Infinity。
</p>
<h3>[property:Float minAzimuthAngle]</h3>
<p>
How far you can orbit horizontally, lower limit. Range is - Math.PI to Math.PI ( or - Infinity for no limit ) and default
is - Infinity;
你能够水平旋转的角度的下限,范围是-Math.PI到Math.PI(或-Infinity无限制),
其默认值为-Infinity。
</p>
<h3>[property:Float minDistance]</h3>
<p>
How far you can dolly in ( [page:PerspectiveCamera] only ). Default is 0.
你能够将相机向内移动多少(仅适用于[page:PerspectiveCamera]),其默认值为0。
</p>
<h3>[property:Float minPolarAngle]</h3>
<p>
How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.
你能够垂直旋转的角度的下限,范围是0到Math.PI,其默认值为0。
</p>
<h3>[property:Float minZoom]</h3>
<p>
How far you can zoom in ( [page:OrthographicCamera] only ). Default is 0.
你能够将相机放大多少( 仅适用于[page:OrthographicCamera] ),其默认值为0。
</p>
<h3>
[property:Object mouseButtons]</h3>
<p>
This object contains references to the mouse actions used by the controls.
这一对象包含了对用于控制的鼠标按钮的引用。
<code>
controls.mouseButtons = {
LEFT: THREE.MOUSE.ROTATE,
......@@ -199,39 +197,39 @@ controls.mouseButtons = {
<h3>[property:Camera object]</h3>
<p>
The camera being controlled.
正被控制的摄像机。
</p>
<h3>[property:Float panSpeed]</h3>
<p>
Speed of panning. Default is 1.
位移的速度,其默认值为1。
</p>
<h3>[property:Vector3 position0]</h3>
<p>
Used internally by the [method:saveState] and [method:reset] methods.
由[method:saveState]和[method:reset]方法在内部使用。
</p>
<h3>[property:Float rotateSpeed]</h3>
<p>
Speed of rotation. Default is 1.
旋转的速度,其默认值为1.
</p>
<h3>[property:Boolean screenSpacePanning]</h3>
<p>
Defines how the camera's position is translated when panning. If true, the camera pans in screen space.
Otherwise, the camera pans in the plane orthogonal to the camera's up direction. Default is false.
定义当平移的时候摄像机的位置将如何移动。如果为true,摄像机将在屏幕空间内平移。
否则,摄像机将在与摄像机向上方向垂直的平面中平移。其默认值为false。
</p>
<h3>[property:Vector3 target0]</h3>
<p>
Used internally by the [method:saveState] and [method:reset] methods.
由[method:saveState]和[method:reset]方法在内部使用。
</p>
<h3>[property:Vector3 target]</h3>
<p>
The focus point of the controls, the [page:.object] orbits around this. It can be updated manually at any point to change
the focus of the controls.
控制器的焦点,[page:.object]的轨道围绕它运行。
它可以在任何时候被手动更新,以更改控制器的焦点。
</p>
<h3>[property:Object touches]</h3>
......@@ -247,11 +245,12 @@ controls.touches = {
<h3>[property:Float zoom0]</h3>
<p>
Used internally by the [method:saveState] and [method:reset] methods.
由[method:saveState]和[method:reset]方法在内部使用。
</p>
<h3>[property:Float zoomSpeed]</h3>
<p>
摄像机缩放的速度,其默认值为1。
Speed of zooming / dollying. Default is 1.
</p>
......@@ -261,36 +260,36 @@ controls.touches = {
<h3>[method:null dispose] ()</h3>
<p>
Remove all the event listeners.
移除所有的事件监听。
</p>
<h3>[method:radians getAzimuthalAngle] ()</h3>
<p>
Get the current horizontal rotation, in radians.
获得当前的水平旋转,单位为弧度。
</p>
<h3>[method:radians getPolarAngle] ()</h3>
<p>
Get the current vertical rotation, in radians.
获得当前的垂直旋转,单位为弧度。
</p>
<h3>[method:null reset] ()</h3>
<p>
Reset the controls to their state from either the last time the [page:.saveState] was called, or the initial state.
将控制器重置为上次调用[page:.saveState]时的状态,或者初始状态。
</p>
<h3>[method:null saveState] ()</h3>
<p>
Save the current state of the controls. This can later be recovered with [page:.reset].
保存当前控制器的状态。这一状态可在之后由[page:.reset]所恢复。
</p>
<h3>[method:Boolean update] ()</h3>
<p>
Update the controls. Must be called after any manual changes to the camera's transform,
or in the update loop if [page:.autoRotate] or [page:.enableDamping] are set.
更新控制器。必须在摄像机的变换发生任何手动改变后调用,
或如果[page:.autoRotate]或[page:.enableDamping]被设置时,在update循环里调用。
</p>
<h2>Source</h2>
<h2>源代码</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js examples/js/controls/OrbitControls.js]
......
......@@ -9,15 +9,15 @@
</head>
<body>
[page:Loader] &rarr;
<h1>[name]</h1>
<h1>MMD加载器([name])</h1>
<p class="desc"> A loader for <a href="http://www.geocities.jp/higuchuu4/index_e.htm"><em>MMD</em></a> resources. <br /><br />
[name] creates Three.js Objects from MMD resources as PMD, PMX, VMD, and VPD files.
See [page:MMDAnimationHelper] for MMD animation handling as IK, Grant, and Physics.<br /><br />
<p class="desc">一个用于加载<a href="http://www.geocities.jp/higuchuu4/index_e.htm"><em>MMD</em></a>资源的加载器。<br /><br />
[name]从MMD资源(例如PMD、PMX、VMD和VPD文件)中创建Three.js物体(对象)。
请参阅[page:MMDAnimationHelper]来了解MMD动画的处理,例如IK、Grant和Physics。<br /><br />
If you want raw content of MMD resources, use .loadPMD/PMX/VMD/VPD methods.
如果你想要MMD资源的原始内容,请使用.loadPMD/PMX/VMD/VPD方法。
<h2>Example</h2>
<h2>示例</h2>
<code>
// Instantiate a loader
......@@ -55,86 +55,86 @@
<br />
<hr>
<h2>Constructor</h2>
<h2>构造函数</h2>
<h3>[name]( [param:LoadingManager manager] )</h3>
<h3>[name]( [param:LoadingManager manager] )</h3>
<p>
[page:LoadingManager manager] — The [page:LoadingManager loadingManager] for the loader to use. Default is [page:LoadingManager THREE.DefaultLoadingManager].
[page:LoadingManager manager] — 加载器使用的[page:LoadingManager loadingManager](加载管理器),默认值是[page:LoadingManager THREE.DefaultLoadingManager]。
</p>
<p>
Creates a new [name].
创建一个新的[name]。
</p>
<h2>Properties</h2>
<h2>属性</h2>
<h2>Methods</h2>
<h2>方法</h2>
<h3>[method:null load]( [param:String url], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
<p>
[page:String url] — A string containing the path/URL of the <em>.pmd</em> or <em>.pmx</em> file.<br />
[page:Function onLoad] — A function to be called after the loading is successfully completed.<br />
[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, that contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives error as an argument.<br />
[page:String url] — 一个包含有<em>.pmd</em><em>.pmx</em>文件的路径或URL的字符串。<br />
[page:Function onLoad] — 当加载过程成功完成以后将被调用的函数。<br />
[page:Function onProgress] — (可选)加载过程正在进行的时候被调用的函数。其参数是一个XMLHttpRequest实例,其包含了[page:Integer total] bytes(总的字节数)和[page:Integer loaded] bytes(已经载入的字节数)。<br />
[page:Function onError] — (可选) 加载过程中若发生了错误将被调用的函数。这一函数接收错误作为参数。<br />
</p>
<p>
Begin loading PMD/PMX model file from url and fire the callback function with the parsed [page:SkinnedMesh] containing [page:BufferGeometry] and an array of [page:MeshToonMaterial].
开始从URL中加载PMD/PMX模型文件,并使用包含有已被解析的[page:SkinnedMesh]和[page:MeshToonMaterial]数组的[page:BufferGeometry]对象来触发回调函数。
</p>
<h3>[method:null loadAnimation]( [param:String url], [param:Object3D object], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
<p>
[page:String url] — A string or an array of string containing the path/URL of the <em>.vmd</em> file(s).If two or more files are specified, they'll be merged.<br />
[page:Object3D object] — [page:SkinnedMesh] or [page:Camera]. Clip and its tacks will be fitting to this object.<br />
[page:Function onLoad] — A function to be called after the loading is successfully completed.<br />
[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, that contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives error as an argument.<br />
[page:String url] — 一个包含有<em>.vmd</em>文件的路径或URL的字符串或字符串数组。如果两个及以上文件被指定,它们将会合并。<br />
[page:Object3D object] — [page:SkinnedMesh] 或 [page:Camera]。 剪辑及其轨道将会适应到该对象。<br />
[page:Function onLoad] — 成功加载完成后被调用的函数。<br />
[page:Function onProgress] — (可选)当加载正在进行时被调用的函数,参数将是XMLHttpRequest实例,其包含了 .[page:Integer total] (总的)和 .[page:Integer loaded] (已加载的)字节数。<br />
[page:Function onError] — (可选)如果加载过程中发生错误时被调用的函数,该函数接受一个错误来作为参数。<br />
</p>
<p>
Begin loading VMD motion file(s) from url(s) and fire the callback function with the parsed [page:AnimatioinClip].
开始从url(s)加载VMD动画文件(可能有多个文件),并使用已解析的[page:AnimatioinClip]触发回调函数。
</p>
<h3>[method:null loadWithAnimation]( [param:String modelUrl], [param:String vmdUrl], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
<p>
[page:String modelUrl] — A string containing the path/URL of the <em>.pmd</em> or <em>.pmx</em> file.<br />
[page:String vmdUrl] — A string or an array of string containing the path/URL of the <em>.vmd</em> file(s).<br />
[page:Function onLoad] — A function to be called after the loading is successfully completed.<br />
[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, that contains .[page:Integer total] and .[page:Integer loaded] bytes.<br />
[page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives error as an argument.<br />
[page:String modelUrl] — 一个包含有<em>.pmd</em><em>.pmx</em>文件的路径或URL的字符串。<br />
[page:String vmdUrl] — 一个包含有<em>.vmd</em>文件的路径或URL的字符串或字符串数组。<br />
[page:Function onLoad] — 成功加载完成后被调用的函数。<br />
[page:Function onProgress] — (可选)当加载正在进行时被调用的函数,参数将是XMLHttpRequest实例,其包含了 .[page:Integer total] (总的)和 .[page:Integer loaded] (已加载的)字节数。<br />
[page:Function onError] — (可选)如果加载过程中发生错误时被调用的函数,该函数接受一个错误来作为参数。<br />
</p>
<p>
Begin loading PMD/PMX model file and VMD motion file(s) from urls and fire the callback function with an [page:Object] containing parsed [page:SkinnedMesh] and [page:AnimationClip] fitting to the [page:SkinnedMesh].
开始从URL中加载PMD/PMX模型文件和VMD动画文件(可能有多个文件),并使用一个[page:Object] —— 包含有已解析的[page:SkinnedMesh]和适应[page:SkinnedMesh]的[page:AnimationClip],来触发回调函数。
</p>
<h3>[method:MMDLoader setCrossOrigin]( [param:String crossOrigin] )</h3>
<p>
[page:String crossOrigin] — The crossOrigin string to implement CORS for loading the url from a different domain that allows CORS.
[page:String crossOrigin] — crossOrigin字符串,用于实现CORS,以便从一个允许CORS的其它域加载url。
</p>
<h3>[method:MMDLoader setAnimationPath]( [param:String animationPath] )</h3>
<p>
[page:String animationPath] — Base path for loading animation data (VMD/VPD files).
[page:String animationPath] — 用于加载动画数据(VMD/VPD 文件)的基础路径。 Base path for loading animation data (VMD/VPD files).
</p>
<p>
Set the base path for additional resources like textures.
设置额外资源(例如贴图)的基础路径。
</p>
<h3>[method:MMDLoader setPath]( [param:String path] )</h3>
<p>
[page:String path] — Base path.
[page:String path] — 基础路径。
</p>
<p>
Sets the base path or URL from which to load files.
设置用于加载文件的基础路径或URL。
</p>
<h3>[method:MMDLoader setResourcePath]( [param:String resourcePath] )</h3>
<p>
[page:String resourcePath] — Base path for loading additional resources e.g. textures.
[page:String resourcePath] — 用于加载额外资源(例如贴图)的基础路径。
</p>
<p>
Set the base path for additional resources like textures.
设置额外资源(例如贴图)的基础路径。
</p>
<h2>Source</h2>
<h2>源代码</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/MMDLoader.js examples/js/loaders/MMDLoader.js]
......
......@@ -10,13 +10,13 @@
<body>
[page:Mesh] &rarr;
<h1>[name]</h1>
<h1>镜头光晕([name])</h1>
<p class="desc">
Creates a simulated lens flare that tracks a light.<br /><br />
创建一个模拟追踪着灯光的镜头光晕。<br /><br />
</p>
<h2>Example</h2>
<h2>示例</h2>
<p>
[example:webgl_lensflares lensflares]
......@@ -46,24 +46,24 @@ light.add( lensflare );
<h3>LensflareElement( [param:Texture texture], [param:Float size], [param:Float distance], [param:Color color] )</h3>
<p>
[page:Texture texture] - THREE.Texture to use for the flare. <br />
[page:Float size] - (optional) size in pixels <br />
[page:Float distance] - (optional) (0-1) from light source (0 = at light source) <br />
[page:Color color] - (optional) the [page:Color] of the lens flare
[page:Texture texture] - 用于光晕的THREE.Texture(贴图)<br />
[page:Float size] - (可选)光晕尺寸(单位为像素)<br />
[page:Float distance] - (可选)和光源的距离值在0到1之间(值为0时在光源的位置)<br />
[page:Color color] - (可选)光晕的([page:Color])颜色
</p>
<h2>Properties</h2>
<p>See the base [page:Mesh] class for common properties.</p>
<h2>属性</h2>
<p>请参阅其基类[page:Mesh]来了解共有属性。</p>
<h3>[property:Boolean isLensflare]</h3>
<p>
Used to check whether this or derived classes are lensflares. Default is *true*.<br /><br />
用于检查这个类或者派生类是否为lensflares,默认为*true*。<br /><br />
You should not change this, as it used internally for optimisation.
你不应当对这个属性进行改变,因为它在内部使用,以用于优化。
</p>
<h2>Source</h2>
<h2>源代码</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/objects/Lensflare.js examples/js/objects/Lensflare.js]
......
......@@ -9,13 +9,14 @@
</head>
<body>
<h1>[name]</h1>
<h1>效果合成器([name])</h1>
<p class="desc">
TODO
用于在three.js中实现后期处理效果。该类管理了产生最终视觉效果的后期处理过程链。
后期处理过程根据它们添加/插入的顺序来执行,最后一个过程会被自动渲染到屏幕上。
</p>
<h2>Examples</h2>
<h2>示例</h2>
<p>
[example:webgl_postprocessing postprocessing]<br />
......@@ -43,68 +44,68 @@
[example:webgl_postprocessing_unreal_bloom_selective postprocessing unreal bloom selective]<br />
</p>
<h2>Constructor</h2>
<h2>构造函数</h2>
<h3>[name]( [param:WebGLRenderer renderer], [param:WebGLRenderTarget renderTarget] )</h3>
<p>
[page:WebGLRenderer renderer] -- The renderer used to render the scene. <br />
[page:WebGLRenderTarget renderTarget] -- (optional) A preconfigured render target internally used by [name].
[page:WebGLRenderer renderer] -- 用于渲染场景的渲染器。<br />
[page:WebGLRenderTarget renderTarget] -- (可选)一个预先配置的渲染目标,内部由 [name] 使用。
</p>
<h2>Properties</h2>
<h2>属性</h2>
<h3>[property:Boolean passes]</h3>
<p>
An array representing the (ordered) chain of post-processing passes.
一个用于表示后期处理过程链(包含顺序)的数组。
</p>
<h3>[property:WebGLRendererTarget readBuffer]</h3>
<p>
A reference to the internal read buffer. Passes usually read the previous render result from this buffer.
内部读缓冲区的引用。过程一般从该缓冲区读取先前的渲染结果。
</p>
<h3>[property:WebGLRenderer renderer]</h3>
<p>
A reference to the internal renderer.
内部渲染器的引用。
</p>
<h3>[property:Boolean renderToScreen]</h3>
<p>
Whether the final pass is rendered to the screen (default framebuffer) or not.
最终过程是否被渲染到屏幕(默认帧缓冲区)。
</p>
<h3>[property:WebGLRendererTarget writeBuffer]</h3>
<p>
A reference to the internal write buffer. Passes usually write their result into this buffer.
内部写缓冲区的引用。过程常将它们的渲染结果写入该缓冲区。
</p>
<h2>Methods</h2>
<h2>方法</h2>
<h3>[method:void addPass]( [param:Pass pass] )</h3>
<p>
pass -- The pass to add to the pass chain.<br /><br />
pass -- 将被添加到过程链的过程<br /><br />
Adds the given pass to the pass chain.
将传入的过程添加到过程链。
</p>
<h3>[method:void insertPass]( [param:Pass pass], [param:Integer index] )</h3>
<p>
pass -- The pass to insert into the pass chain.<br />
index -- Defines the position in the pass chain where the pass should be inserted.<br /><br />
pass -- 将被插入到过程链的过程。<br />
index -- 定义过程链中过程应插入的位置。<br /><br />
Inserts the given pass into the pass chain at the given index.
将传入的过程插入到过程链中所给定的索引处。
</p>
<h3>[method:boolean isLastEnabledPass]( [param:Integer passIndex] )</h3>
<p>
passIndex -- The pass to check.<br /><br />
passIndex -- 被用于检查的过程<br /><br />
Returns true if the pass for the given index is the last enabled pass in the pass chain.
Used by [name] to determine when a pass should be rendered to screen.
如果给定索引的过程在过程链中是最后一个启用的过程,则返回true。
由[name]所使用,来决定哪一个过程应当被渲染到屏幕上。
</p>
<h3>[method:void render]( [param:Float deltaTime] )</h3>
......@@ -112,41 +113,43 @@
<p>
deltaTime -- The delta time value.<br /><br />
Executes all enabled post-processing passes in order to produce the final frame.
执行所有启用的后期处理过程,来产生最终的帧,
</p>
<h3>[method:void reset]( [param:WebGLRenderTarget renderTarget] )</h3>
<p>
[page:WebGLRenderTarget renderTarget] -- (optional) A preconfigured render target internally used by [name]..<br /><br />
[page:WebGLRenderTarget renderTarget] -- (可选)一个预先配置的渲染目标,内部由 [name] 使用。<br /><br />
Resets the internal state of the [name].
重置所有[name]的内部状态。
</p>
<h3>[method:void setPixelRatio]( [param:Float pixelRatio] )</h3>
<p>
pixelRatio -- The device pixel ratio.<br /><br />
pixelRatio -- 设备像素比<br /><br />
设置设备的像素比。该值通常被用于HiDPI设备,以阻止模糊的输出。
因此,该方法语义类似于[page:WebGLRenderer.setPixelRatio]()。
Sets device pixel ratio. This is usually used for HiDPI device to prevent bluring output.
Thus, the semantic of the method is similar to [page:WebGLRenderer.setPixelRatio]().
</p>
<h3>[method:void setSize]( [param:Integer width], [param:Integer height] )</h3>
<p>
width -- The width of the [name].<br />
height -- The height of the [name].<br /><br />
width -- [name]的宽度。<br />
height -- [name]的高度。<br /><br />
考虑设备像素比,重新设置内部渲染缓冲和过程的大小为(width, height)。
因此,该方法语义类似于[page:WebGLRenderer.setSize]()。
Resizes the internal render buffers and passes to (width, height) with device pixel ratio taken into account.
Thus, the semantic of the method is similar to [page:WebGLRenderer.setSize]().
</p>
<h3>[method:void swapBuffers]()</h3>
<p>Swaps the internal read/write buffers.</p>
<p>交换内部的读/写缓冲。</p>
<h2>Source</h2>
<h2>源代码</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/postprocessing/EffectComposer.js examples/js/postprocessing/EffectComposer.js]
......
......@@ -8,10 +8,10 @@
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<h1>CSS 2D渲染器([name])</h1>
<p class="desc">[name] is a simplified version of [page:CSS3DRenderer]. The only transformation that is supported is translation.<br /><br />
The renderer is very useful if you want to combine HTML based labels with 3D objects. Here too, the respective DOM elements are wrapped into an instance of *CSS2DObject* and added to the scene graph.<br />
<p class="desc">[name]是[page:CSS3DRenderer](CSS 3D渲染器)的简化版本,唯一支持的变换是位移。<br /><br />
如果你希望将三维物体和基于HTML的标签相结合,则这一渲染器将十分有用。在这里,各个DOM元素也被包含到一个*CSS2DObject*实例中,并被添加到场景图中。<br />
</p>
<script>
......@@ -30,35 +30,35 @@
</script>
<h2>Examples</h2>
<h2>示例</h2>
<p>
[example:css2d_label]<br>
[example:webgl_loader_pdb molecules]
</p>
<h2>Constructor</h2>
<h2>构造函数</h2>
<h3>[name]()</h3>
<h2>Methods</h2>
<h2>方法</h2>
<h3>[method:Object getSize]()</h3>
<p>
Returns an object containing the width and height of the renderer.
返回一个包含有渲染器宽和高的对象。
</p>
<h3>[method:null render]( [param:Scene scene], [param:Camera camera] )</h3>
<p>
Renders a [page:Scene scene] using a [page:Camera camera].<br />
使用[page:Camera camera]渲染[page:Scene scene]。<br />
</p>
<h3>[method:null setSize]([param:Number width], [param:Number height])</h3>
<p>
Resizes the renderer to (width, height).
将渲染器的尺寸调整为(width, height).
</p>
<h2>Source</h2>
<h2>源代码</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CSS2DRenderer.js examples/js/renderers/CSS2DRenderer.js]
......
......@@ -8,19 +8,20 @@
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<p class="desc">[name] can be used to apply hierarchical 3D transformations to DOM elements
via the CSS3 [link:https://www.w3schools.com/cssref/css3_pr_transform.asp transform] property.
This renderer is particular interesting if you want to apply 3D effects to a website without
canvas based rendering. It can also be used in order to combine DOM elements with WebGL
content.<br /><br />
There are, however, some important limitations:
<h1>CSS 3D渲染器([name])</h1>
<p class="desc">
[name]用于通过CSS3的[link:https://www.w3schools.com/cssref/css3_pr_transform.asp transform]属性,
将层级的3D变换应用到DOM元素上。
如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换,那么这一渲染器十分有趣。
同时,它也可以将DOM元素与WebGL的内容相结合。
<br /><br />
然而,这一渲染器也有一些十分重要的限制:
<ul>
<li>It's not possible to use the material system of *three.js*.</li>
<li>It's also not possible to use geometries.</li>
<li>它不可能使用*three.js*中的材质系统。</li>
<li>同时也不可能使用几何体。</li>
</ul>
So [name] is just focused on ordinary DOM elements. These elements are wrapped into special objects (*CSS3DObject* or *CSS3DSprite*) and then added to the scene graph.
因此,[name]仅仅关注普通的DOM元素,这些元素被包含到了特殊的对象中(*CSS3DObject*或者*CSS3DSprite*),然后被加入到场景图中。
</p>
<script>
......@@ -39,7 +40,7 @@
</script>
<h2>Examples</h2>
<h2>示例</h2>
<p>
[example:css3d_molecules molecules]<br />
......@@ -49,28 +50,28 @@
[example:css3d_sprites sprites]<br />
</p>
<h2>Constructor</h2>
<h2>构造函数</h2>
<h3>[name]()</h3>
<h2>Methods</h2>
<h2>方法</h2>
<h3>[method:Object getSize]()</h3>
<p>
Returns an object containing the width and height of the renderer.
返回一个包含有渲染器宽和高的对象。
</p>
<h3>[method:null render]( [param:Scene scene], [param:PerspectiveCamera camera] )</h3>
<p>
Renders a [page:Scene scene] using a [page:PerspectiveCamera perspective camera].<br />
使用[page:PerspectiveCamera perspective camera]渲染[page:Scene scene]。<br />
</p>
<h3>[method:null setSize]([param:Number width], [param:Number height])</h3>
<p>
Resizes the renderer to (width, height).
将渲染器尺寸重新调整为(width, height)。
</p>
<h2>Source</h2>
<h2>源代码</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CSS3DRenderer.js examples/js/renderers/CSS3DRenderer.js]
......
......@@ -8,29 +8,29 @@
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<h1>SVG渲染器([name])</h1>
<div class="desc">
<p>
[name] can be used to render geometric data using SVG. The produced vector graphics are particular useful in the following use cases:
[name]被用于使用SVG来渲染几何数据,所产生的矢量图形在以下几个方面十分有用:
</p>
<ul>
<li>Animated logos or icons</li>
<li>Interactive 2D/3D diagrams or graphs</li>
<li>Interactive maps</li>
<li>Complex or animated user interfaces</li>
<li>动画标志(logo)或者图标(icon)</li>
<li>可交互的2D或3D图表或图形</li>
<li>交互式地图</li>
<li>复杂的或包含动画的用户界面</li>
</ul>
<p>
[name] has various advantages. It produces crystal-clear and sharp output which is independent of the actual viewport resolution.<br />
SVG elements can be styled via CSS. And they have good accessibility since it's possible to add metadata like title or description (useful for search engines or screen readers).
[name]具有很多优势。它产生清晰并且锐利的图像输出,它和实际视口分辨率无关。<br />
SVG元素可以通过CSS来控制样式;并且由于它可以添加诸如标题或者描述文字之类的元数据(对于搜索引擎或者屏幕阅读器十分有用),因此它具有十分良好的可访问性。
</p>
<p>
There are, however, some important limitations:
然而,SVG也有一些十分重要的限制:
</p>
<ul>
<li>No advanced shading</li>
<li>No texture support</li>
<li>No shadow support</li>
<li>没有高级的着色器</li>
<li>不支持纹理</li>
<li>不支持阴影</li>
</ul>
</div>
......@@ -50,60 +50,51 @@
</script>
<h2>Examples</h2>
<h2>示例</h2>
<p>
[example:svg_lines lines]<br />
[example:svg_sandbox sandbox]
</p>
<h2>Constructor</h2>
<h2>构造函数</h2>
<h3>[name]()</h3>
<h2>Properties</h2>
<h3>[property:Number overdraw]</h3>
<p>
Number of fractional pixels to enlarge polygons in order to prevent anti-aliasing gaps. Range is [0..1]. Default is *0.5*.
</p>
<h2>Methods</h2>
<h2>方法</h2>
<h3>[method:null clear]()</h3>
<p>
Tells the renderer to clear its drawing surface.
告诉渲染器来清除其绘图表面。
</p>
<h3>[method:null render]( [param:Scene scene], [param:Camera camera] )</h3>
<p>
Renders a [page:Scene scene] using a [page:Camera camera].
使用[page:Camera camera]来渲染一个[page:Scene scene]。
</p>
<h3>[method:null setClearColor]( [param:Color color], [param:number alpha] )</h3>
<p>
Sets the clearColor and the clearAlpha.
设置clearColor(空白颜色)以及clearAlpha(空白Alpha)。
</p>
<h3>[method:null setPrecision]( [param:Number precision] )</h3>
<p>
Sets the precision of the data used to create a path.
设置用于创建路径的数据的精度。
</p>
<h3>[method:null setQuality]()</h3>
<p>
Sets the render quality. Possible values are *low* and *high* (default).
设置渲染质量。可能的值有*low*和*high*(默认值)。
</p>
<h3>[method:null setSize]( [param:Number width], [param:Number height] )</h3>
<p>
Resizes the renderer to (width, height).
改变渲染器尺寸为(width, height)。
</p>
<h2>Source</h2>
<h2>源代码</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/SVGRenderer.js examples/js/renderers/SVGRenderer.js]
</p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/[path].js examples/js/[path].js]
</body>
</html>
......@@ -459,7 +459,7 @@ var list = {
"如何更新场景": "manual/zh/introduction/How-to-update-things",
"如何废置对象": "manual/zh/introduction/How-to-dispose-of-objects",
"如何创建VR内容": "manual/zh/introduction/How-to-create-VR-content",
"How to use post-processing": "manual/zh/introduction/How-to-use-post-processing",
"如何使用后期处理": "manual/zh/introduction/How-to-use-post-processing",
"矩阵变换": "manual/zh/introduction/Matrix-transformations",
"动画系统": "manual/zh/introduction/Animation-system"
},
......
......@@ -119,7 +119,7 @@
<h2>结果</h2>
<p>祝贺你!你现在已经成功完成了你的第一个Three.js应用程序。虽然它很简单,但现在你已经有了一个入门的起点。</p>
<p>下面是完整的代码,运行或者修改代码从而有助于你更好的理解它是如何工作的。</p>
<p>下面是完整的代码,可在[link:https://jsfiddle.net/mkba0ecu/ live example]运行、编辑;运行或者修改代码有助于你更好的理解它是如何工作的。</p>
<code>
&lt;html&gt;
......
......@@ -116,6 +116,12 @@ ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot =>
</li>
</ol>
</div>
<h3>IIS</h3>
<div>
<p>如果你正在使用Microsoft IIS来作为网站服务器,在服务器载入之前,请为.fbx扩展名增加MIME类型。</p>
<code>File name externsion: fbx MIME Type: text/plain</code>
<p>在默认情况下,IIS阻止 .fbx、 .obj 文件的下载,因此你必须对IIS进行配置,使得这些类型的文件可以被下载。</p>
</div>
<p>
其它简单的替代方案你可以在Stack Overflow上找到:[link:http://stackoverflow.com/q/12905426/24874 click here]。
......
......@@ -46,9 +46,14 @@ if ( WEBGL.isWebGL2Available() === false ) {
最终,three.js将在内部使用所给定的绘图环境来渲染,并自动将内置的材质的着色器代码转化为GLSL ES 3.00。
</p>
<p>
由于你是手动创建WebGL 2渲染上下文,因此还必须传入所有必需的上下文属性。
请注意:在上下文被创建后,将无法修改这些属性,因此将它们传递给WebGLRenderer将不会产生任何影响。
</p>
<code>
var canvas = document.createElement( 'canvas' );
var context = canvas.getContext( 'webgl2' );
var context = canvas.getContext( 'webgl2', { alpha: false } );
var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
</code>
......
......@@ -8,24 +8,24 @@
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>How to use post-processing</h1>
<h1>如何使用后期处理(How to use post-processing)</h1>
<p>
Many three.js applications render their 3D objects directly to the screen. Sometimes, however, you want to apply one or more graphical
effects like Depth-Of-Field, Bloom, Film Grain or various types of Anti-aliasing. Post-processing is a widely used approach
to implement such effects. First, the scene is rendered to a render target which represents a buffer in the video card's memory.
In the next step one ore more post-processing passes apply filters and effects to the image buffer before it is eventually rendered to
the screen.
很多three.js应用程序是直接将三维物体渲染到屏幕上的。
有时,你或许希望应用一个或多个图形效果,例如景深、发光、胶片微粒或是各种类型的抗锯齿。
后期处理是一种被广泛使用、用于来实现这些效果的方式。
首先,场景被渲染到一个渲染目标上,渲染目标表示的是一块在显存中的缓冲区。
接下来,在图像最终被渲染到屏幕之前,一个或多个后期处理过程将滤镜和效果应用到图像缓冲区。
</p>
<p>
three.js provides a complete post-processing solution via [page:EffectComposer] to implement such a workflow.
three.js通过[page:EffectComposer](效果合成器),提供了一个完整的后期处理解决方案来实现这样的工作流程。
</p>
<h2>Workflow</h2>
<h2>工作流程</h2>
<p>
The first step in the process is to import all necessary files from the examples directory. The guide assumes your are using the official
[link:https://www.npmjs.com/package/three npm package] of three.js. For our basic demo in this guide we need the following files.
首先,我们要做的是从示例(examples)文件夹导入所有必需的文件。本指南假设你正在使用three.js官方npm包([link:https://www.npmjs.com/package/three npm package])。
在本指南的基础示例中,我们需要下列文件。
</p>
<code>
......@@ -35,7 +35,7 @@
</code>
<p>
After all files are successfully imported, we can create our composer by passing in an instance of [page:WebGLRenderer].
当这些文件被成功导入后,我们便可以通过传入一个[page:WebGLRenderer]的实例,来创建我们的合成器了。
</p>
<code>
......@@ -43,8 +43,8 @@
</code>
<p>
When using a composer, it's necessary to change the application's animation loop. Instead of calling the render method of
[page:WebGLRenderer], we now use the respective counterpart of [page:EffectComposer].
在使用合成器时,我们需要对应用程序的动画循环进行更改。
现在我们不再调用[page:WebGLRenderer]的render方法,而是使用[page:EffectComposer]中对应的render方法。
</p>
<code>
......@@ -58,10 +58,10 @@
</code>
<p>
Our composer is now ready so it's possible to configure the chain of post-processing passes. These passes are responsible for creating
the final visual output of the application. They are processed in order of their addition/insertion. In our example, the instance of *RenderPass*
is executed first and then the instance of *GlitchPass*. The last enabled pass in the chain is automatically rendered to the screen. The setup
of the passes looks like so:
我们的合成器已经准备好了,现在我们就可以来配置后期处理过程链了。
这些过程负责创建应用程序的最终视觉输出,它们按照添加/插入的顺序来进行处理。
在我们的示例中,首先执行的是*RenderPass*实例,然后是*GlitchPass*。在链中的最后一个过程将自动被渲染到屏幕上。
这些过程的设置类似这样:
</p>
<code>
......@@ -73,23 +73,23 @@
</code>
<p>
*RenderPass* is normally placed at the beginning of the chain in order to provide the rendered scene as an input for the next post-processing step. In our case,
*GlitchPass* is going to use these image data to apply a wild glitch effect. Check out this [link:https://threejs.org/examples/webgl_postprocessing_glitch live example]
to see it in action.
*RenderPass*通常位于过程链的开始,以便将渲染好的场景作为输入来提供给下一个后期处理步骤。
在我们的示例中,*GlitchPass*将会使用这些图像数据,来应用一个疯狂的故障效果。参见这个示例:
[link:https://threejs.org/examples/webgl_postprocessing_glitch live example]来看一看它的实际效果。
</p>
<h2>Built-in Passes</h2>
<h2>内置过程</h2>
<p>
You can use a wide range of pre-defined post-processing passes provided by the engine. They are located in the
[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing] directory.
你可以使用由本引擎提供的各种预定义好的后期处理过程,
它们位于[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing]目录中。
</p>
<h2>Custom Passes</h2>
<h2>自定义过程</h2>
<p>
Sometimes you want to write a custom post-processing shader and include it into the chain of post-processing passes. For this scenario,
you can utilize *ShaderPass*. After importing the file and your custom shader, you can use the following code to setup the pass.
有时你或许想要自己写一个自定义后期处理着色器,并将其包含到后期处理过程链中。
对于这个需求,你可以使用*ShaderPass*。在引入该文件以及你的自定义着色期后,可以使用下列代码来设置该过程:
</p>
<code>
......@@ -103,9 +103,8 @@
</code>
<p>
The repository provides a file called [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader] which is a
good starting code for your own custom shader. *CopyShader* just copies the image contents of the [page:EffectComposer]'s read buffer
to its write buffer without applying any effects.
本仓库中提供了一个名为[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader]的文件,
这是你自定义自己的着色器的一个很好的起始代码。*CopyShader*仅仅是拷贝了读缓冲区中的图像内容到写缓冲区,不会应用任何效果。
</p>
</body>
......
......@@ -62,20 +62,19 @@
...
</code>
<h2>Importable Examples</h2>
<h2>可引入的示例</h2>
<p>
The core of three.js is focused on the most important components of a 3D engine. Many other components like loaders or controls are part of the
examples directory. three.js ensures that these files are kept in sync with the core but users have to import them separately if they are required
for a project. You can find in the [link:https://github.com/mrdoob/three.js/tree/master/examples/jsm examples/jsm] directory an ES6
module version for almost all example files. If you install three.js via npm, you can import them like so:
three.js的核心专注于实现3D引擎中最为重要的组件。其他诸如加载器和控制器等组件,是示例文件夹中的一部分。
three.js确保这些文件能够与核心保持同步,但如果在一个项目中这些组件是必要的,用户将必须分别地引入它们。
你可以在[link:https://github.com/mrdoob/three.js/tree/master/examples/jsm examples/jsm]文件夹中找到所有示例文件的ES6版本。
如果你是通过npm来安装three.js的,那么你可以使用类似下面的代码来引入它们:
</p>
<code>
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
</code>
<p>
Note: When using code from the examples directory, it's important that all files match the version of
your three.js main file. For example, it's not acceptable to use *GLTFLoader* and *OrbitControls* from R96 together
with three.js R103.
请注意:当你在使用来自示例(examples)文件夹中的代码时,其中的所有文件和你的three.js主文件版本相匹配是很重要的。
比如说,three.js的R103版本不能够接受和来自R96版本的*GLTFLoader*和*OrbitControls*一起使用。
</p>
</body>
</html>
......@@ -36,7 +36,7 @@ object.updateMatrix();
</code>
</li>
<li>
直接修改对象的矩阵。 [pageMatrix4]类有各种修改矩阵的方法:
直接修改对象的矩阵。 [page:Matrix4]类有各种修改矩阵的方法:
<code>
object.matrix.setRotationFromQuaternion( quaternion );
object.matrix.setPosition( start_position );
......@@ -57,7 +57,7 @@ object.matrixAutoUpdate = false;
<h2>旋转和四元数(Rotation and Quaternion)</h2>
<p>
Three.js提供了两种表示3D旋转的方式:[page:Euler Euler angles](欧拉角)和[pageQuaternion Quaternions](四元数),以及两者之间的转换方法。 欧拉角有称为“万向节锁定”的问题,其中某些配置可能失去一定程度的自由度(防止物体绕一个轴旋转)。 因此,对象旋转<em> 始终 </em>存储在对象的[page:Object3D.quaternion quaternion]中。
Three.js提供了两种表示3D旋转的方式:[page:Euler Euler angles](欧拉角)和[page:Quaternion Quaternions](四元数),以及两者之间的转换方法。 欧拉角有称为“万向节锁定”的问题,其中某些配置可能失去一定程度的自由度(防止物体绕一个轴旋转)。 因此,对象旋转<em> 始终 </em>存储在对象的[page:Object3D.quaternion quaternion]中。
</p>
<p>
该库的早期版本包含*useQuaternion*属性,当设置为false时,将导致对象的[page:Object3D.matrix matrix]从欧拉角计算。这种做法已被弃用 - 作为代替,您应该使用[page:Object3D.setRotationFromEuler setRotationFromEuler]方法,该方法将更新四元数。
......
......@@ -132,7 +132,7 @@
<h2>较旧的链接</h2>
<p>
这些链接是出于历史的目的而保留的,你或许可以发现它们仍然很有用,但是它们可能含有和three.js非常老旧的版本有关的信息。
这些链接是出于历史目的而保留的,你或许可以发现它们仍然很有用,它们可能含有和three.js较为早前版本的有关的信息。
</p>
<ul>
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册