ThreeJs：裁剪( Path编)挖洞和贴图

最新推荐文章于 2025-06-16 22:57:30 发布
最新推荐文章于 2025-06-16 22:57:30 发布
阅读量5.4k 收藏 10
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Canvas与WebGL
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jinold/article/details/100530217
本文详细介绍了使用Three.js制作墙体模型的过程，包括如何创建带洞的形状、应用纹理并调整UV坐标，以及如何通过BufferGeometry实现对墙体大小的动态调整。通过实例演示了如何将纹理精确地映射到模型的每个面，展示了BufferGeometry在复杂模型制作中的强大功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本内容是裁剪( Path编)的延申

裁剪( Path编) ： https://blog.youkuaiyun.com/jinold/article/details/91345585

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - geometry - shapes</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<dir>
			<input type="text" id = "qiangSize">
			<input type="button" id = "qiangSizeBtn" value="设置" onclick="reSizeQiang()">
		</dir>
		<dir id="3DCon">
		</dir>
		<script src="js/three.js"></script>
		<script src="js/controls/MapControls.js"></script>
		<script>
 
			var container;
 
			var camera, scene, renderer;
 
			var controls;
 
			var targetRotation = 0;
			var targetRotationOnMouseDown = 0;
 
			var mouseX = 0;
			var mouseXOnMouseDown = 0;
 
			var windowHalfX = window.innerWidth / 2;
			var loader = new THREE.TextureLoader();
			var texture = loader.load( "module/brick_diffuse.jpg" );
 
			// it's necessary to apply these settings in order to correctly display the texture on a shape geometry
 
			texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
			texture.repeat.set( 0.008, 0.008 );
 
			init();
			animate();
			function reSizeQiang() {
				const newSize = Number(document.getElementById( 'qiangSize' ).value)
				for (let idx = scene.children.length; idx--; idx >= 0 ) {
					let objMesh = scene.children[idx]
					if (objMesh.type2 === "qiang") {
					
						var geometry = objMesh.geometry
						for (let idx2 in geometry.attributes.position.array) {
							if (geometry.attributes.position.array[idx2] === 320) {
								geometry.attributes.position.array[idx2] = newSize;
							}
						}
						for (let idx2 in geometry.attributes.uv.array) {
							if (geometry.attributes.uv.array[idx2] === 320) {
								geometry.attributes.uv.array[idx2] = newSize;
							}
						}
						var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { side: THREE.DoubleSide, map: texture } ) );
						mesh.position.set( objMesh.position.x, objMesh.position.y, objMesh.position.z);
						mesh.rotation.set( objMesh.rotation.x, objMesh.rotation.y, objMesh.rotation.z );
						mesh.scale.set( objMesh.scale.x, objMesh.scale.y, objMesh.scale.z );
						mesh.type2 = "qiang"
						scene.add( mesh );
						
						objMesh.geometry.dispose(); // 删除几何体
						objMesh.material.dispose(); // 删除材质
						scene.remove(objMesh);
						debugger
					}
				}
			}
			
			function addExtrudeShape( bGeometry,  pi, rt, s ) {
				
 
				// 原先是geometry， 但是bGeometry也可以
				var mesh = new THREE.Mesh( bGeometry, new THREE.MeshBasicMaterial( { side: THREE.DoubleSide, map: texture } ) );
				mesh.position.set( pi.x, pi.y, pi.z - 10 );
				mesh.rotation.set( rt.x, rt.y, rt.z );
				mesh.scale.set( s, s, s );
				mesh.type2 = "qiang"
				scene.add( mesh );
 
			}
			function addShape( shape,  pi, rt, s ) {
				var geometry = new THREE.ShapeBufferGeometry( shape );
				var bGeometry = new THREE.BufferGeometry();
				bGeometry.attributes.position = geometry.attributes.position;
				bGeometry.attributes.uv = geometry.attributes.uv;
				bGeometry.index = geometry.index
				var mesh = new THREE.Mesh( bGeometry, new THREE.MeshBasicMaterial( { side: THREE.DoubleSide, map: texture } ) );
				mesh.position.set( pi.x, pi.y, pi.z );
				mesh.rotation.set( rt.x, rt.y, rt.z );
				mesh.scale.set( s, s, s );
				// group.add( mesh );
				scene.add( mesh );
			}
			function QiangBufferGeometry(wdth, height, depth) {
 
				var squareShape = new THREE.Shape();
				squareShape.moveTo( 0, 0 );
				squareShape.lineTo( 0, height);
				squareShape.lineTo( wdth, height);
				squareShape.lineTo( wdth, 0 );
				squareShape.lineTo( 0, 0 );
				
				var squareShapePath = new THREE.Path();
				squareShapePath.moveTo( 10, 10 );
				squareShapePath.lineTo( 10, height -10);
				squareShapePath.lineTo( wdth - 10, height - 10);
				squareShapePath.lineTo( wdth -10 , 10 );
				squareShapePath.lineTo( 10, 10 );
				
				squareShape.holes.push( squareShapePath );// 挖洞
 
				
				var extrudeSettings = { depth: depth, bevelEnabled: true, bevelSegments: 0, steps: 1, bevelSize: 0, bevelThickness: 0 };
				
				// extruded shape
 
				var geometry = new THREE.ExtrudeBufferGeometry( squareShape, extrudeSettings );
				// ExtrudeBufferGeometry转换BufferGeometry
				var bGeometry = new THREE.BufferGeometry();
				// bGeometry.attributes.normal = geometry.attributes.normal;
				bGeometry.attributes.position = geometry.attributes.position;
				bGeometry.attributes.uv = geometry.attributes.uv;
				return bGeometry;
			}
			function init() {
 
				container = document.getElementById( '3DCon' );
				
				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0xf0f0f0 );
				var axes = new THREE.AxesHelper(10);
				scene.add(axes);
				
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.set( 0, 100, 500 );
				camera.up.x = 0;
				camera.up.y = 0;
				camera.up.z = 1;//相机以Z方向为上方
				// scene.add( camera );
				controls = new THREE.MapControls( camera, container );	
 
				var light = new THREE.PointLight( 0xffffff, 0.8 );
				camera.add( light );
 
				
				// Square
				const sqLength = 80;
				const squareShape = QiangBufferGeometry(sqLength * 4, sqLength, 8);
				
				addExtrudeShape( squareShape, {x: -sqLength * 2, y: -sqLength * 2, z: 0}, {x: Math.PI / 2, y: 0, z: 0}, 1 );
				addExtrudeShape( squareShape, {x: -sqLength * 2, y: sqLength * 2, z: 0}, {x: Math.PI / 2, y: 0, z: 0}, 1 );
				addExtrudeShape( squareShape, {x: -sqLength * 2, y: -sqLength * 2, z: 0}, {x: Math.PI / 2, y: Math.PI / 2, z: 0}, 1 );
				addExtrudeShape( squareShape, {x: sqLength * 2-8, y: -sqLength * 2, z: 0}, {x: Math.PI / 2, y: Math.PI / 2, z: 0}, 1 );
				
				// Square
 
				var sqDibanLength = 80;
 
				var squareDibanShape = new THREE.Shape();
				squareDibanShape.moveTo( -sqDibanLength, -sqDibanLength );
				squareDibanShape.lineTo( -sqDibanLength, sqDibanLength );
				squareDibanShape.lineTo( sqDibanLength, sqDibanLength );
				squareDibanShape.lineTo( sqDibanLength, -sqDibanLength );
				squareDibanShape.lineTo( -sqDibanLength, -sqDibanLength );
				
				addShape( squareDibanShape, {x: - sqDibanLength / 2, y: 0, z: 0}, {x: 0, y: 0, z: 0}, 1 );
				//
 
				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );
 
				//document.addEventListener( 'mousedown', onDocumentMouseDown, false );
				//document.addEventListener( 'touchstart', onDocumentTouchStart, false );
				//document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
				//
 
				window.addEventListener( 'resize', onWindowResize, false );
 
			}
 
			function onWindowResize() {
 
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
 
			}
 
			//
 
			function onDocumentMouseDown( event ) {
 
				event.preventDefault();
 
				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
 
				mouseXOnMouseDown = event.clientX - windowHalfX;
				targetRotationOnMouseDown = targetRotation;
 
			}
 
			function onDocumentMouseMove( event ) {
 
				mouseX = event.clientX - windowHalfX;
 
				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
 
			}
 
			function onDocumentMouseUp() {
 
				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
 
			}
 
			function onDocumentMouseOut() {
 
				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
 
			}
 
			function onDocumentTouchStart( event ) {
 
				if ( event.touches.length == 1 ) {
 
					event.preventDefault();
 
					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
					targetRotationOnMouseDown = targetRotation;
 
				}
 
			}
 
			function onDocumentTouchMove( event ) {
 
				if ( event.touches.length == 1 ) {
 
					event.preventDefault();
 
					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
 
				}
 
			}
 
			//
 
			function animate() {
 
				requestAnimationFrame( animate );
 
				render();
 
			}
 
			function render() {
 
				//group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
				renderer.render( scene, camera );
 
			}
 
		</script>
 
	</body>
