携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

Three.js简介

什么是Three.js

Three.js 是一款 webGL 框架，由于其易用性被广泛应用。Three.js 在 WebGL 的 API 接口基础上，又进行的一层封装。 

　　Three.js 以简单、直观的方式封装了 3D 图形编程中常用的对象。Three.js 在开发中使用了很多图形引擎的高级技巧，极大地提高了性能。另外，由于内置了很多常用对象和极易上手的工具，Three.js 的功能也非常强大。最后，Three.js 还是完全开源的，你可以在 GitHub 上找到它的源代码。

功能概述

Three.js 作为 WebGL 框架中的佼佼者，由于它的易用性和扩展性，使得它能够满足大部分的开发需求，Three.js 的具体功能如下：

　　1. Three.js 掩盖了 3D 渲染的细节：Three.js 将 WebGL 原生 API 的细节抽象化，将 3D 场景拆解为网格、材质和光源（即它内置了图形编程常用的一些对象种类）。

　　2. 面向对象：开发者可以使用上层的 JavaScript 对象，而不是仅仅调用 JavaScript 函数。

　　3. 功能非常丰富：Three.js 除封装了 WebGL 原始 API 之外，Three.js 还包含了许多实用的内置对象，可以方便地应用于游戏开发、动画制作、幻灯片制作、髙分辨率模型和一些特殊的视觉效果制作。

　   4. 速度很快：Three.js 采用了 3D 图形最佳实践来保证在不失可用性的前提下，保持极高的性能。

　　5. 支持交互：WebGL 本身并不提供拾取（Picking）功能（即是否知道鼠标正处于某个物体上）。而 Three.js 则固化了拾取支持，这就使得你可以轻松为你的应用添加交互功能。

　　6. 包含数学库：Three.js 拥有一个强大易用的数学库，你可以在其中进行矩阵、投影和矢量运算。

　　7. 内置文件格式支持：你可以使用流行的 3D 建模软件导出文本格式的文件，然后使用 Three.js 加载，也可以使用 Three.js 自己的 JSON 格式或二进制格式。

　　8. 扩展性很强：为 Three.js 添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构，那么只需要封装到 Three.js 即可。

　　9. 支持HTML5 Canvas：Three.js 不但支持 WebGL，而且还支持使用 Canvas2D、Css3D 和 SVG 进行渲染。在未兼容 WebGL 的环境中可以回退到其它的解决方案。

不足之处：

　　1. 官网文档非常粗糙，对于新手极度不友好。

　　2. 国内的相关资源匮乏。

　　3. Three.js 所有的资料都是以英文格式存在，对国内的朋友来说又提高了门槛。

　　4. Three.js 不是游戏引擎，一些游戏相关的功能没有封装在里面，如果需要相关的功能需要进行二次开发。

本文说明

本文主要简单介绍了，在Vue项目中如何简单的使用Three.js，导入PCD三维模型文件。

模型显示

项目实现

第一步

首先创建一个vue2.x，的项目，然后需要先有一个 .pcd三维模型文件，如果有的话，将三维点云文件放在如下图的文件夹里，如果没有的话，百度云盘（链接：pan.baidu.com/s/1TM2gKCep… ）

第二步

在安装Three.js前，需要安装Babel，来编译ES6语法。

参考：

vue中引入babel步骤 www.icode9.com/content-4-1…

Vue之2——配置 Babel blog.csdn.net/u013545439/…

学习webpack创建vue项目2 babel-loader segmentfault.com/a/119000002…

Vue学习之Babel配置
www.shuzhiduo.com/A/Vx5M27KLd…

第三步

需要在vue2.x项目中安装Three.js

npm install three@0.128.0

npm install three-orbit-controls

npm i --save three-css2drender

依次安装，也可以一起安装

npm install --save three@0.128.0 three-orbit-controls three-css2drender

第四步

在项目中使用，以下是整个完整代码

<template>

  <div style="height: 100%; width: 100%">

    <!-- iView 前端UI的懒加载-->

    <!-- <div class="demo-spin-container" v-if="isShowLoading">

      <Spin fix>

        <Icon type="ios-loading" size="20" class="demo-spin-icon-load"></Icon>

        <div>加载中...</div>

      </Spin>

    </div> -->

    <div id="three" style="height: 100%; width: 100%"></div>

  </div>

</template>



<script>

// 引入Three.js

import * as THREE from "three";

// 引入PCD加载器

import { PCDLoader } from "three/examples/jsm/loaders/PCDLoader.js"; // 注意是examples/jsm

// 引入模型控制器

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; // 放大缩小旋转等控制操作

// 创建一个时钟对象Clock

var clock = new THREE.Clock();

// 设置渲染频率为30FBS，也就是每秒调用渲染器render方法大约30次

var FPS = 30;

var renderT = 1 / FPS; //单位秒  间隔多长时间渲染渲染一次

// 声明一个变量表示render()函数被多次调用累积时间

// 如果执行一次renderer.render，timeS重新置0

var timeS = 0;

