The syntax for translating an object on any of the three axes is as follows:
```
object.translateX(d);
// or
object.translateY(d);
// or
object.translateZ(d);
```
Here, `object` is an instance of class `Object3D` and contains the `translate` methods.
### Parameters
The methods mentioned above pass only one parameter:
* `d`: This parameter is of type `float` and specifies the magnitude by which we want to translate an object in a particular direction (for example, in our case $x$, $y$ or $z$ axes).



### Example
Below is an example that demonstrates the use of `translate` methods. In this code example, the sphere inside the scene can move in a particular direction as specified by the user using the 'WASD’ keys on the keyboard.

<!DOCTYPE html>
<html>
	<head>
		<title>THREE Translate</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="https://threejs.org/build/three.js"></script>
		<script>

			// scene
			const scene = new THREE.Scene();

			// camera
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
      		camera.position.set(0,0,10);

			//renderer
			const renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			// sphere
			const geometry = new THREE.SphereGeometry( 1, 32, 16 );
			const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
			const sphere = new THREE.Mesh( geometry, material );
			scene.add( sphere );

			//rendering function
			function animate() {
				requestAnimationFrame( animate );

				//event listener for key presses

				window.addEventListener('keydown', (event) => {
					
					if (event.key == 'a'){
						sphere.translateX(-0.001);
					} else if (event.key == 'd'){
						sphere.translateX(0.001);
					} else if (event.key == 'w'){
						sphere.translateY(0.001);
					} else if (event.key == 's'){
						sphere.translateY(-0.001);
					}
				})

				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>

codemirror

How to translate an object on an axis in three.js

Translating an object on an axis in three.jsThree.js is a JavaScript library. It makes use of WebGL to render animations on the web.Objects in three.js that belong to the Object3D class (base class for most 3D objects) have properties that allow them to be translated, transformed, and rotated. In this Answer, we will focus on translating an object on an axis which can be achieved using the following methods:translateX()translateY()translateZ()These methods translate the object on their respective axes by some magnitude. The way they work is shown below.Syntax

How to translate an object on an axis in three.js

Translating an object on an axis in three.js

Syntax

Parameters

Example

Explanation