</html>

 

效果图

 

 

UV按Face分解

function QiangBufferGeometry(wdth, height, depth) {

	var squareShape = new THREE.Shape();
	squareShape.moveTo( 0, 0 );
	squareShape.lineTo( 0, height);
	squareShape.lineTo( wdth, height);
	squareShape.lineTo( wdth, 0 );
	squareShape.lineTo( 0, 0 );
	
	var squareShapePath = new THREE.Path();
	squareShapePath.moveTo( 10, 10 );
	squareShapePath.lineTo( 10, height -10);
	squareShapePath.lineTo( wdth - 10, height - 10);
	squareShapePath.lineTo( wdth -10 , 10 );
	squareShapePath.lineTo( 10, 10 );
	
	squareShape.holes.push( squareShapePath );// 挖洞

	
	var extrudeSettings = { depth: depth, bevelEnabled: true, bevelSegments: 0, steps: 1, bevelSize: 0, bevelThickness: 0 };
	
	// extruded shape

	var geometry = new THREE.ExtrudeBufferGeometry( squareShape, extrudeSettings );
	// ExtrudeBufferGeometry转换BufferGeometry
	var bGeometry = new THREE.BufferGeometry();
	// bGeometry.attributes.normal = geometry.attributes.normal;
	bGeometry.attributes.position = geometry.attributes.position;
	bGeometry.attributes.uv = geometry.attributes.uv;
	for (let idx2 in bGeometry.attributes.uv.array) {

		// UV: 每一个Face有三个顶点组成，每个顶点由两个数字
		// 所以每个Face由6个数字组成
		if (idx2 > 5) {
			geometry.attributes.uv.array[idx2] = 0;
		}
		/*
		// 大face 1, 
		if (idx2 > 47) {
			geometry.attributes.uv.array[idx2] = 0;
		}
		*/
		/*
		// 大face 2
		if (idx2 < 48 || idx2 > 96) {
			geometry.attributes.uv.array[idx2] = 0;
		}
		*/
	}
	return bGeometry;
}

 只贴图第一个Face和Face的一小块儿。

