threejs进阶，管道几何体高级应用，geometry几何体应用，可拖拽改变形状的管道

最新推荐文章于 2024-05-03 13:22:10 发布
最新推荐文章于 2024-05-03 13:22:10 发布
阅读量1.9k 收藏 7
点赞数 1
分类专栏： 前端 javascript webgl 文章标签： javascript html html5 3d
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43305958/article/details/108140394
版权
前端 同时被 3 个专栏收录
92 篇文章 2 订阅
订阅专栏
javascript
53 篇文章 0 订阅
订阅专栏
webgl
3 篇文章 0 订阅
订阅专栏

threejs进阶，管道几何体高级应用，geometry几何体应用，可拖拽改变形状的管道

一、threejs是什么？

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。

二、geometry几何体使用步骤

1.引入库

案例代码

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - geometry - catmull spline editor</title>
		<meta charset="utf-8" />
		<meta
			name="viewport"
			content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
		/>
		<link type="text/css" rel="stylesheet" href="main.css" />
		<style>
			body {
				background-color: #f0f0f0;
				color: #444;
			}
			a {
				color: #08f;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a>
			- geometry - catmull spline editor
		</div>

		<script type="module">
			import * as THREE from "../build/three.module.js";

			import Stats from "./jsm/libs/stats.module.js";
			import { GUI } from "./jsm/libs/dat.gui.module.js";

			import { DragControls } from "./jsm/controls/DragControls.js";
			import { OrbitControls } from "./jsm/controls/OrbitControls.js";
			import { TransformControls } from "./jsm/controls/TransformControls.js";

			String.prototype.format = function () {
				var str = this;

				for (var i = 0; i < arguments.length; i++) {
					str = str.replace("{" + i + "}", arguments[i]);
				}
				return str;
			};

			var container, stats;
			var camera, scene, renderer;
			var splineHelperObjects = [];
			var splinePointsLength = 4;
			var positions = [];
			var point = new THREE.Vector3();

			var geometry = new THREE.BoxBufferGeometry(20, 20, 20);
			var transformControl;

			var ARC_SEGMENTS = 200;

			var splines = {};

			var params = {
				addPoint: addPoint,
				removePoint: removePoint,
				exportSpline: exportSpline,
			};

			init();
			animate();

			function init() {
				container = document.getElementById("container");

				scene = new THREE.Scene();
				scene.background = new THREE.Color(0xf0f0f0);

				camera = new THREE.PerspectiveCamera(
					70,
					window.innerWidth / window.innerHeight,
					1,
					10000
				);
				camera.position.set(0, 250, 1000);
				scene.add(camera);

				scene.add(new THREE.AmbientLight(0xf0f0f0));
				var light = new THREE.SpotLight(0xffffff, 1.5);
				light.position.set(0, 1500, 200);
				light.angle = Math.PI * 0.2;
				light.castShadow = true;
				light.shadow.camera.near = 200;
				light.shadow.camera.far = 2000;
				light.shadow.bias = -0.000222;
				light.shadow.mapSize.width = 1024;
				light.shadow.mapSize.height = 1024;
				scene.add(light);

				var planeGeometry = new THREE.PlaneBufferGeometry(2000, 2000);
				planeGeometry.rotateX(-Math.PI / 2);
				var planeMaterial = new THREE.ShadowMaterial({ opacity: 0.2 });

				var plane = new THREE.Mesh(planeGeometry, planeMaterial);
				plane.position.y = -200;
				plane.receiveShadow = true;
				scene.add(plane);

				var helper = new THREE.GridHelper(2000, 100);
				helper.position.y = -199;
				helper.material.opacity = 0.25;
				helper.material.transparent = true;
				scene.add(helper);

				//var axes = new AxesHelper( 1000 );
				//axes.position.set( - 500, - 500, - 500 );
				//scene.add( axes );

				renderer = new THREE.WebGLRenderer({ antialias: true });
				renderer.setPixelRatio(window.devicePixelRatio);
				renderer.setSize(window.innerWidth, window.innerHeight);
				renderer.shadowMap.enabled = true;
				container.appendChild(renderer.domElement);

				stats = new Stats();
				container.appendChild(stats.dom);

				var gui = new GUI();

				gui.add(params, "addPoint");
				gui.add(params, "removePoint");
				gui.add(params, "exportSpline");
				gui.open();

				// Controls
				var controls = new OrbitControls(camera, renderer.domElement);
				controls.damping = 0.2;
				controls.addEventListener("change", render);

				controls.addEventListener("start", function () {
					cancelHideTransform();
				});

				controls.addEventListener("end", function () {
					delayHideTransform();
				});

				transformControl = new TransformControls(camera, renderer.domElement);
				transformControl.addEventListener("change", render);
				transformControl.addEventListener("dragging-changed", function (event) {
					controls.enabled = !event.value;
				});
				scene.add(transformControl);

				// Hiding transform situation is a little in a mess :()
				transformControl.addEventListener("change", function () {
					cancelHideTransform();
				});

				transformControl.addEventListener("mouseDown", function () {
					cancelHideTransform();
				});

				transformControl.addEventListener("mouseUp", function () {
					delayHideTransform();
				});

				transformControl.addEventListener("objectChange", function () {
					updateSplineOutline();
				});

				var dragcontrols = new DragControls(
					splineHelperObjects,
					camera,
					renderer.domElement
				); //
				dragcontrols.enabled = false;
				dragcontrols.addEventListener("hoveron", function (event) {
					transformControl.attach(event.object);
					cancelHideTransform();
				});

				dragcontrols.addEventListener("hoveroff", function () {
					delayHideTransform();
				});

				var hiding;

				function delayHideTransform() {
					cancelHideTransform();
					hideTransform();
				}

				function hideTransform() {
					hiding = setTimeout(function () {
						transformControl.detach(transformControl.object);
					}, 2500);
				}

				function cancelHideTransform() {
					if (hiding) clearTimeout(hiding);
				}

				/*******
				 * Curves
				 *********/

				for (var i = 0; i < splinePointsLength; i++) {
					addSplineObject(positions[i]);
				}

				positions = [];

				for (var i = 0; i < splinePointsLength; i++) {
					positions.push(splineHelperObjects[i].position);
				}

				var geometry = new THREE.BufferGeometry();
				geometry.setAttribute(
					"position",
					new THREE.BufferAttribute(new Float32Array(ARC_SEGMENTS * 3), 3)
				);

				// curve = new THREE.CatmullRomCurve3( positions );
				// curve.curveType = 'centripetal';
				// curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
				// 	color: 0x00ff00,
				// 	opacity: 0.35
				// } ) );
				// curve.mesh.castShadow = true;
				// splines.centripetal = curve;

				// curve = new THREE.CatmullRomCurve3( positions );
				// curve.curveType = 'chordal';
				// curve.mesh = new THREE.Line( geometry.clone(), new THREE.LineBasicMaterial( {
				// 	color: 0x0000ff,
				// 	opacity: 0.35
				// } ) );
				// curve.mesh.castShadow = true;
				// splines.chordal = curve;

				for (var k in splines) {
					var spline = splines[k];
					scene.add(spline.mesh);
				}

				load([
					new THREE.Vector3(
						289.76843686945404,
						452.51481137238443,
						56.10018915737797
					),
					new THREE.Vector3(
						-53.56300074753207,
						171.49711742836848,
						-14.495472686253045
					),
					new THREE.Vector3(
						-91.40118730204415,
						176.4306956436485,
						-6.958271935582161
					),
					new THREE.Vector3(
						-383.785318791128,
						491.1365363371675,
						47.869296953772746
					),
				]);
			}

			function addSplineObject(position) {
				var material = new THREE.MeshLambertMaterial({
					color: Math.random() * 0xffffff,
				});
				var object = new THREE.Mesh(geometry, material);

				if (position) {
					object.position.copy(position);
				} else {
					object.position.x = Math.random() * 1000 - 500;
					object.position.y = Math.random() * 600;
					object.position.z = Math.random() * 800 - 400;
				}

				object.castShadow = true;
				object.receiveShadow = true;
				scene.add(object);
				splineHelperObjects.push(object);
				return object;
			}

			function addPoint() {
				splinePointsLength++;

				positions.push(addSplineObject().position);

				updateSplineOutline();
			}

			function removePoint() {
				if (splinePointsLength <= 4) {
					return;
				}
				splinePointsLength--;
				positions.pop();
				scene.remove(splineHelperObjects.pop());

				updateSplineOutline();
			}

			function updateSplineOutline() {
				for (let i = 0; i < scene.children.length; i++) {
					if (scene.children[i].type === "Line") {
						scene.remove(scene.children[i]);
					}
				}
				var curve = new THREE.CatmullRomCurve3(positions);
				curve.curveType = "catmullrom";
				curve.mesh = new THREE.Line(
					new THREE.TubeBufferGeometry(curve, 200, 10, 25, false),
					new THREE.MeshToonMaterial({ color: 0xff0000 })
				);
				curve.mesh.castShadow = true;
				scene.add(curve.mesh);
				// for (var k in splines) {
				// 	var spline = splines[k];

				// 	var splineMesh = spline.mesh;
				// 	var position = splineMesh.geometry.attributes.position;

				// 	for (var i = 0; i < ARC_SEGMENTS; i++) {
				// 		var t = i / (ARC_SEGMENTS - 1);
				// 		spline.getPoint(t, point);
				// 		position.setXYZ(i, point.x, point.y, point.z);
				// 	}

				// 	position.needsUpdate = true;
				// }
			}

			function exportSpline() {
				var strplace = [];

				for (var i = 0; i < splinePointsLength; i++) {
					var p = splineHelperObjects[i].position;
					strplace.push(
						"new THREE.Vector3({0}, {1}, {2})".format(p.x, p.y, p.z)
					);
				}

				console.log(strplace.join(",\n"));
				var code = "[" + strplace.join(",\n\t") + "]";
				prompt("copy and paste code", code);
			}

			function load(new_positions) {
				while (new_positions.length > positions.length) {
					addPoint();
				}

				while (new_positions.length < positions.length) {
					removePoint();
				}

				for (var i = 0; i < positions.length; i++) {
					positions[i].copy(new_positions[i]);
				}
				updateSplineOutline();
			}

			function animate() {
				requestAnimationFrame(animate);
				render();
				stats.update();
			}

			function render() {
				// splines.uniform.mesh.visible = params.uniform;
				// splines.centripetal.mesh.visible = params.centripetal;
				// splines.chordal.mesh.visible = params.chordal;
				renderer.render(scene, camera);
			}
		</script>
	</body>
</html>

实现效果：
在这里插入图片描述

2.如果使用谷歌浏览器打不开报错，file本地文件跨域，请看本博主的另一篇博客《s访问本地文件跨域，html文件访问跨域报错》

链接: https://blog.csdn.net/qq_43305958/article/details/108089387.

总结

good morning
大吕十六 不见长安
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
threejs优化管道(tube), 解决了管道拐角显示问题
localhost
11-17 237
threejs优化管道(tube), 解决了管道拐角显示问题。
ThreeJs制作管道水流效果
Baker的博客
04-03 758
首先开始创建一个管道，同样是先取一些点，通过这些点连接为曲线，通过曲线创建将这些点连起来的管道TubeGeometry对象，这里要给管道添加贴图，大家可以根据需要选择适合的贴图，我这里用的是一个二维码作为演示，之前的章节中有讲过如何制作管道效果，使用了TubeGeometry对象，先通过多个点绘制曲线，通过这个曲线使用TubeGeometry绘制管道，不过要绘制水流效果就需要有动态的效果，这里通过贴图的位移来实现；这里仔细看，可以发现，水流和管壁之间已经有了一些空隙，空隙的宽度由两个管道的半径差决定。
ThreeJS:Geometry与顶点|索引|面
最新发布
席木木的博客
05-03 1239
ThreeJS:Geometry与顶点|索引|面.
基于Threejs/Webgl管道三维流动&三维图表展示(曲线图柱状图饼图仪表仪盘)功能 项目实战二
11-15
针对webgl的库threejs框架项目功能实战讲解管道三维流动：对工厂、园区的管道（输气管道、输水管道、输油管道等）液体 气体流动进行实时监控，根据流向、流速对管道进行三维动态模拟效果。三维图表展示：设备实时数据和运行状态在三维场景中仪表盘可视化展示，三维的压力表、流量计、电压电流表。曲线图柱状图饼图三维可视化统计，工厂产能或生产数据做图形图表统计和实时数据查看。threejs 98版本开发环境（IDE） WebStorm 2019.2 版本
three.js 管道成型，旋转成型，拉伸成型的比较
yinge0508的博客
02-21 813
1，管道成型，（TubeGeometry） 创建一个沿着三维曲线延伸的管道。 TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean) path — Curve – 一个由基类Curve继承而来的3D路径。 tubularSegments — Integer – 组成这一管道的分段数，默认值为64。 radius — Float –.
three.js 绘制管道
yinge0508的博客
02-18 3364
效果： 注意：绘制管道时，直线或者曲线都要用三维的，否则有问题。本文中用了 三位线条曲线LineCurve3，三位样条曲线 CatmullRomCurve3 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
Vue+Three.js实现三维管道可视化及流动模拟
hhue2007的专栏
08-01 9027
利用vue+Threejs实现海底管道的动态流动模拟，见正文效果图。 演示了三维显示的基本组成，包括渲染器、相机、场景、灯光、Mesh、刷新和控制器等。
three.js之高级几何体-管状几何体TubeGeometry(vue中使用three.js33)
点燃火柴的博客
11-28 3603
TubeGeometry管状几何体介绍和使用1.TubeGeometry管状几何体介绍2.demo说明3.demo代码 1.TubeGeometry管状几何体介绍 TubeGeometry可以沿着一条三维样条曲线拉伸出一根管子。可以通过指定顶点来定义路径。创建TubeGeometry管道几何体时可输入以下参数： 属性 必须 描述 path 是 该属性用一个THREE.SplineCurve对象来指定管道遵循的路径 segments 否 该属性指定管道的分段数，路径越长指定的段数应该越多，
基于threejs的3d学校示例
10-11
3. **几何体（Geometry）**：几何体定义了3D形状，如立方体、球体、平面等。例如，`new THREE.BoxGeometry()`创建一个立方体几何体。 4. **材质（Material）**：材质决定了物体表面的外观，包括颜色、光泽等。Three...
LearningThreeJs_ThreeJS_three.jslearn_Threejs学习_
10-02
在Three.js中，我们还需要了解几何体（Geometry）、材质（Material）和光源（Light）。几何体定义了3D对象的形状，比如立方体、球体或者平面等；材质则决定了物体表面的外观，如颜色、反射率、透明度等；光源则影响...
threejs夹杂3d模型
05-22
在Three.js中，你可以通过组合多个几何体（Geometry）和材质（Material）来创建复杂对象。例如，可以将一个立方体（BoxGeometry）与一个球体（SphereGeometry）结合，并应用不同的材质，如颜色、纹理或光照效果，来...
Threejs城市道路管道流光效果
05-08
利用TubeGeometry来实现管道，贴图纹理采用带透明处理的渐变png图片，可以简单的模拟出城市道路流光效果。 如果增大THREE.TubeGeometry(path, 100, 0.2);中的第3个参数将管道增粗，就可以模拟管道三维流动，可以方便地实现模拟工厂、园区的管道（输气管道、输水管道、输油管道等）液体气体流动，并实现根据流向、流速对管道进行三维动态模拟效果。  
threejs 仓库货架
03-23
但是，通常Three.js项目会包含初始化场景、设置相机、加载几何体和材质、创建网格、添加光源、处理用户交互以及渲染循环等主要步骤。 总的来说，"threejs 仓库货架"项目涉及了Three.js的核心概念和技术，包括3D对象...
微信小游戏：在开发者工具中使用threejs
03-18
Three.js的核心概念包括场景（Scene）、相机（Camera）、渲染器（Renderer）和几何体（Geometry）。在创建3D场景时，需要定义一个场景，放置一个相机，选择一个渲染器来将3D模型投射到2D屏幕上，并创建各种几何体...
ThreeJs创建管道效果
Baker的博客
08-19 915
这节讲如何用Threejs创造管道，管道是3D建模场景中经常使用的模型，可以用3D建模做出管道模型加载进来，也可以用Threejs自身绘制出管道模型，Threejs可以绘制出直的管道和弯曲的管道，用到的组件是TubeGeometry，先创建直线和曲线，再通过管道组件加载线的路径，绘制出直的管道和弯曲的管道。下面直接上源码：...
使用Three.js 展示管道体TubeGeometry
做GIS梦的人
09-23 1240
使用Three.js 展示管道体TubeGeometry 网上关于使用Three.js加载管道体的demo，不少，但是没有完整的例子，很多都是基于老旧代码运行的，。这里我使用基于Vue的场景，展示一下如何显示管道体。 文章目录使用Three.js 展示管道体TubeGeometry环境准备编码1. 自定义随机路径类2. 场景展示效果展示 环境准备 基于vue的环境准备，可以参考我之前的博文 编码 1. 自定义随机路径类 import { Vector3, Curve } from 'th
threejs 管子_threejs 3d 智能园区
weixin_39855634的博客
12-19 969
一、页面效果二、技术选择中间的建筑相关的显示和效果都是threejs实现的左右两侧用的是echarts三、代码结构1. 画布用js自己创建一个放置画布的divcontainer = document.createElement(‘div‘)document.body.appendChild(container)2. 场景的创建之后的比如几何体 摄像机 光源都是放在场景里面scene = newTH...
43 Three.js自定义二维图形THREE.ShapeGeometry
热门推荐
现在学习也不晚
07-22 1万+
简介 通过THREE.ShapeGeometry，你可以调用几个函数来创建自己的图形。我们可以使用线条（line）、曲线（curve）和样条曲线（spline）创建图形的轮廓。还可以使用THREE.Shape对象的holes属性给这个图形打几个孔。 创建THREE.ShapeGeometry对象 使用THREE.Shape对象绘制完成后，需要创建THREE.ShapeGeometry几何...
three.js 内置的几何体Geometry
淋雨一直走~
12-23 1967
three.js学习笔记目录 案例效果 基本案例效果地址（上一次笔记已经演示了） 所有案例效果地址 前言 前面我们了解了，一个three.js三大基础renderer，camera，scene和响应式three.js 现在我们来学习一下three.js内置的geometry。three.js提供了很多的几何体给我们直接使用， 我就不多说了直接看代码(有点多)： <!DOCTYPE html> <html lang="en"> <head> <meta cha
threejs 自定义多边几何体
04-29
Three.js是一款基于WebGL技术的JavaScript 3D引擎，它可以用来创建各种各样的3D场景和动画效果。在Three.js中，我们可以通过构造函数THREE.Geometry来自定义多边几何体。以下是一个创建自定义多边几何体的基本流程： 1. 创建一个THREE.Geometry对象 ``` var geometry = new THREE.Geometry(); ``` 2. 添加顶点 ``` geometry.vertices.push( new THREE.Vector3(0, 0, 0), // 顶点1 new THREE.Vector3(0, 10, 0), // 顶点2 new THREE.Vector3(10, 0, 0) // 顶点3 ); ``` 3. 添加面 ``` geometry.faces.push( new THREE.Face3(0, 1, 2) // 三角形，顶点索引分别为0、1、2 ); ``` 4. 计算法线向量和顶点法向量 ``` geometry.computeFaceNormals(); // 计算面法线向量 geometry.computeVertexNormals(); // 计算顶点法向量 ``` 5. 创建网格模型并添加到场景中 ``` var material = new THREE.MeshPhongMaterial({ color: 0xffffff }); // 材质 var mesh = new THREE.Mesh(geometry, material); // 网格模型 scene.add(mesh); // 添加到场景中 ``` 以上代码将创建一个三角形形状的自定义多边几何体，并将其添加到场景中。你可以根据自己的需求添加更多的顶点和面，来创造出更加复杂的多边几何体。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值