学习threejs，拉伸几何体THREE.TubeGeometry管道

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️拉伸几何体THREE.TubeGeometry管道概念
  • 二、🍀生成拉伸几何体THREE.TubeGeometry管道
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中实现生成拉伸几何体THREE.TubeGeometry管道，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️拉伸几何体THREE.TubeGeometry管道概念

THREE.TubeGeometry 沿着一条三维的样条曲线拉伸出一根管。
创建方法：
构造函数 new THREE.TubeGeometry(new THREE.CatmullRomCurve3(points), segments, radius, radiusSegments, closed)
参数说明
path：该属性用一个 THREE.SplineCurve3 对象来指定管道应当遵循的路径。
segments：该属性指定构建这个管所用的分段数。默认值为 64.路径越长，指定的分段数应该越多。
radius：该属性指定管的半径。默认值为 1.
radiusSegments：该属性指定管道圆周的分段数。默认值为 8，分段数越多，管道看上去越圆。
closed：如果该属性设置为 true，管道的头和尾会连起来，默认值为 false。

二、🍀生成拉伸几何体THREE.TubeGeometry管道

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机，定义相机位置 camera.position.set
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.DirectionalLight平行光源，设置平行光源位置，scene添加平行光源。
  • 5、加载几何模型：生成管道路径THREE.CatmullRomCurve3，并设置segments、radius、radiusSegments、closed参数生成THREE.TubeGeometry管道，创建THREE.MeshBasicMaterial基本材质，生成mesh物体，scene场景加入mesh。
  • 6、加入controls、gui控制，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn24(拉伸几何体THREE.TubeGeometry管道)</title><script src="lib/threejs/127/three.js-master/build/three.js"></script><script src="lib/threejs/127/three.js-master/examples/js/utils/SceneUtils.js"></script><script src="lib/threejs/127/three.js-master/examples/js/geometries/ConvexGeometry.js"></script><script src="lib/threejs/127/three.js-master/examples/js/math/ConvexHull.js"></script><script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
</head>
<style>body {margin: 0;}canvas {width: 100%;height: 100%;display: block;}
</style>
<body onload="draw()"></body>
<script>var renderervar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)}var cameravar initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000)camera.position.set(0, 0, 100)}var scenevar initScene = () => {scene = new THREE.Scene()}var lightvar initLight = () => {scene.add(new THREE.AmbientLight(0x404040))light = new THREE.DirectionalLight(0xffffff)light.position.set(1, 1, 1)scene.add(light)}// var initModel = () => {//   var shape = new THREE.ShapeGeometry()// }var statsvar initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var controlsvar initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping = true}var gui, spGroup, tubeMeshvar initGui = () => {gui = {numberOfPoints: 5,segments: 64,radius: 1,radiusSegments: 8,closed: false,points: [],newPoints: function () {//生成一些随机点放置到数组当中var points = []for (var i = 0; i < gui.numberOfPoints; i++) {var randomX = -20 + Math.round(Math.random() * 50)var randomY = -15 + Math.round(Math.random() * 40)var randomZ = -20 + Math.round(Math.random() * 40)points.push(new THREE.Vector3(randomX, randomY, randomZ))}gui.points = pointsgui.redraw()},redraw: function () {//清楚掉场景中原来的模型对象scene.remove(spGroup)scene.remove(tubeMesh)//重新绘制模型generatePoints(gui.points, gui.segments, gui.radius, gui.radiusSegments, gui.closed)}}var datGui = new dat.GUI()//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）datGui.add(gui, 'newPoints')datGui.add(gui, 'numberOfPoints', 2, 15).step(1).onChange(gui.newPoints)datGui.add(gui, 'segments', 0, 200).step(1).onChange(gui.redraw)datGui.add(gui, 'radius', 0, 10).onChange(gui.redraw)datGui.add(gui, 'radiusSegments', 0, 100).step(1).onChange(gui.redraw)datGui.add(gui, 'closed').onChange(gui.redraw)gui.newPoints()}var generatePoints = (points, segments, radius, radiusSegments, closed) => {spGroup = new THREE.Object3D()var material = new THREE.MeshBasicMaterial({color: 0xff0000, transparent: false})points.forEach(point => {var spGeom = new THREE.SphereGeometry(0.2)var spMesh = new THREE.Mesh(spGeom, material)spMesh.position.copy(point)spGroup.add(spMesh)})scene.add(spGroup)var tubeGeometry = new THREE.TubeGeometry(new THREE.CatmullRomCurve3(points), segments, radius, radiusSegments, closed)tubeMesh = createMesh(tubeGeometry)scene.add(tubeMesh)}var createMesh = (geom) => {var meshMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00, transparent: true, opacity: 0.3})var wireFrameMat = new THREE.MeshBasicMaterial()wireFrameMat.wireframe = truevar mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat])return mesh}var render = () => {renderer.render(scene, camera)}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()render()renderer.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()controls.update()requestAnimationFrame(animate)}var draw = () => {initRender()initScene()initCamera()initLight()initControls()initStats()initGui()animate()window.onresize = onWindowResize}
</script>
</html>

