利用three.js在Vue项目中展示重构的stl模型文件

一、目的

   为了在前端页面展示3d打印机打印过程

二、前期准备

完整模型的stl文件和模型切割成的n个stl文件

models文件夹下的文件就是切割后的stl文件

三、代码

<template><div ref="threeContainer" class="three-container"></div></template><script>import * as THREE from "three";import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";export default {name: "CastleDemo",mounted() {this.initThree();},methods: {initThree() {const scene = new THREE.Scene();scene.background = new THREE.Color(0xeeeeee);const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);camera.position.set(0, 20, 50); // 调整相机位置,使其离模型更远camera.lookAt(scene.position);const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);this.$refs.threeContainer.appendChild(renderer.domElement);const ambientLight = new THREE.AmbientLight(0x404040, 1);const pointLight = new THREE.PointLight(0xffffff, 1, 1000);pointLight.position.set(0, 50, 50);scene.add(ambientLight, pointLight);const loader = new STLLoader();const models = this.generateModels(); // 生成47个模型的配置// 状态变量:控制是否开始旋转let allModelsLoaded = false;// 逐层加载模型let currentModelIndex = 0;const loadNextModel = () => {if (currentModelIndex < models.length) {const model = models[currentModelIndex];loader.load(model.url, (geometry) => {geometry.center();const material = new THREE.MeshStandardMaterial({color: model.color,transparent: true, // 启用透明度opacity: 0.8, // 设置透明度值});const mesh = new THREE.Mesh(geometry, material);mesh.position.set(...model.position);mesh.scale.set(model.scale, model.scale, model.scale);scene.add(mesh);// 动态更新进度currentModelIndex++;loadNextModel();});} else {// 所有模型加载完成allModelsLoaded = true;}};loadNextModel(); // 开始加载第一个模型// 添加轨道控制器const controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true; // 启用阻尼效果controls.dampingFactor = 0.25; // 阻尼系数controls.enableZoom = true; // 允许缩放controls.enablePan = true; // 允许平移// 添加旋转逻辑let rotationSpeed = 0.01; // 旋转速度function animate() {requestAnimationFrame(animate);// 只有在所有模型加载完成后才开始旋转if (allModelsLoaded) {scene.traverse((object) => {if (object.isMesh) {object.rotation.y += rotationSpeed; // 绕Y轴旋转object.rotation.x += rotationSpeed * 0.5; // 绕X轴旋转}});}controls.update(); // 更新轨道控制器renderer.render(scene, camera);}animate();},// 生成47个模型的配置generateModels() {const models = [];const basePosition = [0, -36.5, 0]; // 基础位置,从底部开始const spacing = 0.5; // 模型之间的间距for (let i = 0; i < 72; i++) { const position = [basePosition[0], // X轴位置basePosition[1] + i * spacing, // Y轴方向排列,从低到高basePosition[2],];const color = this.getColorByIndex(i); // 根据索引计算颜色models.push({url: `/3Dmodels/castledemo/models/part_${String(i).padStart(6, "0")}.stl`, // 文件名格式为 part_000000.stl 到 part_000046.stlposition,scale: 0.3,color,});}return models;},// 根据索引计算颜色getColorByIndex(index) {const startColor = 0xffff00; // 起始颜色为黄色const endColor = 0x00ffff; // 结束颜色为青色const colorRange = endColor - startColor;const ratio = index / (47 - 1); // 计算颜色比例const color = startColor + Math.floor(colorRange * ratio);return color;},},};</script><style scoped>.three-container {background-color: #ffffff;}</style>

四、最终效果

五、问题

模型重构出来会存在走位的情况,可能需要根据每个模型文件的实际大小进行调整。

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

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

相关文章

【Eureka 缓存机制】

今天简单介绍一下Eureka server 的缓存机制吧✌️✌️✌️ 一、先来个小剧场&#xff1a;服务发现的"拖延症" 想象你是个外卖小哥&#xff08;客户端&#xff09;&#xff0c;每次接单都要打电话问调度中心&#xff08;Eureka Server&#xff09;&#xff1a;“现在…

