vue+three创建一个圆锥体

在Vue.js和Three.js中创建一个简单的圆锥体，首先你需要确保已经安装了Vue和Three.js库。以下是基本步骤：

1. **设置环境**:
- 在Vue项目中安装`vue-threejs`包：`npm install vue three`

2. **引入依赖**:

   import * as THREE from 'three';
   import { VueThreeRenderer } from 'vue-three-renderer';

3. **在组件中使用 Three.js**:
创建一个新的Vue组件，比如`Conic.vue`，并添加一个渲染器实例和圆锥体：

<template>
  <div id="app">
    <vue-three-renderer ref="renderer" :camera="camera" :scene="scene"></vue-three-renderer>
  </div>
</template>

<script>
import { VueThreeRenderer } from 'vue-three-renderer';

export default {
  components: {
    VueThreeRenderer,
  },
  data() {
    return {
      camera: new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000),
      scene: new THREE.Scene(),
      coneGeometry: new THREE.CylinderGeometry(0, 1, 2, 32), // 圆锥底半径、高、段数
      coneMaterial: new THREE.MeshStandardMaterial({ color: 0x44aa88 }), // 材质
    };
  },
  mounted() {
    const cone = new THREE.Mesh(this.coneGeometry, this.coneMaterial);
    this.scene.add(cone);

    // 渲染器配置
    const renderer = this.$refs.renderer;
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(this.scene, this.camera);
  },
};
</script>

4. **CSS样式**:
添加一些CSS来调整圆锥体的位置和大小，例如将其放在视口中央：

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}