vue2+three.js环境搭建详细过程

文章目录

详细的Vue 2 + Three.js环境搭建过程：

1、安装Node.js和npm

如果您还没有安装Node.js和npm，请前往Node.js官网下载并安装。

2、使用Vue CLI创建新的Vue项目

Vue CLI是Vue.js官方提供的命令行工具，可用于快速创建和管理Vue项目。

要创建一个新的Vue项目，请打开命令行终端并运行以下命令：

vue create my-project

其中my-project是您的项目名称，您可以根据需要自定义。

3、安装Three.js作为项目依赖项

进入项目目录并运行以下命令来安装Three.js：

cd my-project
npm install three

4、创建一个新的Vue组件用于Three.js场景

在Vue项目的src/components目录中创建一个名为ThreeScene.vue的文件，并使用以下代码填充它：

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

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

export default {
  mounted() {
    // 创建Three.js场景
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.refs.container.appendChild(this.renderer.domElement);

    // 向场景添加对象
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    this.scene.add(cube);

    // 渲染场景
    this.animate();
  },

  methods: {
    animate() {
      requestAnimationFrame(this.animate);
      this.renderer.render(this.scene, this.camera);
    },
  },
};
</script>

此代码创建了一个简单的Three.js场景，其中包含一个绿色的立方体。在mounted生命周期钩子中，它创建了Three.js场景并将其渲染到Vue组件的HTML模板中。

5、在Vue应用程序中导入Three.js组件并在主组件中渲染它

打开Vue项目的src/App.vue文件，并使用以下代码替换它：

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

<script>
import ThreeScene from '@/components/ThreeScene';

export default {
  name: 'App',

  components: {
    ThreeScene,
  },
};
</script>

此代码导入ThreeScene组件并在Vue应用程序的主组件中渲染它。现在，当您运行Vue应用程序时，您将看到一个绿色的立方体在屏幕中心旋转。

这就是Vue 2 + Three.js环境的基本设置。现在，您可以使用Three.js API构建自己的3D场景。
欢迎您关注我的原创公众号【GISer世界】，本期分享到这里就结束了。
在这里插入图片描述

在这里插入图片描述