threejs 自定义网格辅助线 GridHelper 可以设置网格数量,单个格子大小

threejs 自定义网格辅助线 GridHelper 可以设置网格数量,单个格子大小

遇到的问题:

在使用threejs默认的GridHelper时, 只可以设置网格的整体大小和份数,不可以设置单个格子的大小, 网上没有找到这方面的解决方案,

决定自己根据官方代码进行修改.

实现的功能:

   1. 可以设置x轴和z轴方向格子的个数
   2. 可以设置单个格子的宽高
   3. 可以设置网格颜色

具体实现

​ 新建MyGridHelper.js类

import { LineSegments } from 'three/src/objects/LineSegments.js';
import { LineBasicMaterial } from 'three/src/materials/LineBasicMaterial.js';
import { Float32BufferAttribute } from 'three/src/core/BufferAttribute.js';
import { BufferGeometry } from 'three/src/core/BufferGeometry.js';
import { Color } from 'three/src/math/Color.js';

class MyGridHelper extends LineSegments {

		/**
	 * 根据官方修改版-创建网格辅助线
	 * @param {Number} num_x x轴方向网格格子的个数
	 * @param {Number} num_z z轴方向网格格子的个数
	 * @param {Number} size_w 单个格子的宽度
	 * @param {Number} size_h 单个格子的高度
	 * @param {Number} gridColor 网格的线条颜色
	 */
		constructor( num_x = 10, num_z = 10, size_w = 10,size_h = 10, gridColor = 0x888888 ) {

			num_x = Number(num_x)
			num_z = Number(num_z)
			size_w = Number(size_w)
			size_h = Number(size_h)


			gridColor = new Color( gridColor );
	
			const halfz = num_z*0.5 * size_h
			const halfx = num_x*0.5 * size_w
			const stepx = size_w
			const stepz = size_h
	
			const vertices = [], colors = [];
	
			// x方向的线
			for ( let i = 0, j = 0, k = - halfz; i <= num_z; i ++, k += stepz ) {
	
				vertices.push( - halfx, 0, k, halfx, 0, k );  
	
				const color = gridColor;
			
				color.toArray( colors, j ); j += 3;
				color.toArray( colors, j ); j += 3;
				color.toArray( colors, j ); j += 3;
				color.toArray(colors, j); j += 3;
			}
	
			// z方向的线
			for ( let i = 0, j = 0, k = - halfx; i <= num_x; i ++, k += stepx ) {
				vertices.push(k, 0, - halfz, k, 0, halfz);
				
				
				const color = gridColor;
			
				color.toArray( colors, j ); j += 3;
				color.toArray( colors, j ); j += 3;
				color.toArray( colors, j ); j += 3;
				color.toArray(colors, j); j += 3;
			}
	
			console.log(vertices)
	
			const geometry = new BufferGeometry();
			geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
			geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
	
			const material = new LineBasicMaterial( { vertexColors: true, toneMapped: false } );
	
			super( geometry, material );
	
			this.type = 'GridHelper';
	
		}

    // /**
    //  * 这个方法是传入网格的整体大小和x、z方向上的份数,进行创建
	//  * 根据官方修改版-创建网格辅助线 
	//  * @param {*} size_w x轴方向的长度(宽)
	//  * @param {*} size_h z轴方向的长度(高)
	//  * @param {*} divisions_x x轴方向等分的份数 
	//  * @param {*} divisions_z z轴方向等分的份数
	//  * @param {*} gridColor 网格的线条颜色
	//  */
	// constructor( size_w = 10, size_h = 10, divisions_x = 10,divisions_z = 10, gridColor = 0x888888 ) {

	// 	gridColor = new Color( gridColor );

	// 	const max_z = size_h / 2
	// 	const max_x = size_w / 2
	// 	const stepx = size_w / divisions_x
	// 	const stepy = size_h / divisions_z

	// 	const vertices = [], colors = [];

	// 	// x方向的线
	// 	for ( let i = 0, j = 0, k = - max_z; i <= divisions_z; i ++, k += stepy ) {

	// 		vertices.push( - max_x, 0, k, max_x, 0, k );  

	// 		const color = gridColor;
		
	// 		color.toArray( colors, j ); j += 3;
	// 		color.toArray( colors, j ); j += 3;
	// 		color.toArray( colors, j ); j += 3;
	// 		color.toArray(colors, j); j += 3;
	// 	}

	// 	// z方向的线
	// 	for ( let i = 0, j = 0, k = - max_x; i <= divisions_x; i ++, k += stepx ) {
	// 		vertices.push( k, 0, - max_z, k, 0, max_z );
	// 	}


	// 	const geometry = new BufferGeometry();
	// 	geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
	// 	geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );

	// 	const material = new LineBasicMaterial( { vertexColors: true, toneMapped: false } );

	// 	super( geometry, material );

	// 	this.type = 'GridHelper';

	// }




	dispose() {

		this.geometry.dispose();
		this.material.dispose();

	}

}


export { MyGridHelper };

引入

import { MyGridHelper } from "../utils/MyGridHelper";

使用

// 初始化场景对象
initScene() {
  // 初始化场景对象
  this.scene = new THREE.Scene();
  // 创建三维坐标系
  var axesHelper = new THREE.AxesHelper(5000);
  // 创建地面网格辅助
  const gridHelper = new MyGridHelper(10,50,10,20,0x888888);

  this.scene.add(axesHelper);
  this.scene.add(gridHelper);
},