WebGL с Three.js - Урок 7

Наши уроки по webgl продолжаются. Сегодня мы расширяем практику загрузки готовых трехмерных моделей. В постоянных условиях нехватки времени всегда удобнее просто загрузить и внедрить готовую модель, чем реализовать ее программно. На данный момент многие загрузчики для three.js уже разработаны. В этой статье мы рассмотрим следующие загрузчики: AWDLoader, BabylonLoader, PDBLoader, PLYLoader, STLLoader, VRMLLoader и VTKLoader. Да, это намного больше сразу, но мы должны закончить с загрузчиками, чтобы начать со следующей темы следующего урока.

Live Demo

подготовка

Прежде всего, нам нужно подготовить скелет (основную сцену) для всех наших загрузчиков. На этом шаге нам нужно создать новый текстовый файл и назовем его «index.html». Вот источник этого:

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>WebGL With Three.js - Lesson 7 - loading three-dimensional models | Script Tutorials</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <script src="js/three.min.js"></script>
        <script src="js/AWDLoader.js"></script>
        <script src="js/BabylonLoader.js"></script>
        <script src="js/PDBLoader.js"></script>
        <script src="js/PLYLoader.js"></script>
        <script src="js/STLLoader.js"></script>
        <script src="js/VRMLLoader.js"></script>
        <script src="js/VTKLoader.js"></script>
        <script src="js/THREEx.WindowResize.js"></script>
        <script src="js/OrbitControls.js"></script>
        <script src="js/stats.min.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>

Как вы заметили, мы подключили все стандартные библиотеки (three.js, WindowResize, OrbitControls и stats) и все загрузчики одновременно. В сегодняшнем примере мы будем загружать все 9 различных типов моделей одновременно.

Подготовка основной сцены webgl

script.js

var lesson7 = {
  scene: null,
  camera: null,
  renderer: null,
  container: null,
  controls: null,
  clock: null,
  stats: null,

  init: function() { // Initialization

    // create main scene
    this.scene = new THREE.Scene();
    this.scene.fog = new THREE.FogExp2(0xcce0ff, 0.0003);

    var SCREEN_WIDTH = window.innerWidth,
        SCREEN_HEIGHT = window.innerHeight;

    // prepare camera
    var VIEW_ANGLE = 60, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
    this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
    this.scene.add(this.camera);
    this.camera.position.set(-27, 15, -25);
    this.camera.lookAt(new THREE.Vector3(0,0,0));

    // prepare renderer
    this.renderer = new THREE.WebGLRenderer({ antialias:true });
    this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    this.renderer.setClearColor(this.scene.fog.color);
    this.renderer.shadowMapEnabled = true;
    this.renderer.shadowMapSoft = true;

    // prepare container
    this.container = document.createElement('div');
    document.body.appendChild(this.container);
    this.container.appendChild(this.renderer.domElement);

    // events
    THREEx.WindowResize(this.renderer, this.camera);

    // prepare controls (OrbitControls)
    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
    this.controls.target = new THREE.Vector3(0, 0, 0);
    this.controls.maxDistance = 3000;

    // prepare clock
    this.clock = new THREE.Clock();

    // prepare stats
    this.stats = new Stats();
    this.stats.domElement.style.position = 'absolute';
    this.stats.domElement.style.left = '50px';
    this.stats.domElement.style.bottom = '50px';
    this.stats.domElement.style.zIndex = 1;
    this.container.appendChild( this.stats.domElement );

    this.scene.add( new THREE.AmbientLight(0x606060) );

    // light
    var dirLight = new THREE.DirectionalLight(0xffffff);
    dirLight.position.set(200, 200, 1000).normalize();
    this.camera.add(dirLight);
    this.camera.add(dirLight.target);

    // load models
    this.loadModels();
  },
  loadModels: function() {

    // here we will load all the models ...
  }
};

// Animate the scene
function animate() {
  requestAnimationFrame(animate);
  render();
  update();
}

// Update controls and stats
function update() {
  lesson7.controls.update(lesson7.clock.getDelta());
  lesson7.stats.update();
}

// Render the scene
function render() {
  if (lesson7.renderer) {
    lesson7.renderer.render(lesson7.scene, lesson7.camera);
  }
}

// Initialize lesson on page load
function initializeLesson() {
  lesson7.init();
  animate();
}

if (window.addEventListener)
  window.addEventListener('load', initializeLesson, false);
else if (window.attachEvent)
  window.attachEvent('onload', initializeLesson);
else window.onload = initializeLesson;

С помощью этого кода мы создали пустую сцену (со слабым туманом), камеру, рендер, контроллер, статистику, свет и землю. Мы также подготовили еще одну функцию «loadModels», куда мы поместим все наши загрузчики.

AWDLoader

