Agregar grid para coordenadas ( X, Y, Z) en Three.js

Tutorial | Three.js

Código principal

// Crear la cuadrícula del eje x
var gridX = new THREE.GridHelper(100, 10);
gridX.rotation.x = Math.PI / 2;
gridX.material.color = new THREE.Color(0xff0000); // Color rojo
scene.add(gridX);

// Crear la cuadrícula del eje y
var gridY = new THREE.GridHelper(100, 10);
gridY.material.color = new THREE.Color(0x00ff00); // Color verde
scene.add(gridY);

// Crear la cuadrícula del eje z
var gridZ = new THREE.GridHelper(100, 10);
gridZ.rotation.z = Math.PI / 2;
gridZ.material.color = new THREE.Color(0x0000ff); // Color azul
scene.add(gridZ);

Código Completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App</title>
</head>
<body>
    <h1>App</h1>

    <div style="display: flex; justify-content: center;">
        <div id="game"></div>
    </div>

<script type="importmap">
{
    "imports": {
        "three": "https://unpkg.com/three@0.149.0/build/three.module.js"
    }
}
</script>

<script type="module">

import * as THREE from 'three';

// size del la ventana de visualizacion
const viewWidth = 360;
const viewHeight = 360;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, viewWidth/viewHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(viewWidth, viewHeight);

// agregar en el div
let game_div = document.getElementById("game");
game_div.appendChild(renderer.domElement);

// agregar cubos de referencia
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color:0x888888});
const material1 = new THREE.MeshBasicMaterial({color:0xff0000});
const material2 = new THREE.MeshBasicMaterial({color:0x00ff00});
const material3 = new THREE.MeshBasicMaterial({color:0x0000ff});
let cube = new THREE.Mesh(geometry, material);
let cube1 = new THREE.Mesh(geometry, material1);
let cube2 = new THREE.Mesh(geometry, material2);
let cube3 = new THREE.Mesh(geometry, material3);
scene.add(cube);
scene.add(cube1);
scene.add(cube2);
scene.add(cube3);

cube1.position.x = 10
cube2.position.y = 10
cube3.position.z = 10

// mover la camara
camera.position.x = 3;
camera.position.y = 3;
camera.position.z = 15;

// Crear la cuadrícula del eje x
var gridX = new THREE.GridHelper(100, 10);
gridX.rotation.x = Math.PI / 2;
gridX.material.color = new THREE.Color(0xff0000); // Color rojo
scene.add(gridX);

// Crear la cuadrícula del eje y
var gridY = new THREE.GridHelper(100, 10);
gridY.material.color = new THREE.Color(0x00ff00); // Color verde
scene.add(gridY);

// Crear la cuadrícula del eje z
var gridZ = new THREE.GridHelper(100, 10);
gridZ.rotation.z = Math.PI / 2;
gridZ.material.color = new THREE.Color(0x0000ff); // Color azul
scene.add(gridZ);

function animate(){
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();
</script>

</body>
</html>

Referencias

Tutorial | Three.js