Browse Source

zh doc: Translate renderer folder in examples to Zh.

gogoend 6 years ago
parent
commit
5dff76e60e

+ 10 - 10
docs/examples/zh/renderers/CSS2DRenderer.html

@@ -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]

+ 19 - 18
docs/examples/zh/renderers/CSS3DRenderer.html

@@ -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]

+ 23 - 32
docs/examples/zh/renderers/SVGRenderer.html

@@ -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>