一个使用three.js的vue2项目参考

以下是一个使用three.js的vue2项目参考:

1. 首先，安装vue-cli:

npm install -g vue-cli

2. 创建一个vue项目:

vue init webpack my-project

3. 进入项目目录并安装three.js:

cd my-project
npm install three --save

4. 在main.js中引入three.js:

import * as THREE from 'three'

5. 在需要使用three.js的组件中，创建场景、相机、渲染器、光源等等:

import * as THREE from 'three'

export default {
  name: 'MyScene',
  data () {
    return {
      scene: null,
      camera: null,
      renderer: null,
      light: null
    }
  },
  mounted () {
    // 创建场景
    this.scene = new THREE.Scene()

    // 创建相机
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    this.camera.position.z = 5

    // 创建渲染器
    this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
    this.renderer.setSize(window.innerWidth, window.innerHeight)
    this.renderer.setClearColor(0x000000, 0)

    // 添加光源
    this.light = new THREE.AmbientLight(0xffffff)
    this.scene.add(this.light)

    // 添加到DOM中
    this.$refs.container.appendChild(this.renderer.domElement)

    // 开始渲染
    this.renderScene()
  },
  methods: {
    renderScene () {
      requestAnimationFrame(this.renderScene)
      this.renderer.render(this.scene, this.camera)
    }
  }
}

6. 在组件的模板中，添加一个容器用于渲染three.js场景:

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

7. 在App.vue中，引入MyScene组件:

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

<script>
import MyScene from '@/components/MyScene.vue'

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

这样，一个简单的使用three.js的vue2项目就完成了。当然，这只是一个基础的参考，具体的使用还需要根据实际情况做出相应的调整和扩展。