Трёхмерный фон для сайта в реальном времени на JavaScript при помощи three.js

Original author: Vlad-Ștefan Harbuz
  • Translation
  • Tutorial


Обучающий материал с ресурса Phyramid, у которых именно такая шапка сайта.



Обновив в 2014 свой сайт, мы сделали трёхмерный фон в шапке, состоящий из геометрических фигур в 3D Max. Но потом мы подумали, что было бы гораздо круче генерить его в реальном времени на JS. Сказано – сделано, и при помощи замечательного фреймворка three.js мы сделали простенькую сценку. И вот, как это было.

Замечание по стилю кода: мы сначала хотели использовать только функциональный стиль, но из-за особенностей веба и работы алгоритма переключились на ООП.

Создаём поверхность


Первым шагом было создание основной части сцены. Для этого мы создали плоскость с сегментами 100х100, и потом сместили вершины случайным образом. Важный момент – необходимо задать geometry.dynamic = true и geometry.normalsNeedUpdate = true, чтобы three.js знал, что вершины поменяются и что ему надо будет пересчитать освещение.

  var makePlaneGeometry = function(width, height, widthSegments, heightSegments) {
    var geometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
    var X_OFFSET_DAMPEN = 0.5;
    var Y_OFFSET_DAMPEN = 0.1;
    var Z_OFFSET_DAMPEN = 0.1;
    var randSign = function() { return (Math.random() > 0.5) ? 1 : -1; };
  
    for (var vertIndex = 0; vertIndex < geometry.vertices.length; vertIndex++) {
      geometry.vertices[vertIndex].x += Math.random() / X_OFFSET_DAMPEN * randSign();
      geometry.vertices[vertIndex].y += Math.random() / Y_OFFSET_DAMPEN * randSign();
      geometry.vertices[vertIndex].z += Math.random() / Z_OFFSET_DAMPEN * randSign();
    }
  
    geometry.dynamic = true;
    geometry.computeFaceNormals();
    geometry.computeVertexNormals();
    geometry.normalsNeedUpdate = true;
    return geometry;
  };
  
  var makePlane = function(geometry) {  
    var material = new THREE.MeshBasicMaterial({color: 0x00576b, wireframe: true});
    var plane = new THREE.Mesh(geometry, material);
    return plane;
  };
  
  var init = function(container, viewWidth, viewHeight) {  
    var scene = makeScene();
    // (...)
    var plane = makePlane(makePlaneGeometry(400, 400, 100, 100));
    scene.add(plane);
    // (...)
  };


Играемся с каркасом


Простой материал для каркаса помог визуализации модели:

  var material = new THREE.MeshBasicMaterial({color: 0x00576b, wireframe: true});


TrackballControls.js был использован для перемещения по сцене. И вот, что у нас в результате получилось:



Круто, но ещё не отполировано. Добавим настоящий материал и свет.

Добавление материала и света


Для достижения нужного внешнего вида потребовалась модель затенения ambient occlusion. Кроме того, нужно сделать видимыми рёбра модели без сглаживания. Поэтому материал lambert с плоским затенением подошёл идеально:

  var material = new THREE.MeshLambertMaterial({color: 0xffffff, shading: THREE.FlatShading});


Использовалось два источника света. Первый – ambient, был размещён для равномерного освещения. Второй, направленный, создавал все эти крутые тени, которые придают модели полигональный вид.

  var makeLights = function() {
    var ambientLight = new THREE.AmbientLight(0x1a1a1a);
    this.scene.add(ambientLight);
  
    var dirLight = new THREE.DirectionalLight(0xdfe8ef, 0.09);
    dirLight.position.set(5, 2, 1);
    this.scene.add(dirLight);
  };


Размещение камеры


