VUE3使用three.js显示3D模型

   使用3D模型作为自动化系统的界面已经成为潮流。尽管在AutomationML 中推荐COLLADA作为 3D 模型的标准。但是COLLADA的开发者khronos 集团却已经开发了COLLADA的后继者glTF 。glTF 2.0已经成为国际标准ISO/IEC 12113:2022。

      Khronos声称-‘glTF是3D里的JPEG’。目前看来glTF 更加流行。

glTF 概述

glTF 的工业中的应用

CAD 软件的支持

solidworks 2020版 开始支持glTF 的导出。

3D 查看器

windows 上有一个3D查看器,可以显示导出的glTF 3D模型

支持glTF 的3D软件

SketchUp

SketchUp,民间俗称“草图大师”,是全世界极受欢迎的三维建模与设计软件,在全球拥有4千万年度用户。SketchUp在建筑设计、家具设计、展陈设计、电影美术、舞台美术、产品设计、工程设计等领域有广泛的应用。SketchUp由于其简单、易学、灵活等特点,是目前新兴的原生的BIM正向设计工具,尤其在室内装饰、以及其它应用领域。

Blender

   Blender 是一款永久开源免费的 3D 创作软件,支持整个 3D 创作流程:建模、雕刻、骨骼装配、动画、模拟、实时渲染、合成和运动跟踪,甚至可用作视频编辑及游戏创建。

Web 前端的支持

Web 前端有一个功能强大的3D 开源库Three.js 支持glTF 的导入。Three.JS 的背后是webGL 技术

   WebGL可以为HTML5 Canvas提供硬件3D加速渲染(部分计算GPU),它借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。WebGL的本质 - JavaScript操作OpenGL接口。

        Three.js 是一款 webGL(3D绘图标准,在此不赘述)引擎,可以运行于所有支持 webGL 的浏览器。Three.js 封装了 webGL 底层的 API ,为我们提供了高级的开发接口,可以使用简单的代码去实现 3D 渲染。

       Three.js 支持glTF 文件的导入。

VUE3+Three.js实验

Step1 安装Three.js

 npm install three --save --force

Step2 代码

首先要对下列参数初始化:

  • 相机 camera
  • 场景 scene
  • 渲染器renderer
  • 控制 controls,
  • 环境光 ambientLight,
  • 方向光 directionalLight

渲染器设置事件处理,实现点击对象的操作(OnClick)
遇到的问题

  • 物体显示不出来,主要是导入glTF 时model.scale.set(2500, 2500, 2500)缩放比例太小了
  • 物体无法通过鼠标旋转,缩放。最后发现是没有设置相机的位置。

           camera.position.set(20, 30, 20);

<script  setup>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { ref, onMounted } from "vue";
let screenDom = ref();
var camera,scene,renderer,controls,ambientLight,directionalLight
onMounted(() => {scene = new THREE.Scene();// 创建相机camera = new THREE.PerspectiveCamera(135,screenDom.value.clientWidth / screenDom.value.clientHeight,0.1,100);camera.position.set(20, 30, 20); //important// 添加环境光ambientLight = new THREE.AmbientLight(0xffffff, 0.9);scene.add(ambientLight);//directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); //光源,color:灯光颜色,intensity:光照强度directionalLight.position.set(400, 200, 300);scene.add(directionalLight);// 创建渲染器renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setClearColor(new THREE.Color("#000000"));renderer.setSize(screenDom.value.clientWidth, screenDom.value.clientHeight);renderer.domElement.addEventListener("click", onClick, false);screenDom.value.appendChild(renderer.domElement);//controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.enablePan = true;controls.enableZoom = true;controls.autoRotate = true;controls.autoRotateSpeed = 9;controls.update(); //重新设置轨道,相当于刷新//添加模型const loader = new GLTFLoader();loader.load("../../../public/Glasses-v1.glb",(gltf) => {// 加载成功后的回调函数const model = gltf.scene;model.scale.set(2500, 2500, 2500); // 缩放模型const box = new THREE.Box3().setFromObject(model);const center = box.getCenter(new THREE.Vector3());let axis = new THREE.Vector3(0, 1, 0);model.rotateOnAxis(axis, Math.PI * 2);model.position.sub(center); // 将模型位置移到原点处scene.add(model);},(xhr) => {// 加载过程中的回调函数console.log((xhr.loaded / xhr.total) * 100 + "% loaded");},(error) => {// 加载失败的回调函数console.error("Failed to load model", error);});// 渲染场景const render = () => {renderer.render(scene, camera);controls.update();requestAnimationFrame(render);};render();
});
function onClick() {event.preventDefault();const mouse = new THREE.Vector2();const rect = screenDom.value.getBoundingClientRect()mouse.x = ((event.clientX+rect.left) / window.innerWidth) * 2 - 1;mouse.y = -((event.clientY+rect.top)/ window.innerHeight) * 2 + 1;console.log("x:"+mouse.x,"y:"+mouse.y);const raycaster = new THREE.Raycaster();raycaster.setFromCamera(mouse, camera);var intersects = raycaster.intersectObjects(scene.children); //arrayif (intersects.length > 0) {var selectedObject = intersects[0];alert(selectedObject.object.name);}
}
</script>
<template><div class="container"><h2>3D 模型</h2><div class="canvas-container" ref="screenDom"></div></div>
</template>
<style scoped>
.canvas-container {width: 800px;height: 400px;
}
body {overflow: hidden;margin: 0px;
}
</style>

