// создание сетки
// размер стороны ВСЕЙ сетки
let sizeOfSetka = 70;
// на сколько частей разбита каждая сторона сетки
let divisions = 8;
// цвет опорных осей сетки
let color_1 = "#3aff36";
// цвет клеток сетки
let color_2 = "#4013ff";
// создаём сетку
let gridHelper = new THREE.GridHelper(sizeOfSetka, divisions, color_1, color_2);
// добавляем сетку на сцену
scene.add(gridHelper);
Создать вспомогательные осевые линии
// создать вспомогательные осевые линии
let axes = new THREE.AxisHelper(200);
// добавить вспомогательные осевые линии на сцену
scene.add(axes);
Инициализация базовых свойств камеры и анимация её вращения
// задаём позицию камеры
camera.position.x = 5;
camera.position.y = 10;
camera.position.z = 50;
// задаём поворот камеры
camera.rotation.x = 0;
camera.rotation.y = 0;
camera.rotation.z = 0;
// анимация вращения камеры
let t1 = setInterval(function(){
// увеличиваем угол поворота камеры
camera.rotation.y += 0.01;
// выводим на экран то, что видит камера
renderer.render(scene, camera);
}, 50);
Реализация вида сверху камеры на сетку
// задаём позицию камеры для вида сверху на сетку
camera.position.x = 0;
camera.position.y = 100;
camera.position.z = 0;
// задаём поворот камеры для вида сверху на сетку
camera.rotation.x = -Math.PI / 2;
camera.rotation.y = 0;
camera.rotation.z = 0;
// выводим на экран то, что видит камера
renderer.render(scene, camera);