献给读者，我起这个标题绝对不是想着靠标题给大家吸引进来给我引流加阅读量什么的，我总结看了一遍掘金所有ThreeJS的入门文章，发现大家很多都是写的给自己看的文章，偏向于让所有人都能看懂的部分还是少了。如果说这篇文章确实对您有帮助您可以点赞支持下我产出更多优秀内容。如果说确实存在需要改进的地方您可以在评论区留下宝贵的意见。我一定认真学习，认真改进

封面是楚雨旬，他做这个动作的样子我觉得很帅，感觉代表了一种态度，那就是”放马过来吧，不管有什么困难我都不怕“，生活可能一直都在拷打我们，但是人类的欢歌就是我们永远也不会放弃，你说不是嘛？你杀不死我的，只会让我更强大。

导入这个模块

假设你正在使用Webpack或者Browserify等允许你“通过打包所有依赖，来在浏览器中使用require('modules')”的打包工具对你的文件进行打包。

你现在可以在你的源代码中引入模块，并继续像往常一样使用这个库。

var THREE = require('three');

var scene = new THREE.Scene();
...

你也可以使用ES6 import（在ES6标准中新增的import语句）

import * as THREE from 'three';

const scene = new THREE.Scene();
...

或者，如果你希望只导入three.js库中的特定部分，例如Scene：

import { Scene } from 'three';

const scene = new Scene();
...

可引入的示例

three.js的核心专注于实现3D引擎中最为重要的组件。其他诸如加载器和控制器等组件，是示例文件夹中的一部分。 three.js确保这些文件能够与核心保持同步，但如果在一个项目中这些组件是必要的，用户将必须分别地引入它们。你可以在examples/jsm文件夹中找到所有示例文件的ES6版本。如果你是通过npm来安装three.js的，那么你可以使用类似下面的代码来引入它们：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

请注意：当你在使用来自示例（examples）文件夹中的代码时，其中的所有文件和你的three.js主文件版本相匹配是很重要的。比如说，three.js的R103版本不能够接受和来自R96版本的GLTFLoader和OrbitControls一起使用。

实战上手

为了方便大家更好的理解这个模块话搭建的概念，这里将使用Vue这种项目开源JS开发框架来上手开发，并且在Vue项目中引入ThreeJS来进行实践。那么我们接下来将在控制台中输入以下一些命令行来进行操作：

全局安装Vue

npm install vue -g

全局安装Vue/cli 【使用Vue UI用更方便的方式来管理Vue项目】

npm install @vue/cli -g

好，以上我们就完成了Vue和VueCLI的安装。现在我们就可以直接使用Vue UI了。

好，可以看见我们打开了VueUI 在本地PC机的8000端口上面。下面看下VueUI长什么样吧

然后我们在新建的这个项目这里添加ThreeJS的依赖

好的，这里就可以成功的将threeJS引入到我们这个项目当中来了。引入进来之后我们就可以在这个前端项目中使用ThreeJS了。

那么现在我们的VUE UI界面就算是useless for me,you know？所以我们就关掉他。再在刚刚创建项目的地方用Visual Studio Code - Code Editing. Redefined 打开我们刚刚用VueUI创建的testGL项目

然后我们在控制台输入package.json当中的dev指令开始运行这个项目，我们就能在项目控制台输入以下命令启动项目：

npm run serve

我们就能够访问计算机的8080端口得到这个界面：

然后我们将这个界面清空，将刚刚写的JS代码修改一下放到Home.vue文件里面去：

<template>
  <main class="app-container">
    <section id="container"></section>
  </main>
</template>
<script>
import * as THREE from "three";
export default {
  name: "index_container",
  // 用data存放响应式变量
  data() {
    return {
      scene: "",
      camera: "",
      renderer: "",
      container: "",
      cube: "",
    };
  },
  // 当前this的方法都放在methods里面
  methods: {
    // 加载场景
    initScene() {
      this.scene = new THREE.Scene();
    },
    // 加载相机
    initCamera() {
      this.camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      this.camera.position.z=5
    },
    // 加载渲染器
    initRenderer() {
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      this.container = document.getElementById("container");
      this.renderer.setSize(window.innerWidth, innerHeight);
      this.container.appendChild(this.renderer.domElement);
    },
    // 加载方块
    loadGeometry() {
      // 开始设置立方体,设置长宽高，立方体的框架
      var geometry = new THREE.BoxGeometry(1, 1, 1);
      // 设置渲染材质，这个变量用来渲染立方体的表面。设置立方体的颜色为绿色。立方体的表面材质
      var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      // 真正的立方体变量，通过THREE.Mesh来将材质和框架混合到一起
      this.cube = new THREE.Mesh(geometry, material);
      this.scene.add(this.cube)
    },
    // 在页面加载的时候执行这个方法
    init() {
      this.initScene();
      this.initCamera();
      this.initRenderer();
      this.loadGeometry()
      this.animate();
    },
    // 执行让方块动起来的动画
    animate() {
      this.renderer.render(this.scene, this.camera);
      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;
      this.requestId = requestAnimationFrame(this.animate);
    },
  },
  // 在页面加载之前执行init方法
  mounted() {
    this.init();
  },
};
</script>
<style scoped>
#container {
  height: 600px;
}
</style>

好，该有的注释方法都已经写在上面了，与HTML文件唯一的区别就是将加载场景，相机，渲染器还有Geometry的几个方法抽离出来显得代码更加的通俗易懂工程化了。

运行效果

可以看到我们的ThreeJS效果成功的成HTML中迁移到Vue当中来了。不过我现在上面用的是Vue2.0版本，为什么我这里不选择使用Vue3.0呢？【后面有个彩蛋，我这里先埋下伏笔】

传送门

上篇文章地址：ThreeJS掘金最通俗入门教程01 - 掘金 (juejin.cn)
下篇文章地址：ThreeJS掘金最通俗入门教程03-基础材质的使用 - 掘金 (juejin.cn)

参考文献

ThreeJS中文网：Three.js中文网 (webgl3d.cn)
VueJS官网:介绍 — Vue.js (vuejs.org)

ThreeJS掘金最通俗入门教程02-模块化引入方式

导入这个模块

可引入的示例

实战上手

运行效果

传送门

参考文献