Three.js 101 → 105

ics-ikeda · ics-ikeda · commit 47b0726cf127 · 2019-06-11T11:37:35.000+09:00
diff --git a/docs/offscreencanvas.md b/docs/offscreencanvas.md
@@ -2,7 +2,7 @@
 title: Three.jsでオフスクリーンキャンバスを使う
 author: 池田 泰延
 published_date: 2019-02-15
-modified_date: 2019-02-15
+modified_date: 2019-06-11
 ---
 
 オフスクリーンキャンバスはWorkerスレッドで描画処理を行える機能です。負荷の高い描画処理をWorkerスレッドに移動することで、メインスレッドの負担が軽くなり、余裕ができます。これによりメインスレッドでスムーズなユーザー操作を実現できるようになり、ユーザー体験の向上が期待できます。具体的には、`canvas`の描画処理が大きかった場合にオフスクリーンキャンバスを使うと、ボタンクリック時の反応やCSSアニメーションが滑らかになるでしょう。
@@ -50,7 +50,7 @@ worker.postMessage({ canvas: offscreenCanvas }, [offscreenCanvas]);
 
 ```js
 importScripts(
-  'https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js'
+  'https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js'
 );
 ```
 
diff --git a/docs/quickstart.md b/docs/quickstart.md
@@ -2,7 +2,7 @@
 title: 簡単なThree.jsのサンプルを試そう
 author: 池田 泰延
 published_date: 2017-11-02
-modified_date: 2019-01-08
+modified_date: 2019-06-11
 ---
 
 [Three.js](http://typescript.Three.js.com/)はHTMLの3D技術「[WebGL](http://ja.wikipedia.org/wiki/WebGL "WebGL - Wikipedia")」を扱いやすくしたフレームワークです。**Three.jsを使えばGPUによる本格的な3D表現をプラグイン無しで作成**できます。
@@ -23,7 +23,7 @@ modified_date: 2019-01-08
 <html>
 <head>
   <meta charset="utf-8"/>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
   <script>
     // ページの読み込みを待つ
     window.addEventListener('load', init);
@@ -76,7 +76,7 @@ modified_date: 2019-01-08
 
 ちなみに前提としてThree.jsはWebGL対応のブラウザが必須となりますので、動作確認はFirefoxやChrome、Safari、Edgeなどを使うといいでしょう。
 
-また、WebGLはローカルファイルのセキュリティーの制限があるため、ローカルサーバー上で実行することをオススメします。ローカルサーバーの構築方法がわからなければ、エディターの「[Brackets](http://brackets.io/)」がボタンひとつで実行できるのでオススメです。
+また、WebGLはローカルファイルのセキュリティーの制限があるため、ローカルサーバー上で実行することをオススメします。ローカルサーバーの構築方法がわからなければ、記事『[VS Codeを使いこなせ\! フロントエンジニア必須の拡張機能7選](https://ics.media/entry/18544/)』で紹介している「Live Server」を利用しましょう。マウス操作で簡単にローカルサーバーを起動できるので簡単です。
 
 ここからは、上記のコードを解説していくので、少しずつ理解していきましょう。
 
@@ -100,7 +100,7 @@ Three.jsはJavaScriptのライブラリですが、このファイルを読み
 CDN（コンテンツ・デリバリー・ネットワーク）で提供されているURLを使うのが導入にお手軽です。
 
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
 ```
 
 WebGLの処理はページの読み込みが終わってから実行させます。`addEventListener()`関数を使って`load`イベントが発生するのを監視させ、ページが読み込み終わったときに実行させたい関数を指定します。この関数`init()`の中にThree.jsのコードを書いていきます。
diff --git a/samples/camera_basic.html b/samples/camera_basic.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/camera_basic_earth.html b/samples/camera_basic_earth.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/camera_mosue_drag.html b/samples/camera_mosue_drag.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/camera_mouse_x.html b/samples/camera_mouse_x.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/camera_orbitcontrols.html b/samples/camera_orbitcontrols.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script src="js/controls/OrbitControls.js"></script>
     <script>
       // ページの読み込みを待つ
diff --git a/samples/camera_orbitcontrols_basic.html b/samples/camera_orbitcontrols_basic.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script src="js/controls/OrbitControls.js"></script>
     <script>
       // ページの読み込みを待つ
diff --git a/samples/camera_orthographic.html b/samples/camera_orthographic.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/camera_perspective.html b/samples/camera_perspective.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/class_group.html b/samples/class_group.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/class_mesh.html b/samples/class_mesh.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/class_update.html b/samples/class_update.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/class_view3d.html b/samples/class_view3d.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/fog.html b/samples/fog.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/geometry_general.html b/samples/geometry_general.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/geometry_merge.html b/samples/geometry_merge.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
 
     <script>
diff --git a/samples/geometry_merge_mesh.html b/samples/geometry_merge_mesh.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
 
     <script>
diff --git a/samples/geometry_merge_none.html b/samples/geometry_merge_none.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
     <script>
       // ページの読み込みを待つ
diff --git a/samples/light_ambient.html b/samples/light_ambient.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/light_directional.html b/samples/light_directional.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/light_hemisphere.html b/samples/light_hemisphere.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/light_point.html b/samples/light_point.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/light_rectarea.html b/samples/light_rectarea.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script src="https://threejs.org/examples/js/lights/RectAreaLightUniformsLib.js"></script>
     <script>
       // ページの読み込みを待つ
diff --git a/samples/light_shadowmap.html b/samples/light_shadowmap.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/light_spot.html b/samples/light_spot.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/loader_3ds.html b/samples/loader_3ds.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script src="js/controls/OrbitControls.js"></script>
     <script src="js/loaders/TDSLoader.js"></script>
 
diff --git a/samples/loader_dae.html b/samples/loader_dae.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script src="js/controls/OrbitControls.js"></script>
     <script src="js/loaders/ColladaLoader.js"></script>
 
diff --git a/samples/material_color.html b/samples/material_color.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/material_texture.html b/samples/material_texture.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/material_variation_basic.html b/samples/material_variation_basic.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/material_variation_lambert.html b/samples/material_variation_lambert.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/material_variation_normal.html b/samples/material_variation_normal.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/material_variation_phong.html b/samples/material_variation_phong.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/material_variation_standard.html b/samples/material_variation_standard.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/material_variation_toon.html b/samples/material_variation_toon.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/object_group.html b/samples/object_group.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/osc_imagebitmap_worker.js b/samples/osc_imagebitmap_worker.js
@@ -1,5 +1,5 @@
 importScripts(
-  'https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js'
+  'https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js'
 );
 
 // メインスレッドから通達があったとき
diff --git a/samples/osc_resize_worker.js b/samples/osc_resize_worker.js
@@ -1,5 +1,5 @@
 importScripts(
-  'https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js'
+  'https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js'
 );
 let renderer;
 let camera;
diff --git a/samples/osc_simple_worker.js b/samples/osc_simple_worker.js
@@ -1,5 +1,5 @@
 importScripts(
-  'https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js'
+  'https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js'
 );
 
 // メインスレッドから通達があったとき
diff --git a/samples/points.html b/samples/points.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.min.js"></script>
     <script>
       // ページの読み込みを待つ
       window.addEventListener('load', init);
diff --git a/samples/position_project.html b/samples/position_project.html
diff --git a/samples/position_world.html b/samples/position_world.html
diff --git a/samples/quickstart.html b/samples/quickstart.html
diff --git a/samples/raycast.html b/samples/raycast.html
diff --git a/samples/renderer_resize.html b/samples/renderer_resize.html
diff --git a/samples/sincos_camera.html b/samples/sincos_camera.html
diff --git a/samples/sincos_geo.html b/samples/sincos_geo.html
diff --git a/samples/sincos_light.html b/samples/sincos_light.html
diff --git a/samples/sincos_position.html b/samples/sincos_position.html
diff --git a/samples/sprite.html b/samples/sprite.html
