diff --git a/src/multiple-animation/main.js b/src/multiple-animation/main.js index 121fc47..02303e7 100644 --- 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 index 025d613..97f0db8 100644 --- a/src/sample/index.html +++ b/src/sample/index.html @@ -10,5 +10,9 @@
+ + diff --git a/src/sample/sample.js b/src/sample/sample.js index 0f9d928..d41280e 100644 --- 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 index 0979e5a..b394f27 100644 --- 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 {