Home

Index

How to use the AxesHelper function from three

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

three.AxesHelper is a Three.js built-in helper object that creates visual axes in a scene.

index.js

515
516
517
518
519
520
521
522
523
resetCamera(30)
updateLights()

scene.add(camLight)

axesHelper = new THREE.AxesHelper(500)
scene.add(axesHelper)
//showGround()

+ 2 other calls in file

index.js

GitHub: juanuys/boids

77
78
79
80
81
82
83
84
85
86
})

// CLOCK
clock = new THREE.Clock();

var axesHelper = new THREE.AxesHelper(50);
scene.add(axesHelper);

// COMPOSER + PASSES
composer = new EffectComposer(renderer)

How does three.AxesHelper work?

three.AxesHelper is a built-in Three.js class that creates a set of three lines representing the x, y, and z-axes in a 3D scene to help with visualizing orientation and position. It takes a single argument, size, which specifies the length of each axis. When an instance of AxesHelper is added to a Scene object, it becomes part of the 3D scene and can be transformed and animated like any other object.

index.js

GitHub: glebshevchukk/pybot

151
152
153
154
155
156
157
158
159
160
        viz_objs[topic+"_helper"]=helper;
}

function addTFViz(topic){
        let info = robot_info[topic]
        var axesHelper = new THREE.AxesHelper( 5 );
        axesHelper.position= info.pose.position;
        axesHelper.orientation= info.pose.position;
        scene.add(axesHelper);
        viz_objs[topic]=axesHelper

visualizer.js

GitHub: ASLS-org/studio

213
214
215
216
217
218
219
220
221
222
const gridHelper = new THREE.InfiniteGridHelper(5, 100, new THREE.Color("white"), 100)
gridHelper.rotateX(Math.PI / 2.0);
gridHelper.position.setZ(-.3)
SceneManager.add(gridHelper)

const axesHelper = new THREE.AxesHelper(2);

const checkerMaterial = new THREE.MeshStandardMaterial({
  map: texture,
  polygonOffset: true,

+ 3 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
// Create a scene
const scene = new THREE.Scene();

// Create an AxesHelper with a size of 5
const axesHelper = new THREE.AxesHelper(5);

// Add the AxesHelper to the scene
scene.add(axesHelper);

// Create a renderer
const renderer = new THREE.WebGLRenderer();

// Set the size of the renderer
renderer.setSize(window.innerWidth, window.innerHeight);

// Add the renderer to the document
document.body.appendChild(renderer.domElement);

// Render the scene
renderer.render(scene, camera);

This example creates a new AxesHelper with a size of 5 and adds it to the scene. The AxesHelper is a visual aid that displays the x, y, and z axes in a scene. When rendered, it will appear as three lines, each corresponding to one of the axes.

iktest.js

GitHub: sneha-belkhale/street-rat

61
62
63
64
65
66
67
68
69
70
const sphere = new THREE.Mesh(new THREE.SphereGeometry(100), new THREE.MeshBasicMaterial({
  wireframe: true,
}));
scene.add(sphere);

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

/** SCENE ROOM SETUP * */
const fbxLoader = new FBXLoader();

home.js

GitHub: Cherna/cherna.github.io

32
33
34
35
36
37
38
39
40
41
camera.lookAt(new THREE.Vector2(0,0));
scene.add(camera);

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 );

home2.js

GitHub: Cherna/cherna.github.io

46
47
48
49
50
51
52
53
54
55
$(document).on('mousemove', function (event) {
  mouseX = (event.clientX - windowHalfX) * 5;
  mouseY = (event.clientY - windowHalfY) * 5;
});

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

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

Engine.js

GitHub: cherob/web

35
36
37
38
39
40
41
42
43
44

/** AxesHelper
 * An axis object to visualize the 3 axes in a simple way.
 * The X axis is red. The Y axis is green. The Z axis is blue.
 */
var axesHelper = new THREE.AxesHelper(5);
this.scene.add(axesHelper);

/** OrbitControls
 * Orbit controls allow the camera to orbit around a target.

+ 54 other calls in file

graphics3DApplication.js

GitHub: HongpengM/Code_Archive_Public

84
85
86
87
88
89
90
91
92
 *
 * @memberof Graphics3DApplication
 */
initScene () {
  this.scene = new THREE.Scene()
  this.axesHelper = new THREE.AxesHelper(20)
  this.scene.add(this.axesHelper)
  this.scene.background = new THREE.Color( 0xf0f0f0 );
}

+ 18 other calls in file

Simulation.js

GitHub: abhijeet007rocks8/jupitermoon

258
259
260
261
262
263
264
265
266
267
    var gridHelper = new THREE.GridHelper(undefined, undefined);
    gridHelper.geometry.rotateX(Math.PI / 2);
    this.scene.add(gridHelper);
}
if (this.options.debug.showAxes) {
    this.scene.add(new THREE.AxesHelper(0.5));
}
if (this.options.debug.showStats) {
    this.stats = new stats_module_1["default"]();
    this.stats.showPanel(0);

+ 8 other calls in file

viewer.js

GitHub: MichaelPolla/mip-viewer

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

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);
    this.scene.add(this.axesHelper);

+ 5 other calls in file

app.js

GitHub: ARizeDevs/tf-handposefinal

91
92
93
94
95
96
97
98
99
100
});
const plane = new THREE.Mesh(geometry, material);
plane.visible = true;
scene.add(plane);

const axesHelper = new THREE.AxesHelper(1);
plane.add(axesHelper);

const gui = new GUI();
const watchFolder = gui.addFolder('Watch');

main.js

GitHub: Rachelforce/ThreePaingingPhoto

56
57
58
59
60
61
62
63
64
65

const light = new THREE.PointLight();
light.position.set(3, 3, 5);
light.castShadow = true;
scene.add(light);
 const axesHelper = new THREE.AxesHelper( 5 );
 scene.add( axesHelper );
const camera = new THREE.PerspectiveCamera();
camera.aspect = w/h;
 camera.updateProjectionMatrix();

+ 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