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

  • 记录–Three.js的简单使用,Three.js在vue3.x中导入.pcd三维模型文件已关闭评论
  • 158 次浏览
  • A+
所属分类:Web前端
摘要

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


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

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

本文说明

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

模型显示

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

项目实现

第一步

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

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

第二步

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

参考:

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

www.cnblogs.com/chenyingyin…

vuecli3 如何使用babel

www.csdn.net/tags/MtTaMg…

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

vue create vue3-test

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

第三步

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

npm install [email protected]  npm install three-orbit-controls  npm i --save three-css2drender

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

npm install --save [email protected] 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

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

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