Мы хотели разместить камеру, смотрящую на плоскость примерно с угла в 45 градусов, что довольно просто. Поигравшись с камерой, мы выбрали угол в 75 градусов, который даёт эффект наблюдения «с вершины горы».

  var camera = new THREE.PerspectiveCamera(fov, aspectRatio, 0.1, 1000);
  camera.up = new THREE.Vector3(0, 1, 0);  
  camera.rotation.x = 75 * Math.PI / 180;  
  camera.position.z = zPos;  


Поле зрения доставило проблем, потому что на широких холстах сцена смотрелась странно, примерно как при настройке FOV в Quake на 180 градусов. Мы написали код для грубого подсчёта FOV на основании разрешения экрана.

Дымка и alpha-blending



Картинка уже начинает напоминать нашу цель, но есть одна проблема. Чётко видны границы плоскости. Вот яркий пример этого, с камерой, смотрящей вниз.



Сначала мы хотели преобразовать плоскость в сферу, а камеру разместить внутри сферы, в центре. Подход вроде бы решал проблему, но поверхность уже выглядела не так, и собиралась в складки на полюсах.

Решением было добавить экспоненциальную дымку, которая получилась очень круто. После включения альфа-блендинга, дымка плавно переходила в фон заставки и давала крутой эффект.

  var renderer = new THREE.WebGLRenderer({antialiasing: true, alpha: true});
  (...)
  scene.fog = new THREE.FogExp2(0x222228, 0.003);  


Вот картинка с усиленным эффектом дымки:



Интерактивность (часть первая – мышь)


Наконец, сцена начала выглядеть правильно, но управление ещё было неидеальным. TrackballControls позволяет свободно двигаться по сцене, но нам надо было разрешить только повороты относительно оси Z. Мы решили написать управление с нуля, основываясь на демке с вращающимся кубом от three.js

Когда пользователь двигает мышью, необходимо выключать авторотацию, и запоминать дистанцию, на которую была подвинута мышь, чтобы добавить её к повороту вокруг Z в следующем кадре.

  var registerMouseMove = function(event) {
    this.autorotation = false;
    var mouseXOnMouseMove = event.clientX - (this.width / 2);
    var MOUSE_MOVE_DAMPENING = 0.0075;
    this.targetRotation = this.targetRotationOnMouseDown +
                          (mouseXOnMouseMove - this.mouseXOnMouseDown) *
                          MOUSE_MOVE_DAMPENING;
  };


Также необходим обработчик нажатий, чтобы перемещения были зарегистрированы только, если пользователь зажал кнопку мыши (и запомнить первоначальное расположение мыши для подсчёта дистанции).

  var registerMouseDown = function(event) {
    startMouseMovementDetection();
    this.mouseXOnMouseDown = event.clientX - (this.width / 2);
    this.targetRotationOnMouseDown = this.targetRotation;
  };


Всё, что остаётся – сделать сам поворот.

  if (this.autorotation) {
    this.object.rotation.z += OBJECT_AUTOROTATION_AMOUNT;
  } else {
    this.object.rotation.z -= (this.targetRotation + this.object.rotation.z) *
                                  TARGET_ROTATION_DAMPENING;
  }


Мы добавили ещё ограничение на движение – если объект двигают слишком медленно, мы считаем, что это шум или остаточные явления с последнего протаскивания, поэтому мы возвращаем метод поворота в состояние авторотации.

  if (Math.abs(this.targetRotation + this.object.rotation.z) < OBJECT_ROTATION_THRESHOLD) {
    this.autorotation = true;
  }


Интерактивность (часть вторая – касания)

Почти закончили! Ешё нам нужно сделать управление при помощи касаний. Работает примерно так же, как управление мышью.

  var registerTouchDown = function(event) {
    if (event.touches.length === 1) {
      this.mouseXOnMouseDown = event.touches[0].pageX - (this.width / 2);
      this.mouseYOnMouseDown = event.touches[0].pageY - (this.height / 2);
      this.targetRotationOnMouseDown = this.targetRotation;
    }
  }


