threeJS
  • Введение
  • Инициализация сцены
  • Сетка Оси Камера
  • 3D объекты
  • Источники света
  • Плоские фигуры
  • Щелчок по 3D объекту
  • Вставка изображений
  • Точки и грани
Powered by GitBook
On this page

Was this helpful?

Сетка Оси Камера

Создание сетки

    // создание сетки
    // размер стороны ВСЕЙ сетки
    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);

Направить взор камеры на определённый объект

camera.lookAt(sphere_1.position);

Направить взор камеры в определённую точку

camera.lookAt( new THREE.Vector3(-12, 6, 15) );
PreviousИнициализация сценыNext3D объекты

Last updated 5 years ago

Was this helpful?