Three.JS | Библиотека Javascript 3D

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

В веб разработке технический стек состоит из нескольких компонентов, которые работают вместе для создания работающего веб-приложения. Обычно это включает в себя языки программирования и библиотеки, используемые для создания интерфейса и серверной части.

Одним из примеров популярного стека является стек «MERN».

  • MongoDB
  • Экспресс
  • Реагировать
  • Node.js

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

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

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

Вот тут-то и вступает в игру Three.JS.

Three.JS - это библиотека Javascript, которая позволяет создавать красивые уникальные интерфейсы с трехмерными элементами, с которыми вы можете взаимодействовать.

Вы можете создавать трехмерные объекты с нуля с помощью кода, отображая его в браузере. Вы также можете создавать и импортировать 3D-модели из таких программ, как Blender или Unity, используя их файлы .obj.

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

Что немного отличается, так это включение сцен, текстур, камер, объектов и рендеринга. В прошлом они обычно предназначались для программ трехмерного моделирования, но, как вы знаете, программирование на Javascript все возможно.

Давайте рассмотрим эти компоненты на высоком уровне.

Если вы впервые используете библиотеку, первое, что вам нужно сделать, это сохранить HTML-файл, который предоставляет Three.JS, а также клонировать их репозиторий GitHub. Это находится в документации их веб-сайта.

Обязательно ПРОЧИТАЙТЕ README.

HTML

<!DOCTYPE html> 
<html>  
  <head>   
    <meta charset="utf-8">   
        <title>My first three.js app</title>   
          <style>    
              body { margin: 0; }    
              canvas { width: 100%; height: 100% }   
            </style>  
          </head>  
          <body>   
              <script src="js/three.js"></script>   
              <script>    
                    // Our Javascript will go here.   
              </script>  
            </body> 
         </html>

Сцена

В нашем примере мы создадим вращающийся куб.

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

Сейчас мы используем камеру PerspectiveCamera. Есть ближняя плоскость отсечки и дальняя плоскость отсечки.

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );  
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );

Первым атрибутом в приведенном выше коде является FOV (поле зрения). Это значение в градусах. Во-вторых, соотношение сторон, и обычно рекомендуется разделить ширину элемента на высоту, чтобы изображение на разных экранах не искажалось. Следующие два атрибута - это дальняя и ближняя плоскости отсечения.

Все, что находится ближе к глазу с близкого расстояния отсечения, не будет отображаться, потому что оно находится слишком близко к камере.

Все, что находится слишком далеко от глаза в поле «Дальнее расстояние отсечения» не отображается, так как оно находится слишком далеко от камеры.

После создания сцены и камеры мы устанавливаем средство визуализации и добавляем его в тело документа HTML. Средство визуализации использует технологию WebGL, которая представляет собой JavaScript API для визуализации высокопроизводительной интерактивной трехмерной и двумерной графики в любом совместимом веб-браузере без использования подключаемых модулей.

Теперь, когда у нас есть возможность отображать объект на странице, давайте создадим куб с помощью BoxGeometry. Мы также можем присвоить кубу цвет материала и сетку, чтобы применить к нему этот материал. Затем он вставляется в сцену (см. Код ниже).

var geometry = new THREE.BoxGeometry( 1, 1, 1 ); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube );  camera.position.z = 5;

Затем мы анимируем куб с помощью функции анимации.

function animate() {
  requestAnimationFrame( animate );  
  renderer.render( scene, camera ); 
} 
animate();

Наконец, мы вращаем куб по осям X и Y и устанавливаем скорость, с которой он вращается.

cube.rotation.x += 0.01; 
cube.rotation.y += 0.01;

Ниже приведен общий код.

<html>  
 <head>   
   <title>My first three.js app</title>   
   <style>    
      body { margin: 0; }    
      canvas { width: 100%; height: 100% }   
   </style>  
  </head>  
  <body>   
      <script src="js/three.js"></script>   
      <script>    
          var scene = new THREE.Scene();    
          var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );     
          var renderer = new THREE.WebGLRenderer();                        renderer.setSize( window.innerWidth, window.innerHeight );       document.body.appendChild( renderer.domElement );     
          var geometry = new THREE.BoxGeometry( 1, 1, 1 );    
          var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );    
          var cube = new THREE.Mesh( geometry, material );    
          scene.add( cube );     
          camera.position.z = 5;     
          var animate = function () {     
              requestAnimationFrame( animate );    
  
              cube.rotation.x += 0.01;     
              cube.rotation.y += 0.01; 
     
              renderer.render( scene, camera );   
        };     
         animate();   
    </script>  
  </body> 
</html>

конечный результат

📝 Прочтите этот рассказ позже в Журнале.

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