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

Was this helpful?

Плоские фигуры

Нарисовать ломаную линию

    // создадим материал зелёного цвета
    let material_for_lines_first = new THREE.LineBasicMaterial({ color: "#00FF00", linewidth: 7 });

    // создаём структуру для хранения точек
    let container_of_tochki_first = new THREE.Geometry();

    // добавляем точки
    container_of_tochki_first.vertices.push(new THREE.Vector3(1, 0, 0));
    container_of_tochki_first.vertices.push(new THREE.Vector3(15, 3, 0));
    container_of_tochki_first.vertices.push(new THREE.Vector3(1, 9, 0));
    container_of_tochki_first.vertices.push(new THREE.Vector3(15, 12, 0));

    // создаём ломанную линию из точек
    let figura_first = new THREE.Line(container_of_tochki_first, material_for_lines_first);

    // добавляем ломанную линию на сцену
    scene.add(figura_first);

    // выводим на экран то, что видит камера
    renderer.render(scene, camera);

Создать анимацию ломаной линии

    // создадим материал
    let material_for_lines_first = null;

    // создадим фигуру
    let figura_first = null;

    // создадим структуру для хранения точек
    let container_of_tochki_first = null;

    // создадим изменяющуюяся позицию Z
    let dZ = 0;

    // вызываем блок кода циклически
    let movingInterval = setInterval(function(){

        // если фигура существует, то удаляем её
        try {
            scene.remove(figura_first);
        } catch (err) {
            // error
        }

        // задаём материал
        material_for_lines_first = new THREE.LineBasicMaterial({ color: "#2940ff", linewidth: 7 });

        // создаём стуктуру для хранения точек
        container_of_tochki_first = new THREE.Geometry();

        // добавляем точки
        container_of_tochki_first.vertices.push(new THREE.Vector3(1, 0, dZ));
        container_of_tochki_first.vertices.push(new THREE.Vector3(15, 3, dZ));
        container_of_tochki_first.vertices.push(new THREE.Vector3(1, 9, dZ));
        container_of_tochki_first.vertices.push(new THREE.Vector3(15, 12, dZ));

        // создаём ломанную линию из точек
        figura_first = new THREE.Line(container_of_tochki_first, material_for_lines_first);

        // добавляем ломанную линию на сцену
        scene.add(figura_first);

        // выводим на экран то, что видит камера
        renderer.render(scene, camera);

        // изменяем позицию Z
        dZ -= 0.2;

    }, 50);
PreviousИсточники светаNextЩелчок по 3D объекту

Last updated 5 years ago

Was this helpful?