最终的界面

小结

        开放自动化是一个热门话题,笔者常常想,开放自动化系统的本质是什么?我认为它们本质是使用公共技术实现的系统。其中包括协议,模型的格式和设计工具。并不一定拘泥于某一种单一的技术或者标准,在AI 时代更是如此,只要是公开的技术就能够转换。大胆地使用IT的新技术,解决自动化行业的问题是当下最重要的。

   

    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/700211.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

问题慢慢解决-通过android emulator调试android kernel-内核条件断点遇到的问题和临时解决方案

起因 在摸索到这个方案之后&#xff0c;mac m1调试aarch64 android kernel最终方案&#xff0c;就准备调试内核了&#xff0c;预备下断点的地方是 b binder_poll b ep_ptable_queue_proc b remove_wait_queue但是由于是android系统&#xff0c;上面三个函数会被频繁的触发&am…

ElementUI table表格组件实现双击编辑单元格失去焦点还原,支持多单元格

在使用ElementUI table表格组件时有时需要双击单元格显示编辑状态&#xff0c;失去焦点时还原表格显示。 实现思路&#xff1a; 在数据中增加isFocus:false.控制是否显示在table中用cell-dblclick双击方法 先看效果&#xff1a; 上源码&#xff1a;在表格模板中用scope.row…

springboot集成mqtt

文章目录 前言一、MQTT是什么&#xff1f;二、继承步骤1.安装MQTT2.创建项目&#xff0c;引入依赖3. 对应步骤2的代码3 测试 总结mqtt 启动后访问地址 前言 随着物联网的火热,MQTT的应用逐渐增多 曾经也有幸使用过mqtt,今天正好总结下MQTT的使用; 一、MQTT是什么&#xff1f;…

从扩散模型基础到DIT

Diffusion model 扩散模型如何工作&#xff1f; 输入随机噪声和文本内容&#xff0c;通过多次预测并去除图片中的噪声后&#xff0c;最终生成清晰的图像。 以上左边这张图&#xff0c;刚开始是随机噪声&#xff0c;999为时间序列。 为什么不直接预测下一张图片呢&#xff1f;…