О AWD — AWD — это двоичный формат файлов для 3D-сцен, объектов и связанных данных. Его основное использование — с движком Away3D, но любой кодер / декодер, который соответствует открытой спецификации, может работать с файлами AWD. Спецификация формата файла и набор инструментов для работы с файлами AWD поддерживаются командой разработчиков Away3D. AWD разработан таким образом, чтобы он был легким, быстрым и простым для анализа, а также расширяемым как для пользовательских приложений, так и для будущих версий формата файла, при этом оставаясь совместимым как с прямой, так и с обратной совместимостью.

Для загрузки файлов AWD в three.js вы можете использовать следующий код:

// prepare AWD loader and load the model
var oAwdLoader = new THREE.AWDLoader();
oAwdLoader.load('models/sample.awd', function(object) {

  object.position.set(-10, 1, -15);
  object.scale.set(0.1, 0.1, 0.1);
  lesson7.scene.add(object);
});

BabylonLoader

О программе — Babylon.js использует формат файла JSON для описания сцен.

Для загрузки файлов babylon в three.js вы можете использовать следующий код:

// prepare Babylon loader and load the model
var oBabylonLoader = new THREE.BabylonLoader();
oBabylonLoader.load('models/rabbit.babylon', function(object) {

  // apply custom material
  object.traverse( function(child) {
    if (child instanceof THREE.Mesh) {

      // apply custom material (texture)
      var textureD = THREE.ImageUtils.loadTexture('models/0.jpg', undefined, function() {

        child.material = new THREE.MeshLambertMaterial({  map: textureD });
        child.position.set(-10, 0, -5);
        child.scale.set(0.1, 0.1, 0.1);
        lesson7.scene.add(child);
      });
      textureD.needsUpdate = true;
      textureD.magFilter = THREE.NearestFilter;
      textureD.repeat.set(1, 1);
      textureD.wrapS = textureD.wrapT = THREE.RepeatWrapping;
      textureD.anisotropy = 16;
    }
  });
});

PDBLoader

О — Банк данных белка (PDB) является хранилищем для трехмерных структурных данных крупных биологических молекул, таких как белки и нуклеиновые кислоты.

Для загрузки файлов PDB в three.js вы можете использовать следующий код:

// prepare PDB loader and load the model
var oPdbLoader = new THREE.PDBLoader();
oPdbLoader.load('models/caf2.pdb', function(geometry, geometryBonds) {

  var group = new THREE.Object3D();

  var i = 0;
  geometry.vertices.forEach(function (position) {
    var sphere = new THREE.SphereGeometry(0.3);
    var material = new THREE.MeshPhongMaterial({color: geometry.colors[i++]});
    var mesh = new THREE.Mesh(sphere, material);
    mesh.position.copy(position);
    group.add(mesh);
  });
  for (var j = 0; j < geometryBonds.vertices.length; j += 2) {
    var path = new THREE.SplineCurve3([geometryBonds.vertices[j], geometryBonds.vertices[j + 1]]);
    var tube = new THREE.TubeGeometry(path, 1, 0.05)
    var material = new THREE.MeshPhongMaterial({color: 0xcccccc});
    var mesh = new THREE.Mesh(tube, material);
    group.add(mesh);
  }

  group.position.set(20, 5, -20);
  group.scale.set(2, 2, 2);
  lesson7.scene.add(group);
});

PLYLoader

О программе — PLY — это компьютерный формат файла, известный как формат файла Polygon или Stanford Triangle Format. Формат был в основном предназначен для хранения трехмерных данных с 3D-сканеров. Он поддерживает относительно простое описание одного объекта в виде списка номинально плоских многоугольников. Могут быть сохранены различные свойства, включая: цвет и прозрачность, нормали поверхности, координаты текстуры и значения достоверности данных. Формат позволяет иметь разные свойства для передней и задней части многоугольника.

Для загрузки файлов PLY в three.js вы можете использовать следующий код:

// prepare PLY loader and load the model
var oPlyLoader = new THREE.PLYLoader();
oPlyLoader.load('models/F117.ply', function(geometry) {

  var material = new THREE.MeshBasicMaterial({color: 0xff4444});
  var mesh = new THREE.Mesh(geometry, material);
  mesh.rotation.set( - Math.PI / 2 - 0.2, 0, - Math.PI / 2 + 0.2);
  mesh.position.set(-20, 15, 10);
  mesh.scale.set(2, 2, 2);
  lesson7.scene.add(mesh);
});

STLLoader