Python--内置模块和开发规范(下)

2. 开发规范 2.1 单文件应用 文件结构示例 # 文件注释 import os import jsonDB_PATH "data.json" # 常量放顶部def load_data():"""函数注释&#xff1a;加载数据"""if os.path.exists(DB_PATH):with open(DB_PATH, "r"…

go设计模式

刘&#xff1a;https://www.bilibili.com/video/BV1kG411g7h4 https://www.bilibili.com/video/BV1jyreYKE8z 1. 单例模式 2. 简单工厂模式 代码逻辑&#xff1a; 原始&#xff1a;业务逻辑层 —> 基础类模块工厂&#xff1a;业务逻辑层 —> 工厂模块 —> 基础类模块…

搭建数字化生态平台公司:痛点与蚓链解决方案

在数字技术突飞猛进的当下&#xff0c;数字化生态平台成为众多企业实现创新发展、拓展业务版图的 “秘密工具”。今天&#xff0c;咱们就一起来聊聊搭建这类平台的公司&#xff0c;看看它们有啥独特之处&#xff0c;又面临哪些难题。 一、面临的痛点 &#xff08;一&#xff0…

标记符号“<”和“>”符号被称为“尖括号”或“角括号”

你提到的“<”和“>”符号被称为“尖括号”或“角括号”。它们常用于编程语言中表示类型参数&#xff08;如泛型&#xff09;、HTML标签&#xff08;如<div>&#xff09;、数学中的不等式&#xff08;如< 5&#xff09;等。 好的&#xff0c;我来用通俗的方式解…

云平台DeepSeek满血版:引领AI推理革新,开启智慧新时代

引言&#xff1a;人工智能的未来——云平台的卓越突破 在当今科技飞速发展的时代&#xff0c;人工智能&#xff08;AI&#xff09;技术正深刻地改变着我们生活与工作方式的方方面面。作为AI领域的创新者与领航者&#xff0c;云平台始终走在技术前沿&#xff0c;凭借无穷的热情…

自然语言处理:文本规范化

介绍 大家好&#xff01;很高兴又能在这儿和大家分享自然语言处理相关的知识了。在上一篇发布于自然语言处理&#xff1a;初识自然语言处理-CSDN博客为大家初步介绍了自然语言处理的基本概念。而这次&#xff0c;我将进一步深入这个领域&#xff0c;和大家聊聊自然语言处理中一…

HTTP非流式请求 vs HTTP流式请求

文章目录 HTTP 非流式请求 vs 流式请求一、核心区别 服务端代码示例&#xff08;Node.js/Express&#xff09;非流式请求处理流式请求处理 客户端请求示例非流式请求&#xff08;浏览器fetch&#xff09;流式请求处理&#xff08;浏览器fetch&#xff09; Python客户端示例&…

C语言机试编程题

编写版本&#xff1a;vc2022 1.求最大/小值 #include<stdio.h> int main(){int a[50],n;int max, min;printf("请输入您要输入几个数");scanf_s("%d", &n);printf("请输入您要比较的%d个数\n",n);for (int i 0; i<n; i) {scanf_…

c++ 多个.cpp文件运行

目录 方法 1&#xff1a;将其他文件中的 main 改为普通函数 方法 2&#xff1a;使用头文件组织代码 方法 3&#xff1a;条件编译&#xff08;仅用于调试或特殊需求&#xff09; 方法 4&#xff1a;创建类或命名空间管理逻辑 在一个C项目中&#xff0c;多个.cpp文件不能同…

基于OFDR的层压陆相页岩油储层中非对称裂缝群传播的分布式光纤监测

关键词&#xff1a;OFDR、分布式光纤传感、裂缝传播 一. 概述 四川盆地凉高山组优质页岩油储层存在复杂的垂直重叠岩性&#xff0c;大陆页岩油储层存在发育层理&#xff0c;薄层和天然裂缝&#xff0c;对水平井多级压裂技术的裂缝网络形态控制和监测构成挑战。本研究提出了一…