export default {

  components: {},

  data() {

    return {

      animationId: null,

      //   isShowLoading: false,

      elem: null,

      scene: null,

      // mesh: null, //网格模型对象

      camera: null, //相机对象

      renderer: null, //渲染器对象

      loader: null,

      controls: null

    };

  },

  beforeDestroy() {

    this.destroyModel();

  },

  created() {},

  mounted() {

    // 模型懒加载

    // this.isShowLoading = true;

    // 初始化模型

    this.initModel(`/static/models/Zaghetto.pcd`, "three");

  },
  methods: {

    initModel(pcdPath, domName) {

      console.log("开始初始化模型文件");

      this.elem = document.getElementById(domName);

      // 相机CanvasRenderer

      this.camera = new THREE.PerspectiveCamera(

        30, // 视野

        this.elem.clientWidth / this.elem.clientHeight, // 纵横比

        0.1, // 近平面

        1000 // 远平面

      );

      // 渲染器

      this.renderer = new THREE.WebGLRenderer({

        antialias: true,

        alpha: true

      });

      this.renderer.setClearColor(new THREE.Color(0x303030)); // 背景色

      this.renderer.setSize(this.elem.clientWidth, this.elem.clientHeight);

      this.elem.appendChild(this.renderer.domElement);

      this.scene = new THREE.Scene(); // 场景

      this.loader = new PCDLoader(); //PCD加载器

      const THIS = this;

      //第一层  捕捉报错

      try {

        //加载PCD文件

        THIS.loader.load(

          pcdPath,

          function(points) {

            // console.log(points);

            // 模型点位大小

            // points.material.size = 0.02;

            points.material.color = new THREE.Color(0x00ffff); // 模型颜色

            THIS.scene.add(points);

            // 构造盒子

            var middle = new THREE.Vector3();

            points.geometry.computeBoundingBox();

            points.geometry.boundingBox.getCenter(middle);

            points.applyMatrix4(

              new THREE.Matrix4().makeTranslation(

                -middle.x,

                -middle.y,

                -middle.z

              )

            );

            // 比例

            var largestDimension = Math.max(

              points.geometry.boundingBox.max.x,

              points.geometry.boundingBox.max.y,

              points.geometry.boundingBox.max.z

            );

            THIS.camera.position.y = largestDimension * 1;

            THIS.animate();

            THIS.controls = new OrbitControls(

              THIS.camera,

              THIS.renderer.domElement

            );

            THIS.controls.addEventListener("change", THIS.animate); // 监听鼠标、键盘事件  放大缩小等

            // THIS.isShowLoading = false;

          },

          function(xhr) {

            // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");

          },

          //第二层 捕捉报错

          function(error) {

            // THIS.isShowLoading = false;

            THIS.$Message.error("模型地址不对，请稍候再试！");

          }

        );

      } catch (error) {

        // THIS.isShowLoading = false;

        THIS.$Message.error("模型地址不对，请稍候再试！");

      }

    },
    
    // 监听鼠标、键盘事件  放大缩小等

    animate() {

      this.animationId = requestAnimationFrame(this.animate);

      //.getDelta()方法获得两帧的时间间隔

      var T = clock.getDelta();

      timeS = timeS + T;

      // requestAnimationFrame默认调用render函数60次，通过时间判断，降低renderer.render执行频率

      if (timeS > renderT) {

        // 控制台查看渲染器渲染方法的调用周期，也就是间隔时间是多少

        // console.log(`调用.render时间间隔`, timeS * 1000 + "毫秒");

        this.renderer.render(this.scene, this.camera); //执行渲染操作

        //renderer.render每执行一次，timeS置0

        timeS = 0;

      }

    },

    // 销毁模型

    destroyModel() {

      console.log("销毁模型");

      clearTimeout();

      try {

        this.scene.clear();

        this.renderer.dispose();

        this.renderer.forceContextLoss();

        this.renderer.content = null;

        cancelAnimationFrame(this.animationId); // 去除animationFrame

        const gl = this.renderer.domElement.getContext("webgl");

        gl && gl.getExtension("WEBGL_lose_context").loseContext();

        console.log("销毁成功");

      } catch (e) {

        console.log(e);

        console.log("销毁失败");

      }

    }

  }

};

</script>
<!-- 如没有引入less,可以删除 -->
<style lang="less" scoped>

// iView 的加载样式，如不需要可删除

.demo-spin-container {

  display: inline-block;

  width: 100%;

  height: 100%;

  position: relative;

  border: 1px solid #eee;

}

.demo-spin-icon-load {

  animation: ani-demo-spin 1s linear infinite;

}

@keyframes ani-demo-spin {

  from {

    transform: rotate(0deg);

  }
  50% {

    transform: rotate(180deg);

  }

  to {

    transform: rotate(360deg);

  }

}

</style>

引用

Three.js中文网 www.webgl3d.cn/

GitHub上的Three.js github.com/mrdoob/thre…

3D模型文件下载，既有免费的也有收费的，加载较慢 free3d.com/