О программе — STL (STereoLithography) — это формат файла, встроенный в программное обеспечение CAD для стереолитографии, созданное 3D Systems. STL также известен как стандартный язык тесселяции. Этот формат файла поддерживается многими другими программными пакетами; это широко используется для быстрого создания прототипов и автоматизированного производства. Файлы STL описывают только геометрию поверхности трехмерного объекта без какого-либо представления цвета, текстуры или других общих атрибутов модели САПР. Формат STL определяет как ASCII, так и двоичные представления. Бинарные файлы более распространены, так как они более компактны.

Для загрузки файлов STL в three.js вы можете использовать следующий код:

// prepare STL loader and load the model
var oStlLoader = new THREE.STLLoader();
oStlLoader.load('models/piano.stl', function(geometry) {

  var material = new THREE.MeshNormalMaterial();
  var mesh = new THREE.Mesh(geometry, material);
  mesh.rotation.set( - Math.PI / 2, 0, Math.PI / 2);
  mesh.position.set(-10, 0, 10);
  mesh.scale.set(2, 2, 2);
  lesson7.scene.add(mesh);
});

VRMLLoader

О программе — VRML — это формат текстового файла, в котором, например, можно указать вершины и ребра для трехмерного многоугольника, а также цвет поверхности, текстуры с УФ-отображением, блеск, прозрачность и т. Д. URL-адреса могут быть связаны с графическими компонентами, чтобы веб-браузер мог получить веб-страницу или новый файл VRML из Интернета, когда пользователь нажимает на определенный графический компонент. Анимации, звуки, освещение и другие аспекты виртуального мира могут взаимодействовать с пользователем или могут запускаться внешними событиями, такими как таймеры. Специальный Script Node позволяет добавлять программный код (например, написанный на Java или ECMAScript) в файл VRML.

Для загрузки файлов WRL в three.js вы можете использовать следующий код:

// prepare WRL loader and load the model
var oWrlLoader = new THREE.VRMLLoader();
oWrlLoader.load('models/house.wrl', function(geometry) {
  lesson7.scene.add(geometry);
});

VTKLoader

Около— Visualization Toolkit (VTK) — это свободно доступная программная система с открытым исходным кодом для трехмерной компьютерной графики, обработки изображений и визуализации. VTK состоит из библиотеки классов C ++ и нескольких интерпретируемых уровней интерфейса, включая Tcl / Tk, Java и Python. Kitware, команда которой создала и продолжает расширять инструментарий, предлагает профессиональную поддержку и консультационные услуги для ВТК. VTK поддерживает широкий спектр алгоритмов визуализации, включая: скалярные, векторные, тензорные, текстурные и объемные методы; и передовые методы моделирования, такие как: неявное моделирование, сокращение полигонов, сглаживание сетки, вырезание, контур и триангуляция Делоне. ВТК имеет обширную инфраструктуру визуализации информации, имеет набор виджетов трехмерного взаимодействия, поддерживает параллельную обработку и интегрируется с различными базами данных с помощью наборов инструментов GUI, таких как Qt и Tk.VTK является кроссплатформенным и работает на платформах Linux, Windows, Mac и Unix. VTK также включает вспомогательную поддержку для 3D-виджетов взаимодействия, двух- и трехмерных аннотаций и параллельных вычислений. По своей сути VTK реализован как инструментарий C ++, требующий от пользователей создания приложений путем объединения различных объектов в приложение. Система также поддерживает автоматическую упаковку ядра C ++ в Python, Java и Tcl, так что приложения VTK также могут быть написаны с использованием этих интерпретируемых языков программирования.Система также поддерживает автоматическую упаковку ядра C ++ в Python, Java и Tcl, так что приложения VTK также могут быть написаны с использованием этих интерпретируемых языков программирования.Система также поддерживает автоматическую упаковку ядра C ++ в Python, Java и Tcl, так что приложения VTK также могут быть написаны с использованием этих интерпретируемых языков программирования.

Для загрузки файлов VTK в three.js вы можете использовать следующий код:

// prepare VTK loader and load the model
var oVtkLoader = new THREE.VTKLoader();
oVtkLoader.load('models/bunny.vtk', function(geometry) {

  geometry.computeVertexNormals();

  var material = new THREE.MeshLambertMaterial( { color:0xff4444, side: THREE.DoubleSide } );
  var mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(0, 0, -15);
  mesh.scale.set(20, 20, 20);
  lesson7.scene.add(mesh);
});

WebGL с Three.js — Урок 7

подготовка

Подготовка основной сцены webgl

script.js

AWDLoader

BabylonLoader

PDBLoader

PLYLoader

STLLoader

VRMLLoader

VTKLoader

Категории

Последние статьи

Рефакторинг Hudson God Class

Альтернативы синтаксиса Java лямбда

Morphia и MongoDB: развивающиеся структуры документов

OpenShift Express: развертывание приложения Java EE (с поддержкой AS7)

Интеграция jqGrid, REST, AJAX и Spring MVC