Home

Index

How to use the GridHelper function from three

Find comprehensive JavaScript three.GridHelper code examples handpicked from public code repositorys.

three.GridHelper is a class in the Three.js library that creates a grid of lines or a wireframe grid.

util.js

179
180
181
182
183
184
185
186
187
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0xffffff);
// this.scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

//坐标轴辅助
var helper = new THREE.GridHelper(1200, 10, 0xFF4444, 0x404040);
this.scene.add(helper);

scene-editor.js

GitHub: Yamboy1/cs-field-guide

212
213
214
215
216
217
218
// Grid
var size = SCENE_SIZE;
var divisions = 10;
var colorCenterLine = 0xffffff;
var colorGrid = 0xffffff;
var gridHelper = new THREE.GridHelper(size, divisions, colorCenterLine, colorGrid);
scene.add( gridHelper );

How does three.GridHelper work?

three.GridHelper is a helper class in the Three.js library that generates a grid-like mesh of lines or planes to be used as a visual guide in a 3D scene. It takes two arguments: size, which determines the size of the grid, and divisions, which determines the number of divisions in the grid. The resulting grid can be added to a Three.js scene as a child of a parent object.

OLS3D.react.js

GitHub: kevinmcalear/explained-visually

189
190
191
192
193
194
195
196
197
198
/**
  * ------- SETUP --------
  */
_setupGrid(state) {
  var size = 0.5, step = 0.1
  var gridHelper = new THREE.GridHelper(size, step)
  var colorCenterLine = 0x000000, colorGrid = 0xf6f6f6, opacity = 1
  // gridHelper.rotation.x = Math.PI / 2
  gridHelper.position.y = -0.5
  gridHelper.setColors(colorCenterLine, colorGrid)

+ 5 other calls in file

index.js

GitHub: OpenSlicer/OpenSlicer

451
452
453
454
455
456
457
458
459
460
461
462
463
    controls.update()
}




function showGround() {
    scene.add(new THREE.GridHelper(500, 50))


    let obj = new THREE.Mesh(
        new THREE.PlaneGeometry(500, 500),
        new THREE.MeshBasicMaterial({

+ 5 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import * as THREE from "three";

const scene = new THREE.Scene();

// create a grid helper
const size = 10;
const divisions = 10;
const color1 = 0x444444;
const color2 = 0x888888;
const gridHelper = new THREE.GridHelper(size, divisions, color1, color2);
scene.add(gridHelper);

// create a camera and renderer
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// set camera position
camera.position.z = 5;

// render the scene
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

This code creates a GridHelper with a size of 10 and 10 divisions, and adds it to the Three.js scene. The GridHelper is then rendered using a camera and renderer.

ThreeFactory.js

GitHub: zhouzhili/webGL-webGIS-Learning

107
108
109
110
111
112
113
114
115
116
      division: 20,
      color1: '#555',
      color2: '#555',
      ...gridOpt
    }
    const grid = new THREE.GridHelper(gridSetting.size, gridSetting.division, gridSetting.color1, gridSetting.color2)
    this.scene.add(grid)
    this.grid = grid
  }
}

ArcballControls.js

GitHub: BaurTokenov/three-js-editor-2

1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
    tick = maxLength / 20;
    size = maxLength * multiplier;
    divisions = size / tick;
}
if (this._grid == null) {
    this._grid = new three_1.GridHelper(size, divisions, color, color);
    this._grid.position.copy(this._gizmos.position);
    this._gridPosition.copy(this._grid.position);
    this._grid.quaternion.copy(this.camera.quaternion);
    this._grid.rotateX(Math.PI * 0.5);

renderer.js

GitHub: shark39/metamaterials

50
51
52
53
54
55
56
57
58
59
this.scene.add( light2 );

// Create the grid and axes.
this.coordinateSystem = new THREE.Object3D();
var gridSize = Math.max(voxelGridSize.x, voxelGridSize.z);
this.grid = new THREE.GridHelper(gridSize, gridSize);
this.coordinateSystem.add(this.grid);

var xGeometry = new THREE.Geometry();
xGeometry.vertices.push(

_web3d.js

GitHub: truongvithien/threed

414
415
416
417
418
419
420
421
422
423
    }
}
var settings = $.extend(defaults, options);

