Threejs绘制方形管道

news2024/12/24 2:37:52

        之前有用Threejs的TubeGeometry绘制管道效果,但是TubeGeometry的管道效果默认是圆形的截面,这节实现方形截面的管道绘制。

        因为Threejs不提供方形截面的管道,所以使用的是绘制截面,然后拉伸的方式,所以需要先绘制一个方形,当然在此之前还是要先创建一个场景,包括灯光,相机,渲染器等,之前章节已有过就不再贴代码了,下面先通过Shape创建一个截面

const shape = new THREE.Shape();// 创建形状
shape.moveTo(0, 0);
shape.lineTo(2, 0);
shape.lineTo(2, 2);
shape.lineTo(0, 2);
shape.lineTo(0, 0);

        然后用CatmullRomCurve3绘制出曲线,也是后面轨道的轨迹,

 const curve = new THREE.CatmullRomCurve3([
        new THREE.Vector3( -10, -50, -50 ),
        new THREE.Vector3( 10, 0, 0 ),
        new THREE.Vector3( 8, 50, 50 ),
        new THREE.Vector3( -5, 0, 100)
      ]);

通过ExtrudeGeometry拉伸的方法,将shape截面和曲线curve传入后,进行拉伸,并设置路径的精度,就可以得到一个几何体geometry,再添加一个材质,创建网格模型,添加到场景中。就可以得到下面的3D模型,

const geometry = new THREE.ExtrudeGeometry(shape,  { // 创建挤出几何体
        extrudePath:curve,//扫描轨迹
        steps:100 //沿着路径细分精度,越大越光滑
      });
 const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });// 创建材质
 const mesh = new THREE.Mesh(geometry, material); // 创建网格
this.scene.add(mesh);// 将网格添加到场景中

但是这个管道为纯色,下面给这个管道添加贴图,让他更真实,我就随便找了张图片作为贴图,代替原有的材质,完整代码如下:

initExtrudeGeometry(){  // 创建挤出几何体
      const shape = new THREE.Shape();// 创建形状
      shape.moveTo(0, 0);
      shape.lineTo(4, 0);
      shape.lineTo(4, 4);
      shape.lineTo(0, 4);
      shape.lineTo(0, 0);
      // 扫描轨迹:创建轮廓的扫描轨迹(3D样条曲线)
      const curve = new THREE.CatmullRomCurve3([
        new THREE.Vector3( -10, -50, -50 ),
        new THREE.Vector3( 10, 0, 0 ),
        new THREE.Vector3( 8, 50, 50 ),
        new THREE.Vector3( -5, 0, 100)
      ]);
      const geometry = new THREE.ExtrudeGeometry(shape,  { // 创建挤出几何体
        extrudePath:curve,//扫描轨迹
        steps:100 //沿着路径细分精度,越大越光滑
      });
      const texLoader = new THREE.TextureLoader();//纹理贴图加载器TextureLoader
      const texture = texLoader.load('/static/images/cold1.png');// .load()方法加载图像,返回一个纹理对象Texture
      const material = new THREE.MeshBasicMaterial({ // 设置纹理贴图:Texture对象作为材质map属性的属性值
        map: texture,//map表示材质的颜色贴图属性
      });
      // 设置阵列模式
      texture.wrapS = THREE.RepeatWrapping;
      texture.wrapT = THREE.RepeatWrapping;
      // uv两个方向纹理重复数量
      texture.repeat.set(0.5,0.5);//注意选择合适的阵列数量
      // const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });// 创建材质
      const mesh = new THREE.Mesh(geometry, material); // 创建网格
      this.scene.add(mesh);// 将网格添加到场景中
    },

最终的效果如下,不过贴图还是根据实际场景选择,效果会更好

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

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

相关文章

【FPGA数字信号处理】- 什么是时域

​数字信号处理的领域中,时域是我们理解和处理数字信号的关键维度之一。 时域分析能够让我们直接观察信号随时间的变化情况,为后续的信号处理和系统设计提供坚实的基础。 接下来将以通俗易懂的方式,让大家深入了解数字信号处理基础中的时域…

算法学习:一维数组的排序算法

【排序算法】八种排序算法可视化过程_哔哩哔哩_bilibili 1,冒泡排序: 冒泡排序(Bubble Sort): 冒泡排序是一种简单的排序算法,它通过重复地交换相邻的元素,直到整个序列有序。算法思路是:从第一个元素开始,依次比较相邻的两个元素,如果前者大于后者,就交…

day-41 零钱兑换

思路 动态规划的思想&#xff0c;创建一个长度为amount的数组arr&#xff0c;arr[i]表示当amounti时的最少硬币数 解题过程 arr初始化值为Integer.MAX_VALUE&#xff0c;再令arr[0]0&#xff0c;arr[coins[j]]1(0<j<coins.length),然后i从1向后遍历&#xff08;icoins[j…

DNS劫持问题

目录 DNS劫持概述 定义 图示 ​编辑图示说明 DNS劫持的原理 1. DNS请求与响应过程 图示 ​编辑2. 劫持发生点 本地劫持 路由器劫持 中间人攻击 图示 ​编辑图示说明 DNS劫持的影响 1. 对个人用户的影响 图示 ​编辑图示说明 2. 对企业的影响 图示 ​编辑图示…

2024年8月23日(docker 数据存储)

1、打包 [rootdocker1 ~]# docker save -o centos.tar centos:latest [rootdocker1 ~]# systemctl start docker [rootdocker1 ~]# docker ps -all CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES e84261634543 …

LoadBalancer负载均衡

一、概述 1.1、Ribbon目前也进入维护模式 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端负载均衡的工具。 简单的说&#xff0c;Ribbon是Netflix发布的开源项目&#xff0c;主要功能是提供客户端的软件负载均衡算法和服务调用。Ribbon客户端组件提供一系列完善的…

