记录--Three.js的简单使用，Three.js在vue3.x中导入.pcd三维模型文件

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

本文说明

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

模型显示

项目实现

第一步

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

第二步

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

参考：

vue安装babel-polyfill插件，解决低版本浏览器不支持ES6新语法的问题

www.cnblogs.com/chenyingyin…

vuecli3 如何使用babel

www.csdn.net/tags/MtTaMg…

好像也可以在创建项目的时候，安装Babel

vue create vue3-test

第三步

需要在vue3.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%">
 
    <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,
 
      elem: null,
 
      scene: null,
 
      // mesh: null, //网格模型对象
 
      camera: null, //相机对象
 
      renderer: null, //渲染器对象
 
      loader: null,
 
      controls: null,
      
      publicPath: process.env.BASE_URL // public
 
    };
 
  },
 
  beforeDestroy() {
 
    this.destroyModel();
 
  },
 
  created() {},
 
  mounted() {
 
    // 初始化模型
    
    this.initModel(`${this.publicPath}static/models/pcd/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); // 监听鼠标、键盘事件  放大缩小等
 
          },
 
          function(xhr) {
 
            // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
 
          },
          //第二层 捕捉报错
          function(error) {
            THIS.$Message.error("模型地址不对，请稍候再试！");
 
          }
 
        );
 
      } catch (error) {
        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>
<style  scoped>
</style>

引用

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

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

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

本文转载于:

https://juejin.cn/post/7126461520417914887

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。