vue threejs

如何在 Vue 中使用 Three.js？

在 Vue 中使用 Three.js，可以通过安装 Three.js 和 Vue-Three.js 库来实现。首先，你需要在 Vue 项目中安装 Three.js：

npm install three

然后，你需要安装 Vue-Three.js 库：

npm install vue-threejs

接下来，在你的 Vue 组件中，你可以使用 Vue-Three.js 提供的组件来创建 Three.js 场景、相机和渲染器：

<template>
  <vue-three>
    <vue-three-scene>
      <vue-three-perspective-camera :position="{ x: 0, y: 0, z: 10 }"></vue-three-perspective-camera>
      <vue-three-mesh :geometry="boxGeometry" :material="boxMaterial"></vue-three-mesh>
    </vue-three-scene>
  </vue-three>
</template>

<script>
import { VueThree, VueThreeScene, VueThreePerspectiveCamera, VueThreeMesh } from 'vue-threejs'
import * as THREE from 'three'

export default {
  components: {
    VueThree,
    VueThreeScene,
    VueThreePerspectiveCamera,
    VueThreeMesh
  },
  data() {
    return {
      boxGeometry: new THREE.BoxGeometry(1, 1, 1),
      boxMaterial: new THREE.MeshBasicMaterial({ color: 0xff0000 })
    }
  }
}
</script>

这个例子中，我们创建了一个红色的立方体，并将其放置在场景中心。你可以根据自己的需要来创建不同的 Three.js 对象，并在 Vue 组件中使用它们。