Но есть проблема. На устройствах с сенсорным экраном жест, отвечающий за перемещение сцены, также отвечает и за прокрутку страницы. Это плохо влияло на управляемость, потому что практически мы отключали прокрутку.

Из-за этого нам пришлось проверять направление протаскивания. Если оно по большей части горизонтальное, тогда мы вращаем плоскость. Если преимущественно вертикальное, мы ничего не делали и разрешали случаться событиям по умолчанию.

  function registerTouchMove(event) {
    if (event.touches.length === 1) {
      var MOUSE_MOVE_DAMPENING = 0.01;
      this.autorotation = false;
      var mouseXOnMouseMove = event.touches[0].pageX - (this.width / 2);
      var mouseYOnMouseMove = event.touches[0].pageY - (this.height / 2);
      var xDiff = mouseXOnMouseMove - this.mouseXOnMouseDown;
      var yDiff = mouseYOnMouseMove - this.mouseYOnMouseDown;
      if (Math.abs(xDiff) > Math.abs(yDiff)) {
        event.preventDefault();
        this.targetRotation = this.targetRotationOnMouseDown + xDiff * MOUSE_MOVE_DAMPENING;
      }
    }
  }


Обновление разрешения при изменении размера


Последнее по очереди, но не по значимости – возможность динамически обновлять всю картинку при изменении размера окна браузера.

  var updateDimensions = function() {
    this.width = this.container.offsetWidth;
    this.height = this.container.offsetHeight;
    var aspectRatio = this.width / this.height;
    var fov = fovForAspectRatio(aspectRatio);
    var zPos = cameraZPositionForFov(fov);
  
    this.camera.aspect = aspectRatio;
    this.camera.fov = fov;
    this.camera.position.z = zPos;
    this.camera.updateProjectionMatrix();
  
    this.renderer.setSize(this.width, this.height);
  };


Результаты


Готово! Вот, как оно выходит при просмотре на весь экран (у нас полноэкранный просмотр выдаётся на странице 404). Живой пример.



Создание трёхмерного заголовка было очень увлекательным занятием, и мы впечатлены мощью three.js. Надеемся, что эта статья поможет вам создавать похожие вещи.
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 10

    +4
    Я люблю webgl и threejs в частности. Но тащить всю библиотеку из-за шапки…
      +8
      А еще процессор (i5) грузит на 10+%%…
        0
        Ubuntu 14.04
        Intel® Core(TM) i5-4690 CPU @ 3.50GHz

        Chrome (открыто 2 вкладки, хабр и пирамид)
          PID USER      PR  NI    VIRT    RES    SHR S  %CPU %MEM     TIME+ COMMAND
        20592 uusser+  20   0  975756  86364  36352 S  23,9  1,1   0:26.44 chrome
         4170 uusser+  20   0  742500 183152  73992 S  19,3  2,3   1:33.48 chrome
         4123 uusser+  20   0 1735948 190024  66932 S  11,6  2,4   2:15.17 chrome 
        


        FireFox (открыта одна вкладка)
          PID USER      PR  NI    VIRT    RES    SHR S  %CPU %MEM     TIME+ COMMAND
        21950 uusser+  20   0 1230656 218700  57428 S  62,8  2,7   0:15.36 firefox   
        


        Печально это всё.
      0
      Не знаю будет ли интересно или нет, но вот geometryangle.tritoncode.com/#!demo
        0
        сильно тормозит, AMD FX 6300, firefox last
        0
        А что будет с шапкой если зайти с мобильного устройства? (самому нет возможности проверить)
          0
          iphone 5s, safari. Даже не тормозит, все хорошо крутится, сайт в целом тоже быстро загрузился.
          +1
          Error creating WebGL context.
          FireFox 31.0, Ubuntu 12.04
            +1
            Нашел еще вот такое msurguy.github.io/triangles/
              0
              415 кб three.js ради шапки? Однако… Я бы уже на голом JS+WebGL сделал, было бы мне это действительно нужно.

              Only users with full accounts can post comments. Log in, please.