if (settings.gridHelper.enable) {
    const gridHelper = new THREE.GridHelper( 
        settings.gridHelper.size ,  
        settings.gridHelper.divisions ,  
        settings.gridHelper.colorCenterLine ,  
        settings.gridHelper.colorGrid ,

+ 5 other calls in file

index.js

GitHub: glebshevchukk/pybot

47
48
49
50
51
52
53
54
55
        var light = new THREE.PointLight(0xffffff);
        light.position.set(100,250,100);
        scene.add(light);
        
    //GRID
        var gridXY = new THREE.GridHelper(1000, 10,new THREE.Color(0x000066),new THREE.Color(0x000066));
        gridXY.position.set( 0,0,0 );
        scene.add(gridXY);
}

home.js

GitHub: Cherna/cherna.github.io

35
36
37
38
39
40
41
42
43
44
controls = new Orbit(camera, renderer.domElement);

var axisHelper = new THREE.AxesHelper( 5 );
// scene.add( axisHelper );

var gridHelper = new THREE.GridHelper( 50, 1, '#aaaaaa', '#eeeeee');
// scene.add( gridHelper );

var winResWidth = window.innerWidth;
var winResHeight = window.innerHeight;

home2.js

GitHub: Cherna/cherna.github.io

49
50
51
52
53
54
55
56
57
58
});

// var axisHelper = new THREE.AxesHelper(5);
// scene.add( axisHelper );

// var gridHelper = new THREE.GridHelper(50, 1);
// gridHelper.setColors('#aaaaaa', '#eeeeee');
// scene.add( gridHelper );

var winResWidth = window.innerWidth;

Simulation.js

GitHub: abhijeet007rocks8/jupitermoon

253
254
255
256
257
258
259
260
261
262
    _this.resizeUpdate();
});
// Helper
if (this.options.debug) {
    if (this.options.debug.showGrid) {
        var gridHelper = new THREE.GridHelper(undefined, undefined);
        gridHelper.geometry.rotateX(Math.PI / 2);
        this.scene.add(gridHelper);
    }
    if (this.options.debug.showAxes) {

+ 8 other calls in file

RotatingObject.js

GitHub: abhijeet007rocks8/jupitermoon

110
111
112
113
114
115
116
117
118
119
if (this._options.debug) {
    if (this._options.debug.showAxes) {
        getAxes().forEach(function (axis) { return _this._obj.add(axis); });
    }
    if (this._options.debug.showGrid) {
        var gridHelper = new THREE.GridHelper(3, 3, 0xff0000, 0xffeeee);
        gridHelper.geometry.rotateX(Math.PI / 2);
        this._obj.add(gridHelper);
    }
}

renderer.js

GitHub: akosblazsik/microbit-vrobot

53
54
55
56
57
58
59
60
61
    depthWrite: false
}));
mesh.rotation.x = -Math.PI / 2;
scene.add(mesh);

var grid = new THREE.GridHelper(200, 40, 0x000000, 0x000000);
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add(grid);

viewer.js

GitHub: MichaelPolla/mip-viewer

540
541
542
543
544
545
546
547
548
549
  }
});

if (this.state.grid !== Boolean(this.gridHelper)) {
  if (this.state.grid) {
    this.gridHelper = new THREE.GridHelper();
    this.axesHelper = new THREE.AxesHelper();
    this.axesHelper.renderOrder = 999;
    this.axesHelper.onBeforeRender = (renderer) => renderer.clearDepth();
    this.scene.add(this.gridHelper);

+ 5 other calls in file

test.js

GitHub: gabdrz/gabdrz.github.io

0
1
2
3
4
5
6
7
8
9
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var THREE = require("three");
var stats_module_1 = require("three/examples/jsm/libs/stats.module");
var scene = new THREE.Scene();
var gridHelper = new THREE.GridHelper(10, 10, 0xaec6cf, 0xaec6cf);
scene.add(gridHelper);
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

animation.js

GitHub: Neticon/webgl-tests

44
45
46
47
48
49
50
51
52
53
scene.add(ambientLight)

const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
scene.add(directionalLight)

const gridHelper = new THREE.GridHelper(10,20)
gridHelper.rotation.x = Math.PI / 2
scene.add(gridHelper)

if (file.split('.').slice(-1).toString() === 'fbx') {

+ 3 other calls in file

Other functions in three

Sorted by popularity

three.Vector3 is the most popular function in three (22341 examples)

Other popular packages:

Home

About