Vue と Canvas を使用して 3D モデルのビジュアル表示アプリケーションを作成する方法

Vue と Canvas を使用して 3D モデルのビジュアル表示アプリケーションを作成する方法

近年、データ視覚化のアプリケーションがますます普及しており、3D モデルのビジュアル表示が注目を集めています。大多数の開発者の注目を集めています。柔軟なフロントエンド フレームワークとして、Vue を Canvas テクノロジーと組み合わせることで、3D モデルの視覚的な表示を非常にうまく実現できます。この記事では、Vue と Canvas を使用して簡単な 3D モデルのビジュアル表示アプリケーションを作成する方法をコード例とともに紹介します。

まず、基礎知識を準備する必要があります。 Vue は、ユーザー インターフェイスを構築するための進歩的なフレームワークであり、単一ページ アプリケーションの作成に最適です。 Canvas は、HTML5 が提供するグラフィック描画用の API で、2D および 3D グラフィックを描画できます。

次に、Vue プロジェクトを作成する必要があります。まず、Node.js と npm がインストールされていることを確認します。次に、ターミナルを開き、次のコマンドを実行して新しい Vue プロジェクトを作成します:

$ npm install -g @vue/cli
$ vue create 3d-visualization

上記の手順を完了したら、ターミナルでプロジェクト ディレクトリに切り替え、次のコマンドを実行して必要な依存関係をインストールします。 ##

$ cd 3d-visualization
$ npm install three vue-threejs --save

プロジェクト ディレクトリに新しいファイル

ThreeModel.vue を作成し、次のコードをファイルに貼り付けます。ファイル ThreeModel

コンポーネントを次の場所に導入します:

<template>
  <div id="canvas-container"></div>
</template>

<script>
import { Scene, PerspectiveCamera, WebGLRenderer, BoxGeometry, MeshBasicMaterial, Mesh } from 'three'

export default {
  mounted () {
    const container = document.getElementById('canvas-container')

    // 创建场景
    const scene = new Scene()

    // 创建相机
    const camera = new PerspectiveCamera(75, container.offsetWidth / container.offsetHeight, 0.1, 1000)
    camera.position.z = 5

    // 创建渲染器
    const renderer = new WebGLRenderer()
    renderer.setSize(container.offsetWidth, container.offsetHeight)
    container.appendChild(renderer.domElement)

    // 创建立方体
    const geometry = new BoxGeometry()
    const material = new MeshBasicMaterial({ color: 0x00ff00 })
    const cube = new Mesh(geometry, material)
    scene.add(cube)

    // 渲染场景
    function animate () {
      requestAnimationFrame(animate)

      cube.rotation.x += 0.01
      cube.rotation.y += 0.01

      renderer.render(scene, camera)
    }
    animate()
  }
}
</script>

<style>
#canvas-container {
  width: 100%;
  height: 100%;
}
</style>

最後に、ターミナルで次のコマンドを実行して Vue 開発サーバーを起動します:

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

<script>
import ThreeModel from './ThreeModel.vue'

export default {
  components: {
    ThreeModel
  }
}
</script>

次に、ブラウザを開いて次のサイトにアクセスします。 http://localhost:8080

では、ページ上で回転する単純な 3D 立方体が表示されます。

このコードは、まず

mounted ライフサイクル フックのコンテナ要素 canvas-container

を取得し、次にシーン、カメラ、およびレンダラーを作成します。次に、BoxGeometry を使用して立方体が作成され、その色は MeshBasicmaterial によって設定されます。最後に、アニメーション関数

animate で立方体が回転し、シーンが再レンダリングされます。 上記は、Vue と Canvas を使用して 3D モデルのビジュアル表示アプリケーションを作成する方法の手順です。 Vue のコンポーネント開発と Canvas の描画機能を組み合わせることで、より複雑な 3D モデル視覚化アプリケーションをより簡単に作成できます。この記事がお役に立てば幸いです!

以上がVue と Canvas を使用して 3D モデルのビジュアル表示アプリケーションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。