Skip to content

Commit

Permalink
Docs: Improve Chinese translation. (mrdoob#26953)
Browse files Browse the repository at this point in the history 
* Update the Creating-a-scene page
* Add the Libraries-and-Plugins
 page
 (All based on the English version)
  • Loading branch information
@cswwww
cswwww authored Oct 12, 2023
1 parent f935752 commit 30985da
Show file tree
Hide file tree
Showing 4 changed files with 164 additions and 64 deletions.
1 change: 1 addition & 0 deletions docs/list.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -749,6 +749,7 @@
"画线": "manual/zh/introduction/Drawing-lines",
"创建文字": "manual/zh/introduction/Creating-text",
"载入3D模型": "manual/zh/introduction/Loading-3D-models",
"库和插件": "manual/zh/introduction/Libraries-and-Plugins",
"常见问题": "manual/zh/introduction/FAQ",
"一些有用的链接": "manual/zh/introduction/Useful-links"
},
Expand Down
115 changes: 52 additions & 63 deletions docs/manual/zh/introduction/Creating-a-scene.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,39 +9,22 @@
<body>
<h1>创建一个场景（[name]）</h1>

<p>这一部分将对three.js来做一个简要的介绍；我们将开始搭建一个场景，其中包含一个正在旋转的立方体。页面下方有一个已经完成的例子，当你遇到麻烦，或者需要帮助的时候，可以看一看。</p>
<p>这一部分将对 three.js 来做一个简要的介绍；我们将开始搭建一个场景，其中包含一个正在旋转的立方体。页面下方有一个已经完成的例子，当你遇到麻烦，或者需要帮助的时候，可以看一看。</p>