springboot+vue的宠物咖啡馆平台(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

【深度学习笔记】3_4 逻辑回归之softmax-regression

3.4 softmax回归 Softmax回归&#xff08;Softmax Regression&#xff09;&#xff0c;也称为多类逻辑回归&#xff08;Multinomial Logistic Regression&#xff09;&#xff0c;是一种用于多分类问题的分类算法。虽然名字里面带回归&#xff0c;实际上是分类。 前几节介绍的…

Rust之构建命令行程序(四):用TDD(测试-驱动-开发)模式来开发库的功能

开发环境 Windows 11Rust 1.75.0 VS Code 1.86.2 项目工程 这次创建了新的工程minigrep. 用测试-驱动模式来开发库的功能 既然我们已经将逻辑提取到src/lib.rs中&#xff0c;并将参数收集和错误处理留在src/main.rs中&#xff0c;那么为代码的核心功能编写测试就容易多了。我…

【MATLAB源码-第146期】基于matlab的信源编码仿真GUI,对比霍夫曼编码,算术编码和LZ编码。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 霍夫曼编码、算术编码和LZ编码是三种广泛应用于数据压缩领域的编码技术。它们各自拥有独特的设计哲学、实现方式和适用场景&#xff0c;因此在压缩效率、编解码速度和内存使用等方面表现出不同的特点。接下来详细描述这三种编…

【大厂AI课学习笔记】【2.2机器学习开发任务实例】(7)特征构造

特征分析之后&#xff0c;就是特征构造。 特征构造第一步 特征构造往往要进行数据的归一化。 在本案例中&#xff0c;我们将所有的数据&#xff0c;将所有特征区间调整为0~1之间。 如上图。 那么&#xff0c;为什么要进行归一化&#xff0c;又如何将数据&#xff0c;调整为…

QtCreator“设计”按钮灰色无法点击,如何解决

Mac中安装QML Designer插件&#xff1a; 首选项-> 关于插件 -> 勾选QT Quick下的QML Designer 点击确定安装插件&#xff0c;重启Qt Creator后生效

【Langchain多Agent实践】一个有推销功能的旅游聊天机器人

【LangchainStreamlit】旅游聊天机器人_langchain streamlit-CSDN博客 视频讲解地址&#xff1a;【Langchain Agent】带推销功能的旅游聊天机器人_哔哩哔哩_bilibili 体验地址&#xff1a; http://101.33.225.241:8503/ github地址&#xff1a;GitHub - jerry1900/langcha…

【达梦数据库】数据库的方言问题导致的启动失败

问题场景 在项目中采用了hibernate &#xff0c;连接数据库原本为ORACLE&#xff0c;后续打算改造为国产数据库 达梦 链接配置&#xff1a; # 达梦写法&#xff0c; index:driver-class-name: dm.jdbc.driver.DmDriverjdbc-url: jdbc:dm://192.168.220.225:5236/IDX4username:…

【QT 5 +Linux下软件生成+qt软件生成使用工具+学习他人文章+第一篇:使用linuxdeployqt软件生成】

【QT 5 Linux下软件生成qt软件生成使用工具学习他人文章第一篇&#xff1a;使用linuxdeployqt软件生成】 1、前言2、实验环境3、自我学习总结-本篇总结1、新手的疑问&#xff0c;做这件事的目的2、了解工具&#xff1a;linuxdeployqt工具3、解决相关使用过程中问题 4、参照文章…

新手想要做好抖音小店,在开店前你需要知道这五点注意事项!

大家好&#xff0c;我是电商小布。 开抖店你说难吗&#xff0c;其实也不难&#xff0c;把需要的材料准备好就可以着手开店。 难的呢&#xff0c;是在小店的运营上边。 所以新手开店想要少出错&#xff0c;少踩坑&#xff0c;一定要提前把店铺的相关注意事项搞清楚。 今天&a…

将yolov8权重文件转为onnx格式并在c#中使用

yolo模型转ONNX 在yolov8中&#xff0c;我们将训练结果的.pt权重文件转换为onnx格式只需要使用ultralytics库中的YOLO类&#xff0c;使用pip安装ultralytics库&#xff0c;然后执行下面python代码 from ultralytics import YOLO# 加载YOLOv8模型 model YOLO("best.pt&q…

Selenium浏览器自动化测试框架详解

selenium简介 介绍 Selenium [1] 是一个用于Web应用程序测试的工具。Selenium测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样。支持的浏览器包括IE&#xff08;7, 8, 9, 10, 11&#xff09;&#xff0c;Mozilla Firefox&#xff0c;Safari&#xff0c;Google C…

深度学习中数据的转换

原始&#xff08;文本、音频、图像、视频、传感器等&#xff09;数据被转化成结构化且适合机器学习算法或深度学习模型使用的格式。 原始数据转化为结构化且适合机器学习和深度学习模型使用的格式&#xff0c;通常需要经历以下类型的预处理和转换&#xff1a; 文本数据&#xf…

台式电脑电源功率越大越费电吗?装机选购多少W电源

要组装一台电脑&#xff0c;我们首先需要选择硬件。 硬件搭配最关键的一点就是CPU和主板的兼容性。 硬件、电源等之间的平衡都需要仔细考虑。 那么台式电脑电源多大功率合适呢&#xff1f; 下面分享组装电脑电源瓦数选购指南&#xff0c;教您正确选择合适的电源瓦数。 让我们来…

消息中间件篇之RabbitMQ-消息不丢失

一、生产者确认机制 RabbitMQ提供了publisher confirm机制来避免消息发送到MQ过程中丢失。消息发送到MQ以后&#xff0c;会返回一个结果给发送者&#xff0c;表示消息是否处理成功。 当消息没有到交换机就失败了&#xff0c;就会返回publish-confirm。当消息没有到达MQ时&…

防御保护--VPN

目录 VPN的概述 VPN的分类 VPN的核心技术 --- 隧道技术 VPN其他常用技术 VPN的概述 VPN --- 虚拟专用网 --- 一般指依靠ISP或者其他NSP&#xff0c;也可以是企业自身&#xff0c;提供的一条虚拟网 络专线。这个虚拟的专线是逻辑上的&#xff0c;而不是物理上的&#xff0c;所…