效果如下：
在这里插入图片描述

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

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

相关文章

Git的原理和使用（六）

Git的原理和使用（六）

本文主要讲解企业级开发模型 1. 引入 交付软件的流程&#xff1a;开发->测试->发布上线 上面三个过程可以详细划分为一下过程&#xff1a;规划、编码、构建、测试、发 布、部署和维护 最初&#xff0c;程序⽐较简单&#xff0c;⼯作量不⼤&#xff0c;程序员⼀个⼈可以完…
阅读更多...
Imagic: Text-Based Real Image Editing with Diffusion Models

Imagic: Text-Based Real Image Editing with Diffusion Models

https://openaccess.thecvf.com/content/CVPR2023/papers/Kawar_Imagic_Text-Based_Real_Image_Editing_With_Diffusion_Models_CVPR_2023_paper.pdfhttps://imagic-editing.github.io/ 问题引入 针对的是text based image editing问题&#xff0c;可以解决non rigid edit&am…
阅读更多...
【软件安装与配置】 vue

【软件安装与配置】 vue

1. 安装 Node.js Vue.js 项目通常依赖于 Node.js 环境来进行开发&#xff0c;可以从 Node.js 官方网站 下载并安装稳定版本。安装 Node.js 后&#xff0c;npm&#xff08;Node 包管理器&#xff09;也会自动安装。 2. 使用 Vue CLI 安装 Vue.js Vue CLI 是一个用于快速搭建 Vu…
阅读更多...
柔性数组的使用

柔性数组的使用

//柔性数组的使用 #include<stdio.h> #include<stdlib.h> #include<errno.h> struct s {int i;int a[]; }; int main() {struct s* ps (struct s*)malloc(sizeof(struct s) 20 * sizeof(int));if (ps NULL){perror("malloc");return 1;}//使用这…
阅读更多...
用.NET开发跨平台应用程序采用 Avalonia 与MAUI如何选择

用.NET开发跨平台应用程序采用 Avalonia 与MAUI如何选择

Avalonia是一个强大的框架&#xff0c;使开发人员能够使用.NET创建跨平台应用程序。它使用自己的渲染引擎绘制UI控件&#xff0c;确保在Windows、macOS、Linux、Android、iOS和WebAssembly等不同平台上具有一致的外观和行为。这意味着开发人员可以共享他们的UI代码&#xff0c;…
阅读更多...
容灾与云计算概念

容灾与云计算概念

​​​​​​基础知识容灾备份——备份技术系统架构与备份网络方案-CSDN博客 SAN&#xff0c;是storage area network的简称&#xff0c;翻译过来就是存储区域网络。 顾名思义&#xff0c;SAN首先是一个网络&#xff0c;其次它是关于存储的&#xff0c;区域则是指服务器和存储资…
阅读更多...
iTOP-RK3568开发板独立NPU通过算法加特应用到以下的场景

iTOP-RK3568开发板独立NPU通过算法加特应用到以下的场景

iTOP-3568开发板采用瑞芯微RK3568处理器&#xff0c;内部集成了四核64位Cortex-A55处理器。主频高达2.0Ghz&#xff0c;RK809动态调频。集成了双核心架构GPU&#xff0c;ARM G52 2EE、支持OpenGLES1.1/2.0/3.2、OpenCL2.0、Vulkan1.1、内嵌高性能2D加速硬件。 内置独立NPU,算力…
阅读更多...
出血性脑卒中临床智能诊疗建模

出血性脑卒中临床智能诊疗建模

出血性脑卒中是一种常见但危险的脑血管疾病&#xff0c;其治疗和管理需要及时而准确的诊断以及有效的预测模型。本研究旨在通过分析入院患者的临床数据和影像学特征&#xff0c;建立数学模型&#xff0c;评估患者的血肿扩张风险、血肿周围水肿进展以及长期预后。 针对问题一&a…
阅读更多...
15分钟学Go 第8天：控制结构 - 循环

15分钟学Go 第8天：控制结构 - 循环

第8天&#xff1a;控制结构 - 循环 在Go语言中&#xff0c;循环是一种基本的控制结构&#xff0c;用于重复执行一段代码。今天我们将深入了解Go语言中的for循环&#xff0c;包括它的各种用法、语法结构、以及如何在实践中有效地应用循环。 1. for 循环的基本概念 for循环是G…
阅读更多...
应对 .DevicData-X-XXXXXXXX 勒索病毒：防御与恢复策略

