Vue と Canvas を使用してクールな 3D 回転グラフィックスを作成する方法

Vue と Canvas を使用してクールな 3D 回転グラフィックスを作成する方法

はじめに:
Vue と Canvas は 2 つの非常に強力なフロントエンド テクノロジであり、それぞれページ レンダリングと画像描画の処理に優れています。この記事では、Vue と Canvas を組み合わせてクールな 3D 回転グラフィックス効果を作成する方法を紹介します。 Vue を使用して基本的なページ構造を構築する方法と、Canvas を使用して 3D グラフィックスの描画および回転効果を実現する方法を説明します。この記事を学ぶことで、Vue と Canvas を使用して見事な 3D ダイナミック エフェクトを作成する方法を理解できるようになります。

本文:
1. Vue プロジェクトを作成し、基本的なページ構造を構築します
まず、Vue プロジェクトを作成する必要があります。Vue CLI をインストールしていない場合は、次のコマンドを使用してインストールできます。次のコマンド:

npm install -g @vue/cli

Vue プロジェクトを作成し、プロジェクト ディレクトリに切り替えます:

vue create 3d-rotation-graphic
cd 3d-rotation-graphic

次に、Three.js や Canvas ライブラリなどの必要な依存関係パッケージをインストールする必要があります:

npm install three vue-canvas

新しい Vue コンポーネント RotationGraphic.vue を作成し、その中で基本的なページ構造を定義します。

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
import Vue from 'vue';
import { CanvasRenderer } from 'vue-canvas';
import * as THREE from 'three';

Vue.use(CanvasRenderer);

export default {
  name: 'RotationGraphic',
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const canvas = this.$refs.canvas;
      const renderer = new THREE.WebGLRenderer({ canvas });
      // 绘制代码将在下一节中添加
      this.animate();
    },
    animate() {
      // 更新画面的代码将在下一节中添加
    }
  }
};
</script>

<style scoped>
canvas {
  width: 100%;
  height: 100%;
}
</style>

上記のコードは、Vue コンポーネント RotationGraphic を定義します。 Canvas 要素、そして mounted ライフサイクル フックの init メソッドを呼び出して、グラフィックを初期化してレンダリングします。次のセクションでは、グラフを描画し、画面を更新するコードを追加します。

2. Canvas で 3D グラフィックを描画する
Three.js ライブラリの BoxGeometry と MeshBasicmaterial を使用して、単純な立方体を描画します。グラフィックスを描画するには、次のコードを init メソッドに追加します。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;

renderer.setSize(window.innerWidth, window.innerHeight);

上記のコードは、シーン オブジェクト scene、カメラ オブジェクト camera を作成します。立方体オブジェクト cube と立方体をシーンに追加します。シーン全体が見えるように、カメラの位置は (0, 0, 5) に設定されています。最後に、レンダラのサイズをウィンドウの幅と高さに設定します。

3. 画像の動的な更新を実現します
グラフィックの回転効果を実現するために、animate メソッドで立方体の回転角度を更新し、再実行します。 - 各フレームでシーンをレンダリングします。 animate メソッドを次のコードに置き換えます。

animate() {
  requestAnimationFrame(this.animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

上記のコードは、requestAnimationFrame メソッドを使用して、各フレームで animate メソッドを呼び出します。ブラウザ。各フレームでは、立方体の x 方向と y 方向の回転角度が 0.01 ラジアンずつ増加し、シーンがレンダラーを通じて再レンダリングされます。

4. Vue アプリケーションでの 3D 回転グラフィック コンポーネントの使用
RotationGraphic コンポーネントを使用して、3D 回転グラフィック効果を示します。 Vue プロジェクトのメイン コンポーネントで RotationGraphic コンポーネントを使用し、App.vue ファイルを変更します。

<template>
  <div id="app">
    <RotationGraphic/>
  </div>
</template>

<script>
import RotationGraphic from './components/RotationGraphic.vue';

export default {
  name: 'App',
  components: {
    RotationGraphic
  }
}
</script>

<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}
</style>

上記のコードは、app の ID を追加します。ページ 要素に RotationGraphic コンポーネントを追加します。 CSS スタイルを通じて、ページを中央に配置し、背景色を設定します。

結論:
この記事の学習を通じて、Vue と Canvas を組み合わせてクールな 3D 回転グラフィックス効果を作成する方法を学びました。 Vue プロジェクトで RotationGraphic という名前のコンポーネントを作成し、Three.js を使用して立方体を描画し、回転角度とレンダラーを更新することで回転効果を実現しました。この記事の紹介が、Vue と Canvas テクノロジをより深く理解し、適用して、より魅力的なフロントエンド エフェクトを作成するのに役立つことを願っています。

コード例: https://github.com/your-username/3d-rotation-graphic

以上がVue と Canvas を使用してクールな 3D 回転グラフィックスを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。