监控领域的物理对抗攻击综述——Physical Adversarial Attacks for Surveillance: A Survey

介绍 文章贡献 框架提出&#xff1a;提出了一个新的分析框架&#xff0c;用于理解和评估生成和设计物理对抗性攻击的方法。全面调查&#xff1a;对物理对抗性攻击在监控系统中的四个关键任务—检测、识别、跟踪和行为识别—进行了全面的调查和分析。跨领域探索&#xff1a;讨…

OpenHarmony轻量设备Hi3861芯片开发板启动流程分析

引言 OpenHarmony作为一款万物互联的操作系统&#xff0c;覆盖了从嵌入式实时物联网操作系统到移动操作系统的全覆盖&#xff0c;其中内核包括LiteOS-M,LiteOS-A和Linux。LiteOS-M内核是面向IoT领域构建的轻量级物联网操作系统内核&#xff0c;主要面向没有MMU的处理器&#x…

数据结构---顺序表---单链表

目录 一、什么是程序&#xff1f; 程序 数据结构 算法 二、一个程序释放优秀的两个标准 2.1.时间复杂度 2.2.空间复杂度 三、数据结构 3.1.数据结构间的关系 1.逻辑结构 1&#xff09;线性关系 2&#xff09;非线性关系 2.存储结构 1&#xff09;顺序存储结构 …

Python的起源与发展历程:从创意火花到全球热门编程语言

目录 创意的火花名字的由来圣诞节的礼物社区的力量今天的Python Python的起源可以追溯到1989年&#xff0c;当时荷兰计算机科学家Guido van Rossum&#xff08;吉多范罗苏姆&#xff09;在阿姆斯特丹的荷兰国家数学和计算机科学研究所&#xff08;CWI&#xff09;工作。Python的…

Android Studio 自定义字体大小

常用编程软件自定义字体大全首页 文章目录 前言具体操作1. 打开设置对话框2. 选择外观字体 前言 Android Studio 自定义字体大小&#xff0c;统一设置为 JetBrains Mono &#xff0c;大小为 14 具体操作 【File】>【Settings...】>【Appearance & Behavior】>【…

计算机视觉编程 3(图片处理)

目录 图像差分 高斯差分 形态学-物体计数 ​编辑 图片降噪 图像差分 # -*- coding: utf-8 -*- from PIL import Image from pylab import * from scipy.ndimage import filters import numpy# 添加中文字体支持 from matplotlib.font_manager import FontProperties font…

一键编辑,轻松实现废品回收小程序多平台发布

创建废品回收小程序&#xff0c;简化开发流程&#xff0c;让创意即刻上线&#xff01;借助乔拓云平台&#xff0c;只需简单几步&#xff0c;即可拥有个性化的小程序页面。 在乔拓云网站&#xff0c;登录小程序后端开始设计&#xff0c;点击“设计小程序”&#xff0c;一个直观易…

一场意外从 Android 开发岗到鸿蒙开发岗~

经历&#xff1a; 在 Android 开发领域已经耕耘了数年&#xff0c;对 Android 系统的架构、开发模式和各种技术都非常熟悉。然而&#xff0c;由于市场的变化和公司业务的调整&#xff0c;我所在的团队接到通知要逐步转向鸿蒙开发。 一开始&#xff0c;得知这个消息时我感到有些…

软件测试需要学习的知识有哪些?这些你一定没学过

1、测试基础 软件&#xff1a;控制计算机硬件工作的工具&#xff08;客户端&#xff0c;服务器&#xff0c;数据库&#xff09; 软件测试&#xff1a;使用技术手段验证软件是否满足使用需求 目的&#xff1a;减少缺陷&#xff0c;保证质量 2、测试主流技能&#xff1a; 1&…

使用DDU卸载显卡驱动并更新

使用DDU卸载显卡驱动并更新 安装环境 首先到英伟达官网去下载你想要的驱动,根据你的显卡型号选择你想要的驱动,一般都是选大版本最后几个小版本 笔记本选带后缀(Notebooks) 然后下载Display Driver Uninstaller (DDU卸载工具),保存在任意位置(一般在c盘下) 卸载驱动 安全模…

【Qt】容器类控件GroupBox

容器类控件GroupBox 使用QGroupBox实现一个带有标题的分组框&#xff0c;可以把其他的控件放在里面里面作为一组&#xff0c;这些内部的控件的父元素也就不是this了。 其目的只是为了让界面看起来更加好看&#xff0c;例如当一个界面比较复杂的时候&#xff0c;包含了很多的控…

python Pillow 把一个图片复制3次

1. 先看效果 输入图片 输出图片 输入图片 输出图片 代码 来源: kimi , https://kimi.moonshot.cn/chat/cr6ug39mqu053qm0sfsg from PIL import Image import os# 对于一个 1365*2048 的图片&#xff0c;进行复制3次 def duplicate_and_combine_horizontally(image_path):# …

Java进阶13讲__第五讲

JDK8新特性-Lambda 1.认识Lambda 2.Lambda表达式的省略写法 进一步简化Lambda表达式的写法 package cn.hdc.oop5.lambda;import java.util.Arrays; import java.util.Comparator;public class Test2 {public static void main(String[] args) {double[] price {99.8, 128, 1…

Python 从入门到实战2(实例1:计算圆的面积)

我们的目标是&#xff1a;通过这一套资料学习下来&#xff0c;通过熟练掌握python基础&#xff0c;然后结合经典实例、实践相结合&#xff0c;使我们完全掌握python&#xff0c;并做到独立完成项目开发的能力。 看视频太慢&#xff0c;一起照着来练习吧&#xff01;今天我们通过…