aframe.js通过three.js的THREE.PlaneGeometry创建随机山地地形

最新推荐文章于 2025-06-10 09:32:01 发布

原创

最新推荐文章于 2025-06-10 09:32:01 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#WebVR #aframe.js #three.js #WebGL #VR

本文介绍了如何利用WebVR框架aframe.js结合three.js的THREE.PlaneGeometry创建随机地形。主要步骤包括：1. 创建平面；2. 随机化vertices的z坐标以模拟山峰的起伏。同时，为了防止地形边缘翘起，需确保边缘vertices的z值为0。

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

策略：

1.先通过THREE.PlaneGeometry创建一个平面；

2.然后修改这个平面的vertices的z值，z值随机化，这样山峰就高高低低层次错落。

注意：

山地边缘的vertices[i].z值要统一为0，这样边缘才不至于翘起破空。

//随机山地地形生成
		AFRAME.registerGeometry('hills', {
		
			init: function () {
			
				var terrainGeometry = new THREE.PlaneGeometry( 100, 100, 9,9 );
				
						
				//统计顶点总数
				var verticesCount=terrainGeometry.vertices.length;
				
				console.log("vertices count:"+verticesCount);				
				
				for(var i=0;i<verticesCount;i++){			
					
					//地形平面边缘不变形
					var iMod10=i%10;
					if(iMod10==9||iMod10==0||i<=10||i>=90){
						terrainGeometry.vertices[i].z=0;
					}else{
						terrainGeometry.vertices[i].z=Math.floor(Math.random()*30);
					}
					
				}
				
				terrainGeometry.rotateX(-Math.PI/2);
				
				this.geometry=terrainGeometry;
				
			}			
		
		});

之后再在<a-scene>中插入：