Skip to content

Commit 3b8ed13

Browse files
ics-watanabeics-watanabe
committed
mdファイルのヘッダー情報をYAML Front-matterの記載方法に変更
1 parent 64dff02 commit 3b8ed13

28 files changed

Lines changed: 168 additions & 146 deletions

‎docs/camera_orbitcontrols.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
# Three.jsのOrbitControlsで手軽にカメラを制御する
2-
1+
---
2+
title: Three.jsのOrbitControlsで手軽にカメラを制御する
3+
author: 池田 泰延
4+
published_date: 2017-11-03
5+
modified_date: 2017-11-03
6+
---
37

48
Three.jsには**カメラの動きを自動的に制御する `THREE.OrbitControls` クラスが存在**します。
59

@@ -137,6 +141,3 @@ function tick() {
137141

138142
[次の記事へ](model_basic.md)
139143

140-
<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
141-
<article-date-published>2017-11-03</article-date-published>
142-
<article-date-modified>2017-11-03</article-date-modified>

‎docs/camera_position.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
# Three.jsのカメラの制御
1+
---
2+
title: Three.jsのカメラの制御
3+
author: 池田 泰延
4+
published_date: 2017-11-03
5+
modified_date: 2019-01-08
6+
---
27

38
3D空間の視点となるカメラについて説明します。3Dには視点を制御するカメラという概念があります。カメラの動かし方を抑えれば表現の自由度が上がります。
49

@@ -124,7 +129,3 @@ rot += (targetRot - rot) * 0.02;
124129
次は手軽にカメラの操作ができるコントローラーを解説します。
125130

126131
[次の記事へ](camera_orbitcontrols.md)
127-
128-
<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
129-
<article-date-published>2017-11-03</article-date-published>
130-
<article-date-modified>2019-01-08</article-date-modified>

‎docs/camera_variation.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
# Three.jsのカメラ
1+
---
2+
title: Three.jsのカメラ
3+
author: 池田 泰延
4+
published_date: 2017-11-12
5+
modified_date: 2019-01-08
6+
---
27

38
Three.jsにはCamera3Dクラスがあることを、入門編で紹介しました。このCamera3Dがどのようにして利用できるのか、もう少し掘り下げて学んでみましょう。
49

@@ -66,7 +71,3 @@ const camera = new THREE.OrthographicCamera(-480, +480, 270, -270, 1, 1000);
6671
- `far` : 区間の終了距離
6772

6873
Three.jsでは`near`のデフォルト値は1、`far`のデフォルト値は2000に設定されています。とくに`far`の値はかなり小さく設定されていますので、必要に応じて大きな値に変更するとよいでしょう。
69-
70-
<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
71-
<article-date-published>2017-11-12</article-date-published>
72-
<article-date-modified>2019-01-08</article-date-modified>

‎docs/class.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
# Three.jsでES2015のclassを利用する（継承）
1+
---
2+
title: Three.jsでES2015のclassを利用する（継承）
3+
author: 池田 泰延
4+
published_date: 2017-11-20
5+
modified_date: 2019-01-08
6+
---
27

38
JavaScriptではオブジェクト指向としてのクラスが利用できます。クラスを利用すると、Three.jsを構造的に設計しやすくなります。
49

@@ -167,6 +172,3 @@ function init() {
167172

168173
この解説は[Three.jsでES2015のclassを利用する（メソッド）](class_method.md)に続きます。
169174

170-
<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
171-
<article-date-published>2017-11-20</article-date-published>
172-
<article-date-modified>2019-01-08</article-date-modified>

‎docs/class_method.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
# Three.jsでES2015のclassを利用する(メソッド編)
2-
1+
---
2+
title: Three.jsでES2015のclassを利用する(メソッド編)
3+
author: 池田 泰延
4+
published_date: 2017-12-04
5+
modified_date: 2017-12-04
6+
---
37

48
この解説は[Three.jsでES2015のclassを利用する（継承）](class.md)からの続きです。クラスのメソッドを呼び出すベスト・プラクティスな例を学んでいきましょう。
59

@@ -94,6 +98,3 @@ class MyGroup extends THREE.Object3D {
9498

9599
こうすれば、`requestAnimationFrame()`メソッドが実行されるのはメインコードの一箇所のみになります。メインコードにレンダリングのための`renderer.render(scene, camera);`処理の前に子供の`MyGroup`クラスの`update()`メソッドが実行されることが保証されます。
96100

97-
<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
98-
<article-date-published>2017-12-04</article-date-published>
99-
<article-date-modified>2017-12-04</article-date-modified>

‎docs/effect.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
# Three.js演出編
1+
---
2+
title: Three.js演出編
3+
author: 池田 泰延
4+
published_date: 2019-01-17
5+
modified_date: 2019-01-17
6+
---
27

38
Three.jsを使った表現を作例を通して学びましょう。
49

@@ -10,7 +15,3 @@ Three.jsを使った表現を作例を通して学びましょう。
1015
- [アイコンフォント集Font Awesomeを扱う方法](https://ics.media/entry/8385)
1116
- [サウンドビジュアライザー](https://ics.media/entry/9105)
1217
- [エフェクト作成ツールのEffekseerがWebGLに対応。Web表現の新兵器となるか](https://ics.media/entry/15745)
13-
14-
<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
15-
<article-date-published>2019-01-17</article-date-published>
16-
<article-date-modified>2019-01-17</article-date-modified>

‎docs/fog.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
# Three.jsのフォグ機能
2-
1+
---
2+
title: Three.jsのフォグ機能
3+
author: 池田 泰延
4+
published_date: 2017-11-16
5+
modified_date: 2019-01-08
6+
---
37

48
フォグ効果とは遠くのものが霞んで見えるような状態にする効果のことです。フォグ（Fog）は日本語で「霧、濃霧」という意味です。
59

@@ -38,7 +42,3 @@ scene.fog = new THREE.Fog(0x000000, 50, 2000);
3842
```
3943

4044
わずか一行のコードを加えるだけで空間の奥行きを表現できるので、手軽に試すことのできる機能です。
41-
42-
<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
43-
<article-date-published>2017-11-16</article-date-published>
44-
<article-date-modified>2019-01-08</article-date-modified>

‎docs/geometry_general.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
# Three.jsのジオメトリの基本
1+
---
2+
title: Three.jsのジオメトリの基本
3+
author: 池田 泰延
4+
published_date: 2017-11-03
5+
modified_date: 2019-01-08
6+
---
27

38
形状（ジオメトリとも言います）を指定することで「球体」や「直方体」、「平面」などさまざまな3Dのオブジェクトを表示できます。言葉で説明するより、実際に動くものを見たほうがわかりやすいと思いますので、次のデモを試してみてください。
49

@@ -155,7 +160,3 @@ scene.add( torus );
155160
今回のチュートリアルでは、基本的な形状についての解説を行いました。**平面や直方体など基本的な形状を組み合わせるだけでもさまざまな3D表現を作ることができます**。ぜひサンプルを元に色々と試してみてください。
156161

157162
[次の記事へ](camera_position.md)
158-
159-
<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
160-
<article-date-published>2017-11-03</article-date-published>
161-
<article-date-modified>2019-01-08</article-date-modified>

‎docs/geometry_merge.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
# Three.jsの高速化手法：ジオメトリの結合
1+
---
2+
title: Three.jsの高速化手法：ジオメトリの結合
3+
author: 池田 泰延
4+
published_date: 2017-11-08
5+
modified_date: 2019-01-08
6+
---
27

38
Three.jsで大量のオブジェクトを描画するときに役立つ最適化テクニックを紹介します。
49

@@ -164,7 +169,3 @@ scene.add(mesh);
164169
ジオメトリをまとめてしまうと、3Dオブジェクト（`Mesh`のインスタンス）としては1つになります。そのため、個別にマテリアルを設定したりマウスイベントを設定することができなくなります。
165170

166171
インタラクションをしないもの、アニメーションしないものを対象に、このテクニックを適用するといいでしょう。
167-
168-
<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
169-
<article-date-published>2017-11-08</article-date-published>
170-
<article-date-modified>2019-01-08</article-date-modified>

‎docs/index.md‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
# Three.js入門サイト
1+
---
2+
title: Three.js入門サイト
3+
author: 池田 泰延
4+
published_date: 2017-11-02
5+
modified_date: 2019-01-17
6+
---
27

38
このサイトは、WebGLのライブラリ「[Three.js](https://threejs.org)」の入門サイトです。
49

@@ -118,7 +123,3 @@ WebGLの最適化や次世代の仕様について理解を深めましょう。
118123

119124
- [Node.jsの記事一覧](nodejs.md)
120125

121-
122-
<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
123-
<article-date-published>2017-11-02</article-date-published>
124-
<article-date-modified>2019-01-17</article-date-modified>

0 commit comments

Comments
 (0)