<h2>开始之前</h2>
<p>
在开始使用three.js之前，你需要一个地方来显示它。将下列HTML代码保存为你电脑上的一个HTML文件然后在你的浏览器中打开这个HTML文件。
如果您还没有安装，请先阅读[link:#manual/introduction/Installation 安装]指南。我们假设你已经设置了相同的项目结构（包括 <i>index.html</i> 和 main.js），安装了 three.js，运行了构建工具，或使用了带有 CDN 和导入映射的本地服务器。
</p>
<code>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;My first three.js app&lt;/title&gt;
&lt;style&gt;
body { margin: 0; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script type="module"&gt;
import * as THREE from 'https://unpkg.com/three/build/three.module.js';

// Our Javascript will go here.
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>

<p>好了，接下来的所有代码将会写入到空的&lt;script&gt;标签中。</p>

<h2>创建一个场景</h2>

<p>为了真正能够让你的场景借助three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。</p>
<p>为了真正能够让你的场景借助 three.js 来进行显示，我们需要以下几个对象：场景（scene）、相机（camera）和渲染器（renderer），这样我们就能透过摄像机渲染出场景。</p>

<p><i>main.js —</i></p>

<code>
import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

Expand All @@ -52,21 +35,21 @@ <h2>创建一个场景</h2>

<p>我们花一点点时间来解释一下这里发生了什么。我们现在建立了场景、相机和渲染器。</p>

<p>three.js里有几种不同的相机，在这里，我们使用的是<strong>PerspectiveCamera</strong>（透视摄像机）。</p>
<p>three.js 里有几种不同的相机，在这里，我们使用的是 <strong>PerspectiveCamera</strong>（透视摄像机）。</p>

<p>第一个参数是<strong>视野角度（FOV）</strong>。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)。</p>

<p>第二个参数是<strong>长宽比（aspect ratio）</strong>。 也就是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。</p>

<p>接下来的两个参数是<strong>近截面</strong>（near）和<strong>远截面</strong>（far）。 当物体某些部分比摄像机的<strong>远截面</strong>远或者比<strong>近截面</strong>近的时候，该这些部分将不会被渲染到场景中。或许现在你不用担心这个值的影响，但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它。</p>

<p>接下来是渲染器。这里是施展魔法的地方。除了我们在这里用到的WebGLRenderer渲染器之外，Three.js同时提供了其他几种渲染器，当用户所使用的浏览器过于老旧，或者由于其他原因不支持WebGL时，可以使用这几种渲染器进行降级。</p>
<p>接下来是渲染器。这里是施展魔法的地方。除了我们在这里用到的 WebGLRenderer 渲染器之外，Three.js 同时提供了其他几种渲染器，当用户所使用的浏览器过于老旧，或者由于其他原因不支持 WebGL 时，可以使用这几种渲染器进行降级。</p>

<p>除了创建一个渲染器的实例之外，我们还需要在我们的应用程序里设置一个渲染器的尺寸。比如说，我们可以使用所需要的渲染区域的宽高，来让渲染器渲染出的场景填充满我们的应用程序。因此，我们可以将渲染器宽高设置为浏览器窗口宽高。对于性能比较敏感的应用程序来说，你可以使用<strong>setSize</strong>传入一个较小的值，例如<strong>window.innerWidth/2</strong>和<strong>window.innerHeight/2</strong>，这将使得应用程序在渲染时，以一半的长宽尺寸渲染场景。</p>
<p>除了创建一个渲染器的实例之外，我们还需要在我们的应用程序里设置一个渲染器的尺寸。比如说，我们可以使用所需要的渲染区域的宽高，来让渲染器渲染出的场景填充满我们的应用程序。因此，我们可以将渲染器宽高设置为浏览器窗口宽高。对于性能比较敏感的应用程序来说，你可以使用 <strong>setSize</strong> 传入一个较小的值，例如 <strong>window.innerWidth/2</strong> 和 <strong>window.innerHeight/2</strong>，这将使得应用程序在渲染时，以一半的长宽尺寸渲染场景。</p>

<p>如果你希望保持你的应用程序的尺寸，但是以较低的分辨率来渲染，你可以在调用<strong>setSize</strong>时，将<strong>updateStyle</strong>（第三个参数）设为false。例如，假设你的&lt;canvas&gt; 标签现在已经具有了100%的宽和高，调用<strong>setSize(window.innerWidth/2, window.innerHeight/2, false)</strong>将使得你的应用程序以一半的分辨率来进行渲染。</p>
<p>如果你希望保持你的应用程序的尺寸，但是以较低的分辨率来渲染，你可以在调用 <strong>setSize</strong> 时，将 <strong>updateStyle</strong>（第三个参数）设为 false。例如，假设你的 &lt;canvas&gt; 标签现在已经具有了 100% 的宽和高，调用 <strong>setSize(window.innerWidth/2, window.innerHeight/2, false)</strong> 将使得你的应用程序以四分之一的大小来进行渲染。</p>

<p>最后一步很重要，我们将<strong>renderer</strong>（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的&lt;canvas&gt;元素。</p>
<p>最后一步很重要，我们将 <strong>renderer</strong>（渲染器）的dom元素（renderer.domElement）添加到我们的 HTML 文档中。这就是渲染器用来显示场景给我们看的 &lt;canvas&gt; 元素。</p>

<p><em>“嗯，看起来很不错，那你说的那个立方体在哪儿？”</em>接下来，我们就来添加立方体。</p>

Expand All @@ -79,13 +62,13 @@ <h2>创建一个场景</h2>
camera.position.z = 5;
</code>

<p>要创建一个立方体，我们需要一个<strong>BoxGeometry</strong>（立方体）对象. 这个对象包含了一个立方体中所有的顶点（<strong>vertices</strong>）和面（<strong>faces</strong>）。未来我们将在这方面进行更多的探索。</p>
<p>要创建一个立方体，我们需要一个 <strong>BoxGeometry</strong>（立方体）对象. 这个对象包含了一个立方体中所有的顶点（<strong>vertices</strong>）和面（<strong>faces</strong>）。未来我们将在这方面进行更多的探索。</p>

<p>接下来，对于这个立方体，我们需要给它一个材质，来让它有颜色。Three.js自带了几种材质，在这里我们使用的是<strong>MeshBasicMaterial</strong>。所有的材质都存有应用于他们的属性的对象。在这里为了简单起见，我们只设置一个color属性，值为<strong>0x00ff00</strong>，也就是绿色。这里所做的事情，和在CSS或者Photoshop中使用十六进制(<strong>hex colors</strong>)颜色格式来设置颜色的方式一致。</p>
<p>接下来，对于这个立方体，我们需要给它一个材质，来让它有颜色。Three.js 自带了几种材质，在这里我们使用的是 <strong>MeshBasicMaterial</strong>。所有的材质都存有应用于他们的属性的对象。在这里为了简单起见，我们只设置一个color属性，值为 <strong>0x00ff00</strong>，也就是绿色。这里所做的事情，和在 CSS 或者 Photoshop 中使用十六进制（<strong>hex colors</strong>）颜色格式来设置颜色的方式一致。</p>

<p>第三步，我们需要一个<strong>Mesh</strong>（网格）。 网格包含一个几何体以及作用在此几何体上的材质，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动。</p>
<p>第三步，我们需要一个 <strong>Mesh</strong>（网格）。 网格包含一个几何体以及作用在此几何体上的材质，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动。</p>

<p>默认情况下，当我们调用<strong>scene.add()</strong>的时候，物体将会被添加到<strong>(0,0,0)</strong>坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。</p>
<p>默认情况下，当我们调用 <strong>scene.add()</strong> 的时候，物体将会被添加到 <strong>(0,0,0)</strong> 坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。</p>

<h2>渲染场景</h2>

Expand All @@ -99,29 +82,31 @@ <h2>渲染场景</h2>
animate();
</code>

<p>在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）。如果你是一个浏览器游戏开发的新手，你或许会说<em>“为什么我们不直接用setInterval来实现刷新的功能呢？”</em>当然啦，我们的确可以用setInterval，但是，<strong>requestAnimationFrame</strong>有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。</p>
<p>在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）。如果你是一个浏览器游戏开发的新手，你或许会说<em>“为什么我们不直接用 setInterval 来实现刷新的功能呢？”</em>当然啦，我们的确可以用 setInterval，但是，<strong>requestAnimationFrame</strong> 有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。</p>

<h2>使立方体动起来</h2>

<p>
在开始之前，如果你已经将上面的代码写入到了你所创建的文件中，你可以看到一个绿色的方块。让我们来做一些更加有趣的事 —— 让它旋转起来。</p>
<p>在开始之前，如果你已经将上面的代码写入到了你所创建的文件中，你可以看到一个绿色的方块。让我们来做一些更加有趣的事 —— 让它旋转起来。</p>

<p>将下列代码添加到animate()函数中<strong>renderer.render</strong>调用的上方：</p>
<p>将下列代码添加到 animate() 函数中 <strong>renderer.render</strong> 调用的上方：</p>

<code>
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
</code>

<p>这段代码每帧都会执行（正常情况下是60次/秒），这就让立方体有了一个看起来很不错的旋转动画。基本上来说，当应用程序运行时，如果你想要移动或者改变任何场景中的东西，都必须要经过这个动画循环。当然，你可以在这个动画循环里调用别的函数，这样你就不会写出有上百行代码的<strong>animate</strong>函数。</p>
<p>这段代码每帧都会执行（正常情况下是60次/秒），这就让立方体有了一个看起来很不错的旋转动画。基本上来说，当应用程序运行时，如果你想要移动或者改变任何场景中的东西，都必须要经过这个动画循环。当然，你可以在这个动画循环里调用别的函数，这样你就不会写出有上百行代码的 <strong>animate</strong> 函数。</p>

<h2>结果</h2>
<p>祝贺你！你现在已经成功完成了你的第一个Three.js应用程序。虽然它很简单，但现在你已经有了一个入门的起点。</p>
<p>祝贺你！你现在已经成功完成了你的第一个 three.js 应用程序。虽然它很简单，但现在你已经有了一个入门的起点。</p>

<p>下面是完整的代码，可在 [link:https://jsfiddle.net/0c1oqf38/ live example] 运行、编辑；运行或者修改代码有助于你更好的理解它是如何工作的。</p>

<p>下面是完整的代码，可在[link:https://jsfiddle.net/0c1oqf38/ live example]运行、编辑；运行或者修改代码有助于你更好的理解它是如何工作的。</p>
<p><i>index.html —</i></p>

<code>
&lt;html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;My first three.js app&lt;/title&gt;
Expand All @@ -130,36 +115,40 @@ <h2>结果</h2>
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script type="module"&gt;
import * as THREE from 'https://unpkg.com/three/build/three.module.js';
&lt;script type="module" src="/main.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
<p><i>main.js —</i></p>

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
<code>
import * as THREE from 'three';

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

function animate() {
requestAnimationFrame( animate );
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
camera.position.z = 5;

renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );

animate();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render( scene, camera );
}

animate();
</code>
</body>
</html>
2 changes: 1 addition & 1 deletion docs/manual/zh/introduction/Installation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ <h2>附加组件（Addons）</h2>
</code>

<p>
一些优秀的第三方项目也可用于 three.js。这些项目需要单独安装，请参见 [link:#manual/introduction/Libraries-and-Plugins 库和插件]。
一些优秀的第三方项目也可用于 three.js。这些项目需要单独安装，请参见 [link:#manual/zh/introduction/Libraries-and-Plugins 库和插件]。
</p>

<h2>下一步</h2>
Expand Down
110 changes: 110 additions & 0 deletions docs/manual/zh/introduction/Libraries-and-Plugins.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<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">
这里列出的是由外部开发的与 three.js 相兼容的库和插件。此列表和相关软件包由社区维护，不保证是最新版本。如果您想更新此列表，请提交 PR！
</p>

<h3>物理引擎/效果（Physics）</h3>

<ul>
<li>[link:https://github.com/lo-th/Oimo.js/ Oimo.js]</li>
<li>[link:https://enable3d.io/ enable3d]</li>
<li>[link:https://github.com/kripken/ammo.js/ ammo.js]</li>
<li>[link:https://github.com/pmndrs/cannon-es cannon-es]</li>
<li>[link:https://rapier.rs/ rapier]</li>

</ul>

<h3>后期处理（Postprocessing）</h3>

<p>
除了[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing 官方的 three.js 后处理特效]外，我们还可以通过外部库获得一些额外的特效和框架支持。
</p>

<ul>
<li>[link:https://github.com/vanruesc/postprocessing postprocessing]</li>
</ul>

<h3>光线投射性能表现（Intersection and Raycast Performance）</h3>

<ul>
<li>[link:https://github.com/gkjohnson/three-mesh-bvh three-mesh-bvh]</li>
</ul>

<h3>轨迹追踪（Path Tracing）</h3>

<ul>
<li>[link:https://github.com/gkjohnson/three-gpu-pathtracer three-gpu-pathtracer]</li>
</ul>

<h3>文件格式（File Formats）</h3>

<p>
除[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders 官方的 three.js 加载器]外，还可通过外部库支持其他一些格式。
</p>

<ul>
<li>[link:https://github.com/gkjohnson/urdf-loaders/tree/master/javascript urdf-loader]</li>
<li>[link:https://github.com/NASA-AMMOS/3DTilesRendererJS 3d-tiles-renderer-js]</li>
<li>[link:https://github.com/kaisalmen/WWOBJLoader WebWorker OBJLoader]</li>
<li>[link:https://github.com/IFCjs/web-ifc-three IFC.js]</li>
</ul>

<h3>Geometry</h3>

<ul>
<li>[link:https://github.com/spite/THREE.MeshLine THREE.MeshLine]</li>
</ul>

<h3>3D 文字和布局（3D Text and Layout）</h3>

<ul>
<li>[link:https://github.com/protectwise/troika/tree/master/packages/troika-three-text troika-three-text]</li>
<li>[link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui]</li>
</ul>

<h3>粒子系统（Particle Systems）</h3>

<ul>
<li>[link:https://github.com/Alchemist0823/three.quarks three.quarks]</li>
<li>[link:https://github.com/creativelifeform/three-nebula three-nebula]</li>
</ul>

<h3>逆向运动学（Inverse Kinematics）</h3>

<ul>
<li>[link:https://github.com/jsantell/THREE.IK THREE.IK]</li>
<li>[link:https://github.com/lo-th/fullik fullik]</li>
<li>[link:https://github.com/gkjohnson/closed-chain-ik-js closed-chain-ik]</li>
</ul>

<h3>游戏人工智能（Game AI）</h3>

<ul>
<li>[link:https://mugen87.github.io/yuka/ yuka]</li>
<li>[link:https://github.com/donmccurdy/three-pathfinding three-pathfinding]</li>
<li>[link:https://github.com/isaac-mason/recast-navigation-js recast-navigation-js]</li>
</ul>

<h3>封装器和框架（Wrappers and Frameworks）</h3>

<ul>
<li>[link:https://aframe.io/ A-Frame]</li>
<li>[link:https://lume.io/ Lume] - HTML elements for 3D graphics built on Three.</li>
<li>[link:https://github.com/pmndrs/react-three-fiber react-three-fiber] - React components for 3D graphics built on Three.</li>
<li>[link:https://github.com/ecsyjs/ecsy-three ECSY]</li>
<li>[link:https://threlte.xyz/ Threlte] - Svelte components for 3D graphics built on Three.</li>
<li>[link:https://needle.tools/ Needle Engine]</li>
</ul>

</body>
</html>

0 comments on commit 30985da

Please sign in to comment.