UniApp 按钮组件 open-type 属性详解:功能、场景与平台差异

文章目录 引言一、open-type 基础概念1.1 核心作用1.2 通用使用模板 二、主流 open-type 值详解2.1 contact - 客服会话功能说明平台支持代码示例 2.2 share - 内容转发功能说明平台支持注意事项 2.3 getUserInfo - 获取用户信息功能说明平台支持代码示例 2.4 getPhoneNumber -…

【大模型】Ubuntu下 fastgpt 的部署和使用

前言 本次安装的版本为 fastgpt:v4.8.8-fix2。 最新版本fastgpt:v4.8.20-fix2 问答时报错&#xff0c;本着跑通先使用起来&#xff0c;就没有死磕下去&#xff0c;后面bug解了再进行记录。   github连接&#xff1a;https://github.com/labring/FastGPT fastgpt 安装说明&…

【GenBI实战】python脚本实现基于DeepSeek api的数据查询和图表可视化

写在前面 生成式 BI (GenBI) 正在改变我们与数据交互的方式。它允许用户使用自然语言提出问题&#xff0c;并自动获得数据洞察&#xff0c;而无需编写复杂的 SQL 查询或手动创建图表。本文将带你动手实战&#xff0c;使用 Python 和 DeepSeek API (或其他类似的大语言模型 API…

Web-to-Web和Server-to-Serve归因方法

Web2Web 和 S2S 归因方法 1. Web2Web 归因方法 原理&#xff1a; Web2Web&#xff08;Web-to-Web&#xff09;归因方法主要用于跟踪用户在网站之间的行为路径。它通过浏览器中的Cookie或其他标识符来追踪用户在不同网站之间的行为&#xff0c;从而确定用户转化的路径。 使用…

c++中迭代器和指针有什么区别?

在 C 中&#xff0c;迭代器和指针虽然在某些场景下有相似的行为&#xff0c;但它们在设计目的、功能和使用场景上有本质区别。以下是详细对比和最佳实践&#xff1a; 一、核心区别对比表 特征指针迭代器本质原生数据类型&#xff0c;直接存储内存地址类对象&#xff0c;抽象容…

如何使用Docker搭建哪吒监控面板程序

哪吒监控(Nezha Monitoring)是一款自托管、轻量级的服务器和网站监控及运维工具,旨在为用户提供实时性能监控、故障告警及自动化运维能力。 文档地址:https://nezha.wiki/ 本章教程,使用Docker方式安装哪吒监控面板,在此之前,你需要提前安装好Docker. 我当前使用的操作系…

ONLYOFFICE + Ollama,本地AI模型的高效集成方案

这篇文章将继续探讨如何在 ONLYOFFICE 中连接并高效使用各类 AI 模型。今天的主角是 Ollama——一个专为本地部署和运行 AI 模型的平台。如何使用 Ollama 并与 ONLYOFFICE 编辑器集成&#xff0c;利用其强大的 AI 模型处理文本任务。以下是详细的操作步骤和使用方法。 关于 ONL…

单片机开发为什么不用C++?

最近受到很多初学者的灵魂拷问&#xff0c;单片机需要学C吗&#xff1f; 还别说&#xff0c;问这问题的还挺多的&#xff0c;今天以一篇文章来说下。 很多小白觉得&#xff0c;C语言这老古董&#xff0c;语法简陋得像石器时代的产物&#xff0c;为什么还牢牢霸占着单片机开发的…

2025-02-28 学习记录--C/C++-C语言 scanf 中,%s 不需要加

合抱之木&#xff0c;生于毫末&#xff1b;九层之台&#xff0c;起于累土&#xff1b;千里之行&#xff0c;始于足下。&#x1f4aa;&#x1f3fb; C语言 scanf 中&#xff0c;%s 不需要加 & 格式化符号变量类型是否需要加 &原因%s字符数组不需要数组名本身就是指针&a…