应对 .DevicData-X-XXXXXXXX 勒索病毒：防御与恢复策略

引言 随着信息技术的快速发展&#xff0c;网络安全问题愈发严峻。勒索病毒作为一种恶性网络攻击手段&#xff0c;已成为企业和个人面临的重大威胁之一。尤其是 .DevicData-X-XXXXXXXX 勒索病毒&#xff0c;其通过加密用户数据并勒索赎金&#xff0c;给受害者带来了巨大的经济损…
阅读更多...
在Xshell中查看日志文件详情

在Xshell中查看日志文件详情

学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把手教你开发炫酷的vbs脚本制作(完善中……&#xff09; 4、牛逼哄哄的 IDEA编程利器技巧(编写中……&#xff09; 5、面经吐血整理的 面试技…
阅读更多...
子比主题美化 – 评论区添加随机夸夸功能（修复api）

子比主题美化 – 评论区添加随机夸夸功能（修复api）

简介 有很多人在网站浏览需要回复&#xff0c;有的比较嫌麻烦不愿意打字&#xff0c;也会收到一些各种评论相对比较杂乱&#xff0c;今天分享一个用夸夸功能&#xff0c;来替代传统的评论一言&#xff0c;将它们分开使用&#xff0c;先看看效果图&#xff0c;再考虑使用不使用…
阅读更多...
基于SpringBoot+Vue+uniapp微信小程序的教学质量评价系统的详细设计和实现

基于SpringBoot+Vue+uniapp微信小程序的教学质量评价系统的详细设计和实现

项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…
阅读更多...
一文详解“位运算“在算法中的应用

一文详解“位运算“在算法中的应用

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a; 优选算法专题 目录 位运算的相关介绍&#xff08;重要&#xff09; 136. 只出现一次的数字 191.位1的个数 461. 汉明距离 260. 只出现一…
阅读更多...
导数的概念及在模型算法中的应用

导数的概念及在模型算法中的应用

一. 导数概念与计算 1. 导数的物理意义&#xff1a; 瞬时速率。一般的&#xff0c;函数yf(x)在x处的瞬时变化率是 2. 导数的几何意义&#xff1a; 曲线的切线&#xff0c;当点趋近于P时&#xff0c;直线 PT 与曲线相切。容易知道&#xff0c;割线的斜率是当点趋近于 P 时&…
阅读更多...
QT 实现按钮多样化

QT 实现按钮多样化

1.界面实现效果 以下是具体的项目需要用到的效果展示，可以根据需要，实例化想要的按钮。 2.简介 原理：使用Qt的QPropertyAnimation动画类，这里简单来说就是切换两个按钮样式。 请看以下结构体： #define MAX_LINE_COUNT 3struct PurelinStatus {QSizeF bgSize
阅读更多...
ABAQUS应用13——大量INP文件的自动提交

ABAQUS应用13——大量INP文件的自动提交

文章目录 0、背景1、正文 0、背景 ABAQUS自动批量提交INP文件。原文来自曹老师公众号&#xff0c;感兴趣的可以点击这里。 为了防止遗失&#xff0c;我还是先保存比较好。 1、正文 分析需要对大量 INP 文件进行提交分析&#xff0c;在 Abaqus / CAE 中手动操作无法完成&…
阅读更多...
十四、MySQL事务日志

十四、MySQL事务日志

文章目录 1. redo日志1.1 为什么需要REDO日志1.2 REDO日志的好处、特点1.2.1 好处1.2.2 特点1.3 redo的组成1.4 redo的整体流程1.5 redo log 的刷盘策略1.6 不同刷盘策略演示1.7 写入redo log buffer 过程1.7.1 补充概念：Mini-Transaction1.7.2 redo 日志写入log buffer1.7.3 …
阅读更多...
量子门电路开销——T门、clifford门、toffoli门、fredkin门

量子门电路开销——T门、clifford门、toffoli门、fredkin门

在量子计算中&#xff0c;T门的成本比Clifford门高出很多倍的原因与量子计算中纠错的实现、物理门操作的复杂性以及容错量子计算架构中的成本评估有关。以下是几个关键原因&#xff0c;解释了为什么 T 门的成本在量子计算中远远高于 Clifford 门&#xff1a; 1. T 门和 Cliffo…
阅读更多...
飞凌嵌入式FET527N-C核心板已适配OpenHarmony4.1

飞凌嵌入式FET527N-C核心板已适配OpenHarmony4.1

近期&#xff0c;飞凌嵌入式为FET527N-C核心板适配了OpenHarmony4.1系统——进一步提升了核心板的兼容性、稳定性和安全性。 OpenHarmony4.1在应用开发方面展现了全新的开放能力&#xff0c;以更加清晰的逻辑和场景化视角提供给开发者丰富的API接口&#xff0c;应用开发能力得…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023