Vue.jsのプロジェクトでThree.jsを使う

Vue.jsのプロジェクトでThree.jsを使ってみたのでその手順をまとめておく。

環境

DockerでVue.jsとApacheの環境を作成すると同様にDockerを使う。DockerfileにThree.jsのインストールを追加する。

FROM httpd:2.4

WORKDIR /app

# node.jsなどをインストール
RUN apt-get update \
 && apt-get -y install --no-install-recommends \
    nodejs \
    npm \
	curl \
 # キャッシュ削除
 && apt-get clean

# node.jsを最新にする
RUN npm install -g n \
 && n stable \
 && apt purge -y \
    nodejs \
	npm

# Vue.jsとCLIインストール
RUN ["/bin/bash", "-c", " \
    source ~/.bashrc \
     && npm install vue \
     && npm install -g @vue/cli \
     && npm install three \
 "]

EXPOSE 80 8080

Vue.jsプロジェクトの作成

Dockerコンテナを起動してVueプロジェクトを作成する。まずはコンテナを起動して中に入る。
PS > docker-compose up -d PS > docker-compose exec vue bash

新規でVueプロジェクトsampleを作成する。
# vue create sample

今回はマニュアルを選択して次のように選択。

• ? Please pick a preset: Manually select features
• ? Check the features needed for your project: Choose Vue version, Babel, Router, Linter
• ? Choose a version of Vue.js that you want to start the project with 2.x
• ? Use history mode for router? (Requires proper server setup for index fallback in production) No
• ? Pick a linter / formatter config: Standard
• ? Pick additional lint features: Lint on save
• ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

Three.jsでコンテンツ作成

Three.jsのサンプルをVue.jsで動作するようにする。Canvasコンポーネントを作成し、サンプルのHelloworldコンポーネントと置き換える。作成したプロジェクトのsrcディレクトリ配下のファイル構成を以下のようにする。

src │ App.vue │ main.js │ ├─assets │ logo.png │ ├─components │ Canvas.vue │ HelloWorld.vue │ ├─router │ index.js │ └─views About.vue Home.vue

まずはcomponentsディレクトリ配下にCanvas.vueを追加する。

<template>
    <div ref="container" id="container">
    </div>
</template>

<script>
import * as THREE from 'three';

export default {
  name: 'Canvas',
  data () {
    return {
      camera: null,
      mesh: null,
      scene: null,
      renderer: null
    };
  },
  created () {
    this.init();
    window.addEventListener('resize', this.onWindowResize);
  },
  destroyed () {
    window.removeEventListener('resize', this.onWindowResize);
  },
  mounted () {
    this.animation();
    this.$refs.container.appendChild(this.renderer.domElement);
    this.onWindowResize();
  },
  methods: {
    init: function () {
      this.camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
      this.camera.position.z = 1;

      this.scene = new THREE.Scene();

      const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
      const material = new THREE.MeshNormalMaterial();

      this.mesh = new THREE.Mesh(geometry, material);
      this.scene.add(this.mesh);

      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.renderer.setAnimationLoop(this.animation);
    },
    animation: function (time) {
      this.mesh.rotation.x = time / 2000;
      this.mesh.rotation.y = time / 1000;

      this.renderer.render(this.scene, this.camera);
    },
    onWindowResize: function () {
      this.camera.aspect = window.innerHeight / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.setSize(window.innerHeight, window.innerHeight);
    }
  }
}
</script>

<style>
#container {
  margin: 0 auto;
  width: max-content;
}
</style>

次に追加したCanvas.vueをサンプルのHelloworldコンポーネントと置き換えるようにHome.vueを修正。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <Canvas>
    </Canvas>
  </div>
</template>


<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import Canvas from '@/components/Canvas.vue'

export default {
  name: 'Home',
  components: {
    // HelloWorld,
    Canvas
  }
}
</script>

このままだとサーバー起動時にエラーが発生するので、プロジェクトディレクトリ配下の.eslintrc.jsのrulesに「'semi': 'off'」を追加してESLintで行末の「;」をエラーとしないように設定する。

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'semi': 'off'
  }
}

ファイルの編集などが終わったら開発サーバを起動。
# cd sample # npm run serve

ブラウザでhttp://localhost:8080にアクセスすると以下のようなThree.jsのサンプルが表示される。