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

Was this helpful?

Точки и грани

Создадим плоский треугольник в 3D пространстве

    // точки треугольника
    let points = [
        new THREE.Vector3(2, 4, 2),
        new THREE.Vector3(8, 6, 2),
        new THREE.Vector3(2, 8, 8)
    ];

    // передняя и задняя грани треугольника
    let faces = [
        new THREE.Face3(2, 1, 0),
        new THREE.Face3(0, 1, 2)
    ];


    let geometry = new THREE.Geometry();
    geometry.vertices = points;
    geometry.faces = faces;
    geometry.mergeVertices();

    // массив материалов
    let materials = [
        // описание цвета граней треугольника
        new THREE.MeshBasicMaterial({ color: "#5882ff" }),
        // описание цвета рёбер треугольника
        new THREE.MeshBasicMaterial({ color: "#87ff09", wireframe: true })
    ];

    let mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
    scene.add(mesh);

    renderer.render(scene, camera);

Создадим анимацию вращения треугольника

    let myInterval = setInterval(function () {
        mesh.rotation.y += 0.05;
        renderer.render(scene, camera);
    }, 50);

Группировка объектов

Создание группы из двух плоских треугольников

    // создадим функцию, которая возвращает треугольник
    function getMyMesh(x0, y0, z0, x1, y1, z1, x2, y2, z2) {
        let points = [
            new THREE.Vector3(x0, y0, z0),
            new THREE.Vector3(x1, y1, z1),
            new THREE.Vector3(x2, y2, z2)
        ];

        let faces = [
            new THREE.Face3(2, 1, 0),
            new THREE.Face3(0, 1, 2)
        ];

        let geometry = new THREE.Geometry();
        geometry.vertices = points;
        geometry.faces = faces;
        geometry.mergeVertices();

        let materials = [
            new THREE.MeshBasicMaterial({color: "#5882ff"}),
            new THREE.MeshBasicMaterial({color: "#87ff09", wireframe: true})
        ];

        return THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
    }


    // получим с помощью функции два треугольника
    let mesh1 = getMyMesh(0,0,0,0,0,8,8,0,0);
    let mesh2 = getMyMesh(0,0,0,0,0,8,8,12,0);

    // создадим пустую группу
    let myGroup = new THREE.Group();

    // добавим в группу два треугольника
    myGroup.add(mesh1);
    myGroup.add(mesh2);

    // добавим группу на сцену
    scene.add(myGroup);

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

    // интервал для создания анимации вращения группы
    let groupInterval = setInterval(function(){
        myGroup.rotation.y += 0.05;
        renderer.render(scene, camera);
    }, 50);
PreviousВставка изображений

Last updated 5 years ago

Was this helpful?