正面和后面为例，每一面由8个Face组成，如果侧面或顶面地面应该由两个Face组成，这个自己可以试一下。

看到现在突然想起之前的记录
ThreeJs的学习：贴图（三）BufferGeometry
                           https://blog.youkuaiyun.com/jinold/article/details/99243957
ThreeJs的学习：BufferGeometry的理解（3），Geometry和BufferGeometry的关系
                           https://blog.youkuaiyun.com/jinold/article/details/98250783

饶了一大圈又回来了。恍然大悟，原来ThreeJs中BufferGeometry才是无敌的存在。

后面练习的球形圆柱形，多边形应该也是这样

结束本章结束前最后一个实验：

var geometry = new THREE.ExtrudeBufferGeometry( squareShape, extrudeSettings );
// ExtrudeBufferGeometry转换BufferGeometry
var bGeometry1 = new THREE.BufferGeometry();
bGeometry1.attributes.position = new THREE.Float32BufferAttribute( geometry.attributes.position.array.slice(0,72), 3);
bGeometry1.attributes.uv = new THREE.Float32BufferAttribute( geometry.attributes.uv.array.slice(0,48), 2);
addExtrudeShape( bGeometry1, {x: -sqLength * 2, y: -sqLength * 2, z: 0}, {x: Math.PI / 2, y: 0, z: 0}, 1 ,texture );
				
var bGeometry2 = new THREE.BufferGeometry();
bGeometry2.attributes.position = new THREE.Float32BufferAttribute( geometry.attributes.position.array.slice(72,144), 3);
bGeometry2.attributes.uv = new THREE.Float32BufferAttribute( geometry.attributes.uv.array.slice(48,96), 2);
addExtrudeShape( bGeometry2, {x: -sqLength * 2, y: -sqLength * 2, z: 0}, {x: Math.PI / 2, y: 0, z: 0}, 1 ,texture2 );

效果图：每个墙面不同的贴图 

Three.js引擎开发：Three.js渲染技术_（1）.Three.js引擎基础
chenlz2007的博客
06-13 851
Three.js 是一个基于 WebGL 的 JavaScript 3D 引擎，它提供了丰富的 API 来帮助开发者轻松创建和操作 3D 场景。WebGL 是一种低级的图形库，直接与浏览器的 GPU 交互，而 Three.js 则是在 WebGL 之上构建的一层抽象，使得开发者可以更简单地进行 3D 开发，而不需要深入了解 WebGL 的底层细节。要开始使用 Three.js，首先需要安装和引入它。可以通过以下几种方式来安装 Three.js：直接从 CDN 引入： 使用 npm 安装： 在项目中引入：
Three.js引擎开发：Three.js渲染技术all
最新发布
chenlz2007的博客
06-16 730
使用着色器创建自定义材质。// 创建一个自定义材质});通过理解Three.js的渲染流程和掌握各种高级渲染技术，可以构建出复杂且高性能的3D场景。本文介绍了场景初始化、对象创建、对象添加、动画循环、渲染输出、灯光与阴影、材质与纹理、以及性能优化的多个方面。希望这些内容能帮助你更好地使用Three.js进行3D开发。
Three.js扩展库threebsp.js实现简单的挖洞
海涛高软
09-09 2493
<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script> <script src="https://johnson2heng.github.io/three.js-demo/lib/threebsp.js"></script> <scri...
threejs中几种挖洞方式
jun279876704的博客
05-31 2019
1.earcut多边形三角划分也可以用来直接挖洞 let prehole = []; for (let i: number = 0; i < hole.length; i++) { prehole.push(hole[i].x, hole[i].z, 0); } let points = preface.concat(prehole); let holeIndexs = [];
Three.js其它功能
水寿十八公专栏
06-11 520
首先定义js文件的加载器并加载茶壶模型文件，并将茶壶几何体进行复制，再用for循环方式来创建多个茶壶网格对象并添加到场景中，同时，在创建每个茶壶网格对象时设置了不同的旋转角度和初始位置点。❑ 第2～12行为向场景添加二十面体的方法。如果场景中多次重复的物体是obj等格式的模型文件，为了提高场景的渲染速度，可以使用单个物体多次绘制的方式来提高场景的渲染速度和流畅性。❑ 第26～35行为初始化场景的基本组件，包括创建场景对象、渲染器对象，设置背景颜色和渲染窗口的大小，创建摄像机并指定摄像机的位置和观察位置。
Threejs墙体挖洞做门或窗
qq_33298964的博客
06-05 731
在使用Threejs代码构建的展厅中，需要在一面墙中间挖个洞作为门或窗户。引入ThreeBSP.js
把泥扔在墙上
danpu1174的博客
04-14 236
我一次又一次地使用在墙上扔泥巴的隐喻。 作为对我所做工作的描述，以及作为组织变革的隐喻。 当您将泥浆扔在墙上时，大部分泥浆会立即脱落。 有些会粘一会儿然后掉下来。 一点棍子永久。 也许太少了。 因此，您投入更多，同样的事情也会发生。 有时看起来好像没有泥土卡住，但实际上一点点都可以，即使您看不到它。 每次泥土掉下来都是令人悲伤的，甚至令人沮丧，但你必须不断扔。 那就是您真正能做的。 ...
threejs在墙上挖洞_在墙上飞
cuyi7076的博客
06-29 1126
当今的市场要求成功的公司必须能够及时响应客户的需求和优先事项。 Web服务器行业竞争激烈。 在市场上有IBM，Sun Microsystems和Hewlett-Packard等主要公司的情况下，区分产品和提供优质服务的需求已成为吸引新客户和保留老客户的关键要求。 客户需求和优先事项变得越来越重要，因为最能最快地满足这些需求的公司将吸引并留住客户。 另一个问题是，根据市场细分，客户的优先级有所不...
ThreeJs：裁剪( BSP编)挖洞和贴图
太古时代的专栏
09-01 2624
ThreeBSP的下载 https://github.com/sshirokov/ThreeBSP <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body ...
threejs13 如何裁剪贴图
12-18
关于如何在Three.js中裁剪贴图（texture UV mapping），你可以按照以下步骤操作： 1. **创建纹理**： 首先，你需要通过`THREE.TextureLoader`加载图像资源，并创建一个`THREE.Texture`对象。 ```javascript const...
学习threejs，使用CubeCamera相机创建反光效果
我哎GIS博客
11-28 3597
本文详细介绍如何基于threejs在三维场景中使用CubeCamera相机创建反光效果，亲测可用。希望能帮助到您。一起学习，加油！加油！
three.js简单例子 墙上挖门
06-02
项目要用到web3d 但是webgl学习起来太麻烦，先用three.js库写这点，初期做个记录。 关于框架的基本搭建和js引入，场景相机等的基本添加就不说明了，随便搜一下就一堆说明，重点说下如何在墙壁上挖一个门出来
Threejs插件墙体挖洞ThreeBSP.js
06-05
Threejs插件墙体挖洞ThreeBSP.js
three.js模型剖切功能的实现
03-22
多个面剖切（xOy平面、xOz平面、yOz平面），可以随意调节，可以实现将剖切口封装（住），支持鼠标拖拽调节剖切面。 资源来自开源github网站，故不设置积分。 国内浏览github极其慢，经常由于网络原因下载失败，故将此资源放置在优快云，方便大家学习，发扬IT开源共享精神，共同促进IT进步。
three.js中模型的裁剪
11-20
用于裁剪three.js中模型的裁剪。最新版。与three.js模型连用时，用网上的裁剪代码不会出错
Three.js引擎开发：Three.js渲染技术_（16）.Three.js在WebGL中的应用
chenlz2007的博客
06-16 982
本节深入探讨了Three.js在WebGL中的应用，包括如何利用WebGL的低级API来优化Three.js的渲染性能，以及如何在Three.js中实现一些高级的WebGL功能。通过减少绘制调用、使用实例化渲染、加载和应用纹理、启用阴影贴图、实现后期处理和物理模拟，我们可以创建更加丰富和高效的3D场景。此外，性能监控和调试工具如Stats.js和也是开发过程中不可或缺的工具。希望这些内容能帮助你更好地理解和使用Three.js，创建出令人印象深刻的WebGL应用。
【Threejs效果：挖空几何体】ThreeBSP实现墙体挖洞
popstarqq的博客
05-30 2609
Threejs创建墙体挖洞效果
threejs-剖切
NCQuan
04-21 2691
1.剖切整体，直接设置渲染器的全局剖切面，空间中与该平面点积为负的点将被切掉。 const globalPlane = new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0.1 ); renderer.clippingPlanes = [globalPlane]; 2.剖切某个对象，设置该对象的材质的剖切面，并设置渲染器开启对象级剖切。 const localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1
Three.js OBJ模型的剖切
weixin_45699870的博客
11-02 6210
由于项目需要，我进行了模型剖切功能方面的研究，如果只是为了实现模型剖切效果，我相信你会从这篇文章中得到收获。我对模型剖切功能的研究主要基于three.js中的webgl_clipping_stencil.html进行的，我研究模型剖切的过程比较曲折，剖切的难点主要在于剖切面的绘制，最初由于对three.js的了解不足，走了很多弯路，中间暂停该方面的研究，后来重新进行研究，取得一些收获。 模型剖切功能完全基于webgl_clipping_stencil.html实现，不涉及任何着色器的知识，现在就其代码进行分
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值