リファクタリング

ics-creative · Aug 20, 2024 · a8100cf · a8100cf
1 parent 410ae5f
commit a8100cf
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 36 deletions.
diff --git a/src/multiple-animation/main.js b/src/multiple-animation/main.js
@@ -78,7 +78,7 @@ const observer = new IntersectionObserver(
 // スクロールボタンのアニメーション定義
 // ---------------------------
 /** シート"KV Animation"の定義 */
-const scrollButtonO = kvSheet.object("ScrollButton", {
+const kvScrollButtonObj = kvSheet.object("ScrollButton", {
   visibility: types.stringLiteral("visible", {
     visible: "visible",
     hidden: "hidden",
@@ -88,7 +88,7 @@ const scrollButtonO = kvSheet.object("ScrollButton", {
     y: types.number(1, { range: [0, 2] }),
   }),
 });
-scrollButtonO.onValuesChange((values) => {
+kvScrollButtonObj.onValuesChange((values) => {
   scrollButton.style.visibility = values.visibility;
   scrollButton.style.scale = `${values.scale.x} ${values.scale.y}`;
 });
@@ -113,15 +113,6 @@ scrollButtonObj.onValuesChange((values) => {
 const scene = new THREE.Scene();
 scene.background = new THREE.Color("#1d1d26");
 
-// カメラを作成：THREE.PerspectiveCamera(視野角, アスペクト比, near, far)
-const camera = new THREE.PerspectiveCamera(
-  45,
-  document.body.clientWidth / window.innerHeight, // document.body.clientWidth：スクロールバーを幅含まない横幅
-  1,
-  1000,
-);
-camera.position.z = 45;
-
 // ---------------------------
 // テキストのアニメーション定義
 // ---------------------------
@@ -194,12 +185,13 @@ textLoopObj.onValuesChange((value) => {
 // ---------------------------
 // キューブのアニメーション定義
 // ---------------------------
-const cubeMaterial = new THREE.MeshStandardMaterial({
+// キューブのメッシュ
+const material = new THREE.MeshStandardMaterial({
   color: "#ff9900",
   emissive: "#049ef4",
 });
-const boxGeometry = new THREE.BoxGeometry(6, 6, 6);
-const cube = new THREE.Mesh(boxGeometry, cubeMaterial);
+const geometry = new THREE.BoxGeometry(6, 6, 6);
+const cube = new THREE.Mesh(geometry, material);
 scene.add(cube); // three.jsのシーンに追加
 
 /** シート"KV Animation"の定義 */
@@ -231,7 +223,7 @@ cubeObj.onValuesChange((values) => {
   cube.position.set(px, py, pz);
   const { sx, sy, sz } = values.scale;
   cube.scale.set(sx, sy, sz);
-  cubeMaterial.color = values.color;
+  material.color = values.color;
 });
 
 /**
@@ -247,6 +239,17 @@ rectAreaLight.position.set(-20, 40, 10);
 rectAreaLight.lookAt(new THREE.Vector3(0, 0, 0)); // 座標原点の方を照らす
 scene.add(rectAreaLight);
 
+/**
+ * カメラ
+ */
+const camera = new THREE.PerspectiveCamera(
+  45,
+  document.body.clientWidth / window.innerHeight, // document.body.clientWidth：スクロールバーを幅含まない横幅
+  1,
+  1000,
+);
+camera.position.z = 45;
+
 /**
  * レンダラー
  */
@@ -263,9 +266,6 @@ const tick = () => {
   // レンダリング
   renderer.render(scene, camera);
 
-  // カメラはemptyObjectの方向を見るように
-  // camera.lookAt(cube.position);
-
   window.requestAnimationFrame(tick);
 };
 tick();

diff --git a/src/sample/index.html b/src/sample/index.html
@@ -10,5 +10,9 @@
 
   <body>
     <div id="app"></div>
+
+    <footer class="navigation">
+      <a href="../">目次へもどる</a>
+    </footer>
   </body>
 </html>
diff --git a/src/sample/sample.js b/src/sample/sample.js
@@ -35,28 +35,28 @@ const mesh = new THREE.Mesh(geometry, material);
 scene.add(mesh); // three.jsのシーンに追加
 
 /**
- * シート "Cube animation" のアニメーション定義
+ * シート "KV Animation" のアニメーション定義
  */
 const cubeObj = sheet.object("Cube", {
   // GUIから入力できるよう、変更させたいプロパティを定義
   // 回転を定義
   rotation: types.compound({
     // types.compound() でグループ化
-    x: types.number(mesh.rotation.x, { range: [-2, 2] }),
-    y: types.number(mesh.rotation.y, { range: [-2, 2] }),
-    z: types.number(mesh.rotation.z, { range: [-2, 2] }),
+    x: types.number(0, { range: [-2, 2] }), // −360 〜 360度 の想定
+    y: types.number(0, { range: [-2, 2] }),
+    z: types.number(0, { range: [-2, 2] }),
   }),
   // 位置を定義
   position: types.compound({
-    px: types.number(mesh.position.x, { range: [-100, 100] }),
-    py: types.number(mesh.position.y, { range: [-100, 100] }),
-    pz: types.number(mesh.position.z, { range: [-100, 100] }),
+    px: types.number(0, { range: [-100, 100] }),
+    py: types.number(0, { range: [-100, 100] }),
+    pz: types.number(0, { range: [-100, 100] }),
   }),
   // スケール
   scale: types.compound({
-    sx: types.number(mesh.scale.x, { range: [0, 4] }),
-    sy: types.number(mesh.scale.y, { range: [0, 4] }),
-    sz: types.number(mesh.scale.z, { range: [0, 4] }),
+    sx: types.number(0, { range: [0, 4] }),
+    sy: types.number(0, { range: [0, 4] }),
+    sz: types.number(0, { range: [0, 4] }),
   }),
   // 色を定義
   color: types.rgba({ r: 255, g: 0, b: 0, a: 1 }),
@@ -66,7 +66,7 @@ const cubeObj = sheet.object("Cube", {
 cubeObj.onValuesChange((values) => {
   // 回転を反映
   const { x, y, z } = values.rotation;
-  mesh.rotation.set(x * Math.PI, y * Math.PI, z * Math.PI);
+  mesh.rotation.set(x * Math.PI, y * Math.PI, z * Math.PI); // three.jsの回転は度数法ではなくラジアンなので変換しておく
   // 位置を反映
   const { px, py, pz } = values.position;
   mesh.position.set(px, py, pz);
@@ -91,7 +91,9 @@ rectAreaLight.position.set(-20, 40, 10);
 rectAreaLight.lookAt(new THREE.Vector3(0, 0, 0)); // 座標原点の方を照らす
 scene.add(rectAreaLight);
 
-/** カメラを作成：THREE.PerspectiveCamera(視野角, アスペクト比, near, far) */
+/**
+ * カメラ
+ */
 const camera = new THREE.PerspectiveCamera(
   45,
   document.body.clientWidth / window.innerHeight, // document.body.clientWidth：スクロールバーを含まない横幅
@@ -100,7 +102,9 @@ const camera = new THREE.PerspectiveCamera(
 );
 camera.position.z = 50;
 
-/** レンダラーを作成 */
+/**
+ * レンダラー
+ */
 const renderer = new THREE.WebGLRenderer({ antialias: true });
 renderer.render(scene, camera);
 

diff --git a/src/style.css b/src/style.css
@@ -61,12 +61,13 @@ html {
   height: 100vh;
   padding: 0 16px;
   margin: 0 auto;
+  line-height: 2;
   color: #fff;
   text-align: center;
 
   .aboutSection_inner {
     width: 100%;
-    padding: 100px 32px;
+    padding: 90px 32px 100px;
     background-color: rgb(255 255 255 / 40%);
     -webkit-backdrop-filter: blur(4px);
     backdrop-filter: blur(4px);
@@ -80,10 +81,6 @@ html {
     font-weight: 700;
     color: #ffdaf0;
   }
-
-  p {
-    line-height: 2;
-  }
 }
 
 .navigation {