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

Was this helpful?

3D объекты

Координатой объекта в 3D мире является координата его центра.

Видны только рёбра

Создадим куб, у которого видны только его рёбра

    // описываем размер куба
    let cubeGeometry_1 = new THREE.CubeGeometry(17.5, 3, 17.5);
    // описываем цвет куба и говорим, чтобы отображались только его рёбра
    let cubeMaterial_1 = new THREE.MeshBasicMaterial({color: "#ff2f1b", wireframe: true});
    // создаём куб с заданными выше параметрами
    let cube_1 = new THREE.Mesh(cubeGeometry_1, cubeMaterial_1);
    // задаём позицию куба
    cube_1.position.x = 4;
    cube_1.position.y = 1.5;
    cube_1.position.z = 0;
    // добавляем куб на сцену
    scene.add(cube_1);

Создадим сферу, у которой видны только её опорные рёбра

    // задаём РАДИУС сферы и количество сегментов
    let sphereGeometry_1 = new THREE.SphereGeometry(6, 25, 25);
    // задаём цвет сферы и говорим, чтобы отображались только её опорные рёбра
    let sphereMaterial_1 = new THREE.MeshBasicMaterial({color: "#2F4F4F", wireframe: true});
    // создаём сферу с описанными выше параметрами
    let sphere_1 = new THREE.Mesh(sphereGeometry_1, sphereMaterial_1);
    // задаём позицию сферы
    sphere_1.position.x = 8;
    sphere_1.position.y = 6;
    sphere_1.position.z = 0;
    // добавляем сферу на сцену
    scene.add(sphere_1);

Видно всё

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

    // описываем размер плоскости
    let planeGeometry_1 = new THREE.PlaneGeometry(70, 70, 1, 1);
    // описываем цвет плоскости
    let planeMaterial_1 = new THREE.MeshLambertMaterial({color: "#4180d2"});
    // создаём плоскость
    let plane_1 = new THREE.Mesh(planeGeometry_1, planeMaterial_1);
    // поворачиваем плоскость на 90 градусов
    plane_1.rotation.x = (-0.5) * Math.PI;
    // задаём координаты плоскости
    plane_1.position.x = 0;
    plane_1.position.y = 0;
    plane_1.position.z = 0;
    // добавляем плоскость на сцену
    scene.add(plane_1);

Создание куба

    // описываем размер куба
    let cubeGeometry_1 = new THREE.CubeGeometry(17.5, 3, 17.5);
    // описываем цвет куба
    let cubeMaterial_1 = new THREE.MeshLambertMaterial({color: "#ff2f1b"});
    // создаём куб
    let cube_1 = new THREE.Mesh(cubeGeometry_1, cubeMaterial_1);
    // задаём позицию куба
    cube_1.position.x = 4;
    cube_1.position.y = 1.5;
    cube_1.position.z = 0;
    // добавляем куб на сцену
    scene.add(cube_1);

Создание сферы

    // задаём РАДИУС сферы и количество сегментов
    let sphereGeometry_1 = new THREE.SphereGeometry(6, 25, 25);
    // задаём цвет сферы
    let sphereMaterial_1 = new THREE.MeshLambertMaterial({color: "#8dff25"});
    // создаём сферу
    let sphere_1 = new THREE.Mesh(sphereGeometry_1, sphereMaterial_1);
    // задаём позицию сферы
    sphere_1.position.x = 8;
    sphere_1.position.y = 6;
    sphere_1.position.z = 0;
    // добавляем сферу на сцену
    scene.add(sphere_1);

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

    let radius_1 = 2;
    let height_1 = 6;
    let sideNumber_1 = 5;
    // описываем радиус конуса, высоту и количество боковых сторон
    let cone_geometry_1 = new THREE.ConeBufferGeometry(radius_1, height_1, sideNumber_1);
    // описываем цвет конуса
    let cone_material_1 = new THREE.MeshLambertMaterial({color: "#2d5eff"});
    // создаём конус
    let cone_1 = new THREE.Mesh(cone_geometry_1,cone_material_1);
    // задаём координаты конуса
    cone_1.position.x = 0;
    cone_1.position.y = 3;
    cone_1.position.z = 0;
    // добавляем конус на сцену
    scene.add(cone_1);

Создание полупрозрачного материала

let cubeMaterial_1 = new THREE.MeshLambertMaterial({color: "#ffb44e", opacity: 0.5, transparent:true});

Информация об объектах на сцене

Вывести в консоль информацию об объектах на сцене

    console.log(scene.children.length);

    for(let i = 0; i < scene.children.length; i++){
        console.log(scene.children[i]);
    }
PreviousСетка Оси КамераNextИсточники света

Last updated 5 years ago

Was this helpful?