神戸ソフト
お知らせ

トップページのアニメーションについて

この度、トップページにインパクトを持たせるため、Three.jsを使用して動的なアニメーションを制作しました。

Three.jsは3D空間をブラウザ上で表現するためのライブラリであり、今回のようなアニメーション効果の実装に最適です。

特に、視覚的な面白さと自然さを両立するため、頂点の動きやカメラワークにこだわり、ユーザーに印象的な体験を提供できるよう工夫しました。

以下に、各アニメーションの構成要素やその狙いについて詳細に解説していきます。

    1. ランダムに生成した頂点2. カメラの動きとその設計• 5秒ごとの目標位置設定• 中央を注視するカメラ• 線形でない移動の実現- 3. 頂点同士の接続方法• ドロネー分割の代替手法• 線の配置と美しさのバランス- 4. 頂点の描画スタイル• ふわっとした円形の描画• シェーダーの使用と演出効果まとめ

1. ランダムに生成した頂点

まず、アニメーションの基礎となる「頂点」をランダムに配置しました。約300の頂点を生成し、3D空間上にばらばらに配置することで、複雑で奥行きのある構造が生まれます。このランダムな頂点配置によって、同じシーンでも角度やカメラの動きに応じて異なる印象を与えることができ、訪問者がサイトにアクセスするたびに新鮮さを感じられるようになっています。

// 頂点の作成
const vertices = [];
for (let i = 0; i

function animate(time) { requestAnimationFrame(animate);

// 5秒ごとに目標位置を更新
if (time - lastUpdateTime > 5000) {
    updateTargetPosition();
    lastUpdateTime = time;
}

// カメラが目標位置の近くに来たら目標位置を更新
if (camera.position.distanceTo(targetPosition)  a.distance - b.distance);
for (let k = 0; k < Math.min(5, distances.length); k++) { // 最大5本に制限
    const j = distances[k].index;
    const distance = distances[k].distance;
    edges.push(vertices[i].x, vertices[i].y, vertices[i].z);
    edges.push(vertices[j].x, vertices[j].y, vertices[j].z);
    const alpha = Math.min(0.1, 1.0 - (distance / maxDistance)); // アルファ値を最大0.1に制限
    colors.push(1.0, 1.0, 1.0, alpha);
    colors.push(1.0, 1.0, 1.0, alpha);
}

}

const lineGeometry = new THREE.BufferGeometry(); lineGeometry.setAttribute(‘position’, new THREE.Float32BufferAttribute(edges, 3)); lineGeometry.setAttribute(‘color’, new THREE.Float32BufferAttribute(colors, 4)); const lineMaterial = new THREE.LineBasicMaterial({ vertexColors: true, transparent: true, blending: THREE.AdditiveBlending }); lines = new THREE.LineSegments(lineGeometry, lineMaterial); scene.add(lines);


## 4. 頂点の描画スタイル

最後に、頂点そのものの描画について説明します。

頂点の描画にはシェーダーを使用し、ふわっとした円形のデザインを採用しました。

### • ふわっとした円形の描画

各頂点は柔らかい円形として描画されています。この円形の頂点は、描画時にシェーダーで生成することで、頂点が揺れるような動きを見せながらも自然に見えるように調整しています。

このふわっとした円形は、頂点がただの「点」ではなく「空間に漂うオブジェクト」のように見せる効果があります。

// グロー効果のシェーダーマテリアルを作成 const vertexShader = varying vec3 vColor; void main() { vColor = color; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_PointSize = 0.1 * (300.0 / -mvPosition.z); // 点のサイズを調整 gl_Position = projectionMatrix * mvPosition; };


### • シェーダーの使用と演出効果

シェーダーを用いることで、単なる幾何学的なオブジェクトではなく、動きのあるオブジェクトとして頂点を表現できました。

シェーダーによる円形描画は、ブラウザ上で滑らかに動くため、訪問者に「空間に存在する柔らかな粒子」のような印象を与えることができています。

## まとめ

このトップページのアニメーションは、Three.jsを最大限に活用し、動きのあるインタラクティブな空間を構築しています。カメラの滑らかな動きや頂点の接続、シェーダーによる柔らかい描画スタイルなどが一体となり、訪問者に没入感を提供するデザインに仕上がっています。カメラや頂点の動きによって、サイト全体が「生きている」ように感じられるため、印象に残りやすく、訪問者の興味を引きつけることができます。

このようなアニメーション効果を取り入れることで、単なる静的なページではなく、訪問者が楽しみながら体験できるページデザインを実現しました。今後も、ユーザー体験を重視したデザインの工夫を続けていきたいと考えています。

全体のソースコードは[こちらにアップ](https://gist.github.com/ks-tmatsuoka/7fcdf489df2ba411f29d0189da9a4379)しています。
ご自由にご活用ください。
お知らせ一覧に戻る