javascript - 三个 : PlaneGeometry load texture to specific faces-6ren

javascript - 三个 : PlaneGeometry load texture to specific faces

转载作者：行者123 更新时间：2023-11-30 09:27:36

是否可以将纹理加载到 PlaneGeometry 对象的特定面？我想要做的是将单独的纹理映射到 PlaneGeometry 对象的特定 2 个三 Angular 形。

这里有一些例子，用一些颜色给 PlaneGeometry 对象的每 2 个三 Angular 形上色并且它有效:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>title</title>
		<meta charset="utf-8">
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	
<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
	<script>
		
		var camera, scene, renderer, geometry, material, mesh;

		init();
		animate();
		
		function init() {

			scene = new THREE.Scene();

			camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
			camera.position.z = 500;
			scene.add(camera);

			// geometry
			var thumbnail_width = 32;
			var thumbnail_height = 32;
			var width_segments = 10;
			var height_segments = 10;
			var plane_geometry_width = width_segments * thumbnail_width;
			var plane_geometry_height = height_segments * thumbnail_height;
			var geometry = new THREE.PlaneGeometry(plane_geometry_width, plane_geometry_height, width_segments, height_segments); // faces.length = widthSegments*heightSegments*2
			
			//Draw grid with static colors
			// materials
			var materials = [];
			materials.push(new THREE.MeshBasicMaterial({
				color: 0xff0000, side:THREE.DoubleSide
			}));
			materials.push(new THREE.MeshBasicMaterial({
				color: 0x00ff00, side:THREE.DoubleSide
			}));
			materials.push(new THREE.MeshBasicMaterial({
				color: 0x0000ff, side:THREE.DoubleSide
			}));
			// Add materialIndex to face
			var l = geometry.faces.length / 2;
			for (var i = 0; i < l; i++) {
				var j = 2 * i;
				geometry.faces[j].materialIndex = i % 3;
				geometry.faces[j + 1].materialIndex = i % 3;
			}

			// mesh
			mesh = new THREE.Mesh(geometry, materials);
			scene.add(mesh);
			
			// WebGL renderer
			renderer = new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth, window.innerHeight);	
			document.body.appendChild(renderer.domElement);
		}

		function animate() {
			requestAnimationFrame(animate);
			render();
		}

		function render() {
			renderer.render(scene, camera);
		}
		
	</script>
</body>

结果如下:

但是，当我尝试以相同方式映射纹理时，它映射到所有三 Angular 形，这不是我想要的:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>title</title>
		<meta charset="utf-8">
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	
<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
	<script>
		
		var camera, scene, renderer, geometry, material, mesh;

		init();
		animate();
		
		function init() {

			scene = new THREE.Scene();

			camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
			camera.position.z = 500;
			scene.add(camera);

			// geometry
			var thumbnail_width = 32;
			var thumbnail_height = 32;
			var width_segments = 10;
			var height_segments = 10;
			var plane_geometry_width = width_segments * thumbnail_width;
			var plane_geometry_height = height_segments * thumbnail_height;
			var geometry = new THREE.PlaneGeometry(plane_geometry_width, plane_geometry_height, width_segments, height_segments); // faces.length = widthSegments*heightSegments*2
			
			var texture = new THREE.TextureLoader().load("image_small/item_1.png")
			
			var materials = [];
			materials.push(new THREE.MeshBasicMaterial({map : texture, side: THREE.DoubleSide}));
			materials.push(new THREE.MeshBasicMaterial({color: 0xff0000, side:THREE.DoubleSide}));
			materials.push(new THREE.MeshBasicMaterial({color: 0x00ff00, side:THREE.DoubleSide}));
			
			// Add materialIndex to face
			var l = geometry.faces.length / 2;
			for (var i = 0; i < l; i++) {
				var j = 2 * i;
				geometry.faces[j].materialIndex = i % 3;
				geometry.faces[j + 1].materialIndex = i % 3;
			}
			
			// mesh
			mesh = new THREE.Mesh(geometry, materials);
			scene.add(mesh);
			
			// WebGL renderer
			renderer = new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);
		}

		function animate() {
			requestAnimationFrame(animate);
			render();
		}

		function render() {
			renderer.render(scene, camera);
		}
		
	</script>
</body>

结果如下:

更新:

@WestLangley 建议的第二种解决方案的部分代码

    var texture = new THREE.TextureLoader().load("image_small/item_1.png")
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set( 10, 10 );
    var materials = [];
    materials.push(new THREE.MeshBasicMaterial({map : texture, side: THREE.DoubleSide}));
    materials.push(new THREE.MeshBasicMaterial({color: 0xff0000, side:THREE.DoubleSide}));
    materials.push(new THREE.MeshBasicMaterial({color: 0x00ff00, side:THREE.DoubleSide}));
    // Add materialIndex to face
    var l = geometry.faces.length / 2;
    for (var i = 0; i < l; i++) {
        var j = 2 * i;
        geometry.faces[j].materialIndex = i % 3;
        geometry.faces[j + 1].materialIndex = i % 3;
    }
    geometry.sortFacesByMaterialIndex();
    // Mesh
    mesh = new THREE.Mesh(geometry, materials);
    scene.add(mesh);
    // WebGL renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

结果:

更新 2:

    var texture = new THREE.TextureLoader().load("image_small/item_1.png")
    texture.flipY = true
    var materials = [];
    materials.push(new THREE.MeshBasicMaterial({map : texture, side: THREE.DoubleSide}));
    for (var i = 0; i < geometry.faces.length; i++) {
        geometry.faces[i].materialIndex = 0;
    }
    var uvs = geometry.faceVertexUvs[ 0 ]; // widthSegments*heightSegments*2

    //UV
    // (0,1) (1,1)
    // (0,0) (1,0)
    // For THREE.PlaneGeometry, UV ( 0, 0 ) is located at the bottom left, and ( 1, 1 ) the top right.
    for (var i = 0; i < uvs.length; i++) {
        if(i % 2 == 0)
        {
            // (0,1)[2] x
            // (0,0)[1] (1,0)[3]
            uvs[i][0].x = 0.0;
            uvs[i][0].y = 0.0;
            uvs[i][1].x = 0.0;
            uvs[i][1].y = 1.0;
            uvs[i][2].x = 1.0;
            uvs[i][2].y = 0.0;

        }
        else
        {   
            // (0,1)[1] (1,1)[2]
            //     x    (1,0)[3]
            uvs[i][0].x = 0.0;
            uvs[i][0].y = 1.0;
            uvs[i][1].x = 1.0;
            uvs[i][1].y = 1.0;
            uvs[i][2].x = 1.0;
            uvs[i][2].y = 0.0;

        }
    }

    var mesh = new THREE.Mesh(geometry, materials);
    scene.add(mesh);
    // WebGL renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

结果:

最佳答案

你有两个选择。

一种是更改几何体的 UV，使每个正方形的 UV 范围从 ( 0, 0 ) 左下角到 ( 1, 1 ) 右上角。

另一个解决方案是设置纹理的repeat:

texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 10, 10 );

顺便说一句，在控制台中输入 renderer.info，您会看到生成了 100 个绘制调用。

设置 Material 索引后，将以下内容添加到您的代码中:

geometry.sortFacesByMaterialIndex();

您现在应该只看到 3 个绘制调用。

three.js r.89

关于javascript - 三个 : PlaneGeometry load texture to specific faces，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48385258/

文章推荐： java - 获取图像应用引擎的宽度和高度

文章推荐： java - 模板引擎应该渲染到输出流还是返回一个字符串

文章推荐： java - Google App Engine (Java) 上的 Catch-all URL 重写

文章推荐： java - 你如何拦截CXF中的WSDL请求？

Mysql事件:Run at specific intervals during a specific period
我正在 sitepoint 上阅读一篇文章 - http://www.sitepoint.com/how-to-create-mysql-events/关于mysql事件的主题，当你可以安排时我遇到了
Book a specific appointment on a specific day(在特定的日子预定特定的预约)
我想为用户预订一个特定的时间(开始时间和结束时间)，其他人不能在同一时间预订。例如：John预约了一个月5号7点到8点的时间，我想没有其他人可以在同一时间和日期预订。我想查一下时段，因为如果像John
Book a specific appointment on a specific day(在特定日期预约)
I want to book a specific time for the user (start hour and end hour ) and no one else can book a
Git 差异 : compare specific versions of specific file
我已经克隆了 linux 内核 git 仓库: git clone git://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux.git 我
python - BeautifulSoup : Get specific text that has no specific class
我正在尝试获取下面突出显示的文本“frei ab 01.05.2017”。然而问题是，“section_content iw_right”类在该网站上出现了 19 次。我会执行 find_all 并仅
C : How do I change bits in specific positions to specific values?
我尝试找到这个问题，但所有其他问题都与我的问题无关。我的问题:我有类似 0xFreeFoodU 的东西，我必须获得特定的位置，然后翻转它们或将它们设为 1 或 0。例如，位置 2、6、10、14、
php - 查询 : select specific fields from specific table
我正在尝试创建一个登录功能，该功能允许我指定要从中选择数据的表以及要选择的字段。我已设法将表值传递给函数，并从所需的表中选择数据，但我的表有不同的字段。如何在查询中指定它是一个表选择: user_id
css - rails : How to load a specific stylesheet for a specific layout?
我是 Rails 的新手，在获取布局(用作唯一的静态登录页面)来加载我想与之关联的特定样式表时遇到了问题。例如:www.landing.com 加载landing.scss.erb . 作为背景，所有
css - :last-child vs specific specific id's
我不明白为什么这两个示例的行为不同。 HTML 和 CSS 的目的只是简单地水平对齐 div，并让最后一个 div(向右)占据剩余空间(容器的剩余宽度)。为正确的元素使用特定的 id: #left
linux - 后缀 : restricting specific domain for specific user
我是 postfix 的新手。如何使用限制类或其他方法将特定用户的特定域列入黑名单。假设我的机器有两个用户 - user1 和 user2。我想将abc.com 到user1@mydomain 的
windows - 批处理 : Open a specific file in a specific program?
当记事本是 .txt 文件的默认程序时，我如何告诉 Windows 在写字板中打开 C:\test\test.txt？最佳答案接受的答案对我不起作用。我不确定这是因为我试图运行的程序，还是因为路径
xpath - 查找具有 : specific attribute and a child with specific text 的元素
对于下面的代码示例，我需要检查一个 tr ，type="a"并且有一个带有文本“3”作为 child 的 td ，是否存在: 1 1
JavaScript 正则表达式 : Inject specific number at specific position in a string
var s = '-10px -10px'; var n = '33px'; 我需要一个产生这个结果的正则表达式:'-10px 33px' 类似于:s.replace(???, n) 最佳答案如果您
mysql - SQL : ids containing specific arrays in a specific way
一个项目 table: items 有许多分类法 table: taxonomies 使用连接表 item_taxonomies (item_id, taxonomy_id)。使用分类组搜索项目。
css - JSF-h :panelGrid specific style for specific column
h:panelGrid 表有 2 列。这是必需的，第一列为整个表格宽度的 30%，第二列为整个表格宽度的 70%。这种情况有一些配置吗？看起来 columnClasses 属性应用于所有列，并且
Azure DevOps管道: specific stage gets stuck in queue on a specific machine
特定阶段仅在特定计算机上卡在队列中显示队列中的位置:1，但无法连接到代理，即使没有其他作业正在运行且队列为空所有其他阶段都工作正常故障阶段在不同的机器上工作正常代理已在线并已启用我们所有的代
蛋糕PHP 3 : Add specific JS/CSS file to a specific view
我正在使用 CakePHP 3.3.10。我需要将 JavaScript 文件添加到特定 View 。 // default.ctp // I need to remove this script
machine-learning - 机器学习: specific strategy learned because of playing against specific agent?
首先，我发现提出问题很困难，欢迎反馈。我必须制作一个机器学习代理来玩点和盒子。我还处于早期阶段，但提出了一个问题:如果我让我的机器学习代理(具有特定的实现)与它自身的副本进行对抗来学习和改进它的游
iphone - iOS 应用程序 : Should show a specific image at a specific day, 但崩溃
我是开发 iOS 应用程序的新手，英语不是我的母语，所以请原谅我的任何错误和丑陋的代码。我尝试创建的应用程序应该只在特定的一天显示一张特定的图像(如果日期更改，则更改图像)。因此我实现了一个检查日期
c++ - 错误 C2732 : linkage specification contradicts earlier specification for 'log'
我写了一些函数，并编译成一个dll模块。在我的头文件中如下: #ifndef GET_DATAFEED_FORKDB_H #define GET_DATAFEED_FORKDB_H #include

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 三个 : PlaneGeometry load texture to specific faces