【02】vue2中使用three.js绘制一个可移动的几何体【实战】

导语

本节介绍如何在Vue项目中结合Three.js绘制一个可交互的几何体。

1. 创建项目

1. 全局安装vue-cli：cnpm install vue-cli -g。
2. 创建新项目：vue init webpack testthree。
3. 安装依赖并启动项目：cnpm install 和 cnpm run dev，项目运行成功后可以看到默认页面。

2. 安装Three.js

通过npm或cnpm安装Three.js库，以便在项目中使用。

3. 在项目中使用Three.js

修改APP.VUE文件，导入Three.js和必要的控件。创建场景、相机、渲染器、控制器，并添加一个立方体。设置渲染器的尺寸并将其DOM元素添加到容器中。同时，使用requestAnimationFrame创建一个渲染循环来更新画面。

重启项目后，可以看到一个绿色的可拖动立方体。