Three.js r152→r164

ics-creative · Apr 26, 2024 · eb116bd · eb116bd
1 parent e64324f
commit eb116bd
Show file tree

Hide file tree

Showing 64 changed files with 137 additions and 136 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,2 +1,2 @@
-Copyright 2019-2021 ICS INC.
+Copyright 2019-2024 ICS INC.
 All Rights Reserved.
diff --git a/docs/camera_variation.md b/docs/camera_variation.md
@@ -2,7 +2,7 @@
 title: Three.jsのカメラ
 author: 池田 泰延
 published_date: 2017-11-12
-modified_date: 2019-01-08
+modified_date: 2024-04-27
 ---
 
 Three.jsにはCamera3Dクラスがあることを、入門編で紹介しました。このCamera3Dがどのようにして利用できるのか、もう少し掘り下げて学んでみましょう。

diff --git a/docs/geometry_merge.md b/docs/geometry_merge.md
@@ -2,7 +2,7 @@
 title: Three.jsの高速化手法：ジオメトリの結合
 author: 池田 泰延
 published_date: 2017-11-08
-modified_date: 2022-05-20
+modified_date: 2024-04-27
 ---
 
 Three.jsで大量のオブジェクトを描画するときに役立つ最適化テクニックを紹介します。
@@ -80,7 +80,7 @@ for (let i = 0; i < CELL_NUM; i++) {
 }
 ```
 
-Three.jsでは、`THREE.BufferGeometryUtils.mergeBufferGeometries()`メソッドで結合できます。このメソッドはThree.js本体のコードに含まれていないので注意ください。公式GitHubの`examples/js/utils`フォルダーにJavaScriptファイルがあるので、これを`script`要素で読み込みます。作業用フォルダーに`BufferGeometryUtils.js`ファイルをコピーしておきましょう。該当ファイルは[こちら](https://github.com/mrdoob/three.js/blob/dev/examples/js/utils/BufferGeometryUtils.js)からダウンロードできます。
+Three.jsでは、`THREE.BufferGeometryUtils.mergeGeometries()`メソッドで結合できます。このメソッドはThree.js本体のコードに含まれていないので注意ください。公式GitHubの`examples/js/utils`フォルダーにJavaScriptファイルがあるので、これを`script`要素で読み込みます。作業用フォルダーに`BufferGeometryUtils.js`ファイルをコピーしておきましょう。該当ファイルは[こちら](https://github.com/mrdoob/three.js/blob/dev/examples/js/utils/BufferGeometryUtils.js)からダウンロードできます。
 
 ```html
 <script src="js/utils/BufferGeometryUtils.js"></script>
@@ -114,7 +114,7 @@ for (let i = 0; i < CELL_NUM; i++) {
   }
 }
 // ジオメトリを生成
-const geometry = THREE.BufferGeometryUtils.mergeBufferGeometries(boxes);
+const geometry = THREE.BufferGeometryUtils.mergeGeometries(boxes);
 
 // マテリアルを作成
 const material = new THREE.MeshNormalMaterial();

diff --git a/docs/index.md b/docs/index.md
@@ -1,8 +1,8 @@
 ---
 title: Three.js入門サイト
 author: 池田 泰延
-published_date: 2017-11-02
-modified_date: 2023-02-06
+published_date: 2024-04-27
+modified_date: 2024-04-27
 ---
 
 このサイトは、WebGLのライブラリ「[Three.js](https://threejs.org)」の入門サイトです。

diff --git a/docs/light_shadowmap.md b/docs/light_shadowmap.md
@@ -2,7 +2,7 @@
 title: Three.jsで影を落とす方法
 author: 池田 泰延
 published_date: 2017-11-11
-modified_date: 2019-01-08
+modified_date: 2024-04-27
 ---
 
 Threeでは光源に対してオブジェクトの影を別のオブジェクトに落とすことができます。影を落とすことで、リアリティーの向上につながります。
@@ -39,7 +39,7 @@ renderer.shadowMap.enabled = true;
 
 ```js
 // 照明を作成
-const light = new THREE.SpotLight(0xFFFFFF, 2, 100, Math.PI / 4, 1);
+const light = new THREE.SpotLight(0xffffff, 400, 100, Math.PI / 4, 1);
 // ライトに影を有効にする
 light.castShadow = true;
 scene.add(light);

diff --git a/docs/nodejs.md b/docs/nodejs.md
@@ -2,7 +2,7 @@
 title: Node.jsを使ったフロントエンド開発
 author: 池田 泰延
 published_date: 2019-01-17
-modified_date: 2023-05-26
+modified_date: 2024-04-27
 ---
 
 効率のよい開発ができるよう、最新の開発環境の構築もしましょう。開発環境を整えれば最新のJavaScript言語仕様を利用でき、開発効率向上に役立つはずです。また、型定義のあるTypeScriptを使ってコード補完をフルに効かせて開発するのもオススメです。
@@ -12,7 +12,7 @@ modified_date: 2023-05-26
 
 ### import文の課題
 
-とくに注意したいのは、Three.jsの本体に含まれていないライブラリです。本入門サイトで扱った`OrbitControls`や`mergeBufferGeometries`、`GLTFLoader`などが該当します。
+とくに注意したいのは、Three.jsの本体に含まれていないライブラリです。本入門サイトで扱った`OrbitControls`や`mergeGeometries`、`GLTFLoader`などが該当します。
 
 これらの機能はThree.js本体に含まれていないので、入門サイトでは別途JavaScriptファイルを`importmap`を使って読み込むことで利用しました。バンドルツール（webpackやVite等）を使った開発では、`importmap`での利用する方法とは異なる方式で解決しなければなりません。以下に対策方法を示します。
 
@@ -50,20 +50,20 @@ const controls = new OrbitControls(camera, renderer.domElement);
 
 
 
-### mergeBufferGeometries の使い方
+### mergeGeometries の使い方
 
 
-`import`文で、`three/examples/jsm/utils/BufferGeometryUtils`から該当機能を読み込みます。`import`文により`mergeBufferGeometries`が該当機能を得ているので、これを使って利用します。`THREE.BufferGeometryUtils.mergeBufferGeometries`ではなく`mergeBufferGeometries`で参照していることがポイントです。
+`import`文で、`three/examples/jsm/utils/BufferGeometryUtils`から該当機能を読み込みます。`import`文により`mergeGeometries`が該当機能を得ているので、これを使って利用します。`THREE.BufferGeometryUtils.mergeGeometries`ではなく`mergeGeometries`で参照していることがポイントです。
 
 
 ```js
 import * as THREE from "three";
-import { mergeBufferGeometries } from "three/examples/jsm/utils/BufferGeometryUtils";
+import { mergeGeometries } from "three/examples/jsm/utils/BufferGeometryUtils";
 
 // ･･･省略
 
 // ジオメトリを生成
-const geometry = mergeBufferGeometries(boxes);
+const geometry = mergeGeometries(boxes);
 ```
 
 もしくは、以下のように`* as BufferGeometryUtils`として`import`文を記載しても問題ありません。
@@ -75,7 +75,7 @@ import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUti
 // ･･･省略
 
 // ジオメトリを生成
-const geometry = BufferGeometryUtils.mergeBufferGeometries(boxes);
+const geometry = BufferGeometryUtils.mergeGeometries(boxes);
 ```
 
 

diff --git a/docs/quickstart.md b/docs/quickstart.md
@@ -25,7 +25,7 @@ modified_date: 2023-05-26
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js"
         }
       }
     </script>

diff --git a/samples/camera_basic.html b/samples/camera_basic.html
@@ -4,7 +4,7 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js"
         }
       }
     </script>

diff --git a/samples/camera_basic_earth.html b/samples/camera_basic_earth.html
@@ -4,7 +4,7 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js"
         }
       }
     </script>

diff --git a/samples/camera_mouse_drag.html b/samples/camera_mouse_drag.html
@@ -4,7 +4,7 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js"
         }
       }
     </script>

diff --git a/samples/camera_mouse_x.html b/samples/camera_mouse_x.html
@@ -4,7 +4,7 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js"
         }
       }
     </script>

diff --git a/samples/camera_orbitcontrols.html b/samples/camera_orbitcontrols.html
@@ -4,8 +4,8 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js",
-          "three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/"
         }
       }
     </script>

diff --git a/samples/camera_orbitcontrols_basic.html b/samples/camera_orbitcontrols_basic.html
@@ -4,8 +4,8 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js",
-          "three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/"
         }
       }
     </script>

diff --git a/samples/camera_orthographic.html b/samples/camera_orthographic.html
@@ -4,7 +4,7 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js"
         }
       }
     </script>
@@ -32,8 +32,8 @@
 
       // 光源を作成
       {
-        const spotLight = new THREE.SpotLight(0xffffff, 4, 2000, Math.PI / 5, 0.2, 1.5);
-        spotLight.position.set(500, 300, 500);
+        const spotLight = new THREE.SpotLight(0xffffff, 200, 2000, Math.PI / 5, 0.2, 0.5);
+        spotLight.position.set(500, 250, 500);
         spotLight.castShadow = true; // 影を落とす設定
         spotLight.shadow.mapSize.width = 2048;
         spotLight.shadow.mapSize.height = 2048;
@@ -54,7 +54,7 @@
             map: texture,
             roughness: 0.0,
             metalness: 0.6,
-          })
+          }),
         );
         floor.rotation.x = -Math.PI / 2;
         floor.receiveShadow = true; // 影の設定

diff --git a/samples/camera_perspective.html b/samples/camera_perspective.html
@@ -1,11 +1,11 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js"
         }
       }
     </script>
@@ -29,11 +29,11 @@
       const scene = new THREE.Scene();
 
       // カメラを作成
-      const camera = new THREE.PerspectiveCamera(30, width / height);
+      const camera = new THREE.PerspectiveCamera(30, width / height,1, 9999);
 
       // 光源を作成
       {
-        const spotLight = new THREE.SpotLight(0xffffff, 4, 2000, Math.PI / 5, 0.2, 1.5);
+        const spotLight = new THREE.SpotLight(0xffffff, 200, 2000, Math.PI / 5, 0.2, 0.5);
         spotLight.position.set(500, 300, 500);
         spotLight.castShadow = true; // 影を落とす設定
         spotLight.shadow.mapSize.width = 2048;
@@ -55,7 +55,7 @@
             map: texture,
             roughness: 0.0,
             metalness: 0.6,
-          })
+          }),
         );
         floor.rotation.x = -Math.PI / 2;
         floor.receiveShadow = true; // 影の設定

diff --git a/samples/class_group.html b/samples/class_group.html
@@ -4,7 +4,7 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js"
         }
       }
     </script>
@@ -29,7 +29,7 @@
             mesh.position.set(
               200 * Math.cos(radian), // X座標
               30, // Y座標
-              200 * Math.sin(radian) // Z座標
+              200 * Math.sin(radian), // Z座標
             );
 
             // グループに追加する

diff --git a/samples/class_mesh.html b/samples/class_mesh.html
@@ -4,7 +4,7 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js"
         }
       }
     </script>

diff --git a/samples/class_update.html b/samples/class_update.html
@@ -4,7 +4,7 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js"
         }
       }
     </script>

diff --git a/samples/class_view3d.html b/samples/class_view3d.html
@@ -4,7 +4,7 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js"
         }
       }
     </script>

diff --git a/samples/fog.html b/samples/fog.html
@@ -4,7 +4,7 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.154.0/build/three.module.js"
         }
       }
     </script>
@@ -39,7 +39,7 @@
         // グループを作成
         const group = new THREE.Group();
         scene.add(group);
-        const geometry = new THREE.BoxBufferGeometry(50, 50, 50);
+        const geometry = new THREE.BoxGeometry(50, 50, 50);
         const material = new THREE.MeshStandardMaterial();
 
         for (let i = 0; i < 1000; i++) {

diff --git a/samples/geometry_general.html b/samples/geometry_general.html
@@ -4,7 +4,7 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js"
         }
       }
     </script>

diff --git a/samples/geometry_merge_mesh.html b/samples/geometry_merge_mesh.html
@@ -6,14 +6,15 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js",
-          "three/addons/": "https://unpkg.com/three@0.152.2/examples/jsm/"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/"
         }
       }
     </script>
     <script type="module">
       import * as THREE from "three";
-      import * as BufferGeometryUtils from "three/addons/utils/BufferGeometryUtils.js";
+      import * as BufferGeometryUtils from 'three/addons/utils/BufferGeometryUtils.js';
+
 
       // サイズを指定
       const width = 960;
@@ -47,7 +48,7 @@
             const geometryTranslated = geometryBox.translate(
               10 * (i - CELL_NUM / 2),
               10 * (j - CELL_NUM / 2),
-              10 * (k - CELL_NUM / 2)
+              10 * (k - CELL_NUM / 2),
             );
 
             // ジオメトリを保存
@@ -56,7 +57,7 @@
         }
       }
       // ジオメトリを生成
-      const geometry = BufferGeometryUtils.mergeBufferGeometries(boxes);
+      const geometry = BufferGeometryUtils.mergeGeometries(boxes);
 
       // マテリアルを作成
       const material = new THREE.MeshNormalMaterial();

diff --git a/samples/geometry_merge_none.html b/samples/geometry_merge_none.html
@@ -6,7 +6,7 @@
     <script type="importmap">
       {
         "imports": {
-          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
+          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js"
         }
       }
     </script>

diff --git a/samples/index.html b/samples/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -47,7 +47,7 @@
         // 'position_project.html',
         // 'position_world.html',
         // 'quickstart.html',
-        // 'raycast.html',
+        'raycast.html',
         // 'renderer_resize.html',
         // 'sincos_camera.html',
         // 'sincos_geo.html',
@@ -61,7 +61,7 @@
     <h1>${url}</h1>
     <iframe width="960" height="540" src="${url}"></iframe>
   </div>
-`
+`,
       );
 
       console.log(doms);