Merge branch 'master' of https://github.com/ics-creative/tutorial-three

Author: ics-ikeda

docs/camera_variation.md

@@ -62,6 +62,7 @@ const camera = new THREE.OrthographicCamera(-480, +480, 270, -270, 1, 1000);
 
 サンプルのように規則正しく3Dオブジェクトを配置すると、平行投影のゲームのような表現が得られます。 
 
+![](../imgs/camera_orthographic_1.png)
 
 ## 共通の設定：クリッピング 
 

docs/fog.md

@@ -0,0 +1,46 @@
+# Three.jsのフォグ機能
+ 
+
+フォグ効果とは遠くのものが霧がかって霞んで見えるような状態にする効果のことです。フォグ（Fog）は日本語で「霧, 濃霧」という意味です。
+
+Three.jsではカメラからの開始距離と終点距離を設定することで、その間に存在するオブジェクトが指定した色によって霞んで表示されます。
+
+
+## フォグのサンプル 
+
+
+![](../imgs/fog.png)
+
+- [サンプルを再生する](https://ics-creative.github.io/tutorial-three/samples/fog.html)
+- [サンプルのソースコードを確認する](../samples/fog.html)
+
+このサンプルでは1000個の立方体をランダムに配置。カメラから遠いオブジェクトほど暗く表示されています。これは照明効果ではなく、フォグの機能で暗くなっています。
+
+
+フォグを設定していない場合の見え方と比較すると、この効果がわかりやすいでしょう。カメラから遠い場所に注目ください。
+
+![](../imgs/fog_off.png)
+
+▲フォグを設定していない場合の見え方
+
+
+## フォグの設定方法
+
+フォグを設定するには`THREE.Scene`オブジェクトの`fog`プロパティーに、`THREE.Fog`インスタンスを代入します。
+
+```js
+// シーンを作成
+const scene = new THREE.Scene();
+
+// フォグを設定
+// new THREE.Fog(色, 開始距離, 終点距離);
+scene.fog = new THREE.Fog(0x000000, 50, 2000);
+```
+
+
+
+わずか一行のコードを加えるだけで空間の奥行きを表現できるので、手軽に試すことのできる機能です。
+
+<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
+<article-date-published>2017-11-16</article-date-published>
+<article-date-modified>2017-11-16</article-date-modified>

docs/index.md

@@ -27,7 +27,7 @@ WebGLだけで3D表現をするためには、立方体一つ表示するだけ
 - [ジオメトリ](geometry_general.md)
 - [カメラの制御方法（座標制御）](camera_position.md)
 - [カメラの制御方法（OrbitControls）](camera_orbitcontrols.md)
-- [モデルデータの読み込み](model_basic.md)
+
 
 ## Three.js 基本編
 
@@ -41,10 +41,13 @@ Three.jsには多彩な機能が存在します。機能を習得すればする
 - [様々なライト](light_variation.md)
 - [影を落とす方法](light_shadowmap.md)
 - [様々なカメラ](camera_variation.md)
+- [フォグ](fog.md)
 - [スプライト/ビルボード](sprite.md)
 - [グループ化](object3d_group.md)
 - [ワールド座標](position_world.md)
 - [スクリーン座標](position_project.md)
+- [モデルデータの読み込み](model_basic.md)
+- [canvasのリサイズ処理](renderer_resize.md)
 
 ## Three.js 中級編
 
@@ -125,4 +128,4 @@ WebGLの最適化や次世代の仕様について理解を深めましょう。
 
 <article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
 <article-date-published>2017-11-02</article-date-published>
-<article-date-modified>2017-11-12</article-date-modified>
+<article-date-modified>2017-11-16</article-date-modified>

docs/renderer_resize.md

@@ -0,0 +1,89 @@
+# Three.jsでの最適なリサイズ処理
+
+Three.jsでの最適なリサイズ処理の方法を紹介します。この手順を覚えれば次のような希望に対応できます。
+
+- どんなディスプレイでもThree.jsを綺麗に見せたい
+- 異なるディスプレイでも全画面に3Dを表示させたい
+- ブラウザのサイズを変更してもThree.jsを全画面にフィットさせたい
+
+## リサイズのサンプル
+
+- [サンプルを再生する](https://ics-creative.github.io/tutorial-three/samples/renderer_resize.html)
+- [サンプルのソースコードを確認する](../samples/renderer_resize.html)
+
+
+![](../imgs/renderer_resize_1.png)
+
+![](../imgs/renderer_resize_2.png)
+
+![](../imgs/renderer_resize_3.png)
+
+
+## 設定方法
+
+### HTMLのメタタグ
+
+HTMLの`meta`タグに`viewport`の設定をします。
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+```
+
+スマートフォンのブラウザには横幅の大きなPCサイトも柔軟に見れるように自動的に拡大縮小する機能があります。WebGLを綺麗に見せたいときには、その機能が余計な処お世話となります。
+
+`width=device-width`と指定することでデバイスの最適な幅で表示させるようにします。また、初期状態で拡大・縮小していない見え方にするために`initial-scale=1`を指定します。
+
+### スタイルシート
+
+`body`タグに余白が存在するので、それを消すように`margin: 0`を指定します。
+
+```html
+<style>
+  body {
+    margin: 0;
+    overflow: hidden;
+  }
+</style>
+```
+
+また、`overflow: hidden`を指定すると、macOSのデスクトップブラウザのオーバースクロール（例えば画面上部にスクロールすると、画面上部を一瞬超えて表示される挙動）を抑制できます。全画面コンテンツを作るときにオーバースクロールの挙動は余計なお世話なので、`overflow: hidden`を指定しておきましょう。
+
+### Three.jsの調整
+
+`resize`イベントを監視し、画面サイズである`window.innerWidth`と`window.innerHeight`の値を使います。
+
+```js
+// 初期化のために実行
+onResize();
+// リサイズイベント発生時に実行
+window.addEventListener('resize', onResize);
+
+function onResize() {
+  // サイズを取得
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+
+  // レンダラーのサイズを調整する
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(width, height);
+
+  // カメラのアスペクト比を正す
+  camera.aspect = width / height;
+  camera.updateProjectionMatrix();
+}
+```
+
+実装のポイントは次の通りです。
+
+- リサイズ時にはレンダラーのサイズを`setSize`メソッドで画面幅に合わせること
+- デスクトップでは、メインディスプレイ・サブディスプレイでPixelRatioが異なる可能性があるので、リサイズイベントで`setPixelRatio`メソッドで更新するべき
+- リサイズ時にはカメラの縦横比が狂うので、リサイズ時に縦横比を正しく調整する
+- 画面サイズの設定処理は、初期化時もリサイズ時も同じ
+  - `onResize`関数は初期化時とリサイズイベント発生の両方で呼び出す
+
+
+以上となります。詳しくはサンプルのコードをコピーするなどして取り組んでください。
+
+<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
+<article-date-published>2017-11-16</article-date-published>
+<article-date-modified>2017-11-16</article-date-modified>

html/imgs/summary_large_image.png

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+
 <html>
 <head>
   <meta charset="utf-8"/>

html/imgs/summary_large_image.psd

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

imgs/camera_orthographic.png

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

imgs/camera_orthographic_1.png

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

imgs/fog.png

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

imgs/fog_off.png

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

imgs/renderer_resize_1.png

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>
@@ -59,7 +58,11 @@
       // マス目を作成
       {
         // 立方体のマテリアルとジオメトリを作成
-        const material = new THREE.MeshStandardMaterial({color: 0x22DD22, roughness: 0.1, metalness: 0.2});
+        const material = new THREE.MeshStandardMaterial({
+          color: 0x2299FF,
+          roughness: 0.1,
+          metalness: 0.2
+        });
         const geometry = new THREE.BoxGeometry(45, 45, 45);
 
         // 立方体を複数作成しランダムに配置

imgs/renderer_resize_2.png

@@ -0,0 +1,69 @@
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
+  <script>
+    // ページの読み込みを待つ
+    window.addEventListener('load', init);
+
+    function init() {
+      // サイズを指定
+      const width = 960;
+      const height = 540;
+
+      // レンダラーを作成
+      const renderer = new THREE.WebGLRenderer({
+        canvas: document.querySelector('#myCanvas'),
+        antialias: true,
+        devicePixelRatio: window.devicePixelRatio,
+      });
+      renderer.setSize(width, height);
+
+      // シーンを作成
+      const scene = new THREE.Scene();
+
+      // フォグを設定
+      scene.fog = new THREE.Fog(0x000000, 50, 2000);
+
+      // カメラを作成
+      const camera = new THREE.PerspectiveCamera(45, width / height);
+      camera.position.set(0, 0, +1000);
+
+      // グループを作成
+      const group = new THREE.Group();
+      scene.add(group);
+      const geometry = new THREE.BoxBufferGeometry(50, 50, 50);
+      const material = new THREE.MeshStandardMaterial();
+
+      for (let i = 0; i < 1000; i++) {
+        const mesh = new THREE.Mesh(geometry, material);
+        mesh.position.x = (Math.random() - 0.5) * 2000;
+        mesh.position.y = (Math.random() - 0.5) * 2000;
+        mesh.position.z = (Math.random() - 0.5) * 2000;
+        mesh.rotation.x = Math.random() * 2 * Math.PI;
+        mesh.rotation.y = Math.random() * 2 * Math.PI;
+        mesh.rotation.z = Math.random() * 2 * Math.PI;
+        // グループに格納する
+        group.add(mesh);
+      }
+
+      // 光源
+      scene.add(new THREE.DirectionalLight(0xFF0000, 2));// 平行光源
+      scene.add(new THREE.AmbientLight(0x00FFFF));// 環境光源
+
+      // 毎フレーム時に実行されるループイベントです
+      tick();
+
+      function tick() {
+        // グループを回す
+        group.rotateY(0.01);
+        renderer.render(scene, camera);// レンダリング
+        requestAnimationFrame(tick);
+      }
+    }
+  </script>
+</head>
+<body>
+  <canvas id="myCanvas"></canvas>
+</body>
+</html>

imgs/renderer_resize_3.png

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/camera_basic.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/camera_basic_earth.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/camera_mosue_drag.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/camera_mouse_x.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/camera_orbitcontrols.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/camera_orbitcontrols_basic.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/camera_orthographic.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/fog.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/geometry_general.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/geometry_merge.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/geometry_merge_mesh.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/geometry_merge_none.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/loader_3ds.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/loader_dae.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/material_color.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>

samples/material_texture.html

@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8"/>