Javascript - Three.js vs Pixi.js vs D3.js - Stack Overflow на русском

Опубликовано: 05.09.2018

видео javascript - Three.js vs Pixi.js vs D3.js - Stack Overflow на русском

Augmented Reality for JavaScript Developers :Discussing Three.js & Setting up Project|packtpub.com

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



Решайте, какой из них больше подходит для ваших задач.

Three.js

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


eLearning: Three Storyline JavaScript Motion Examples

Достаточно низкоуровневая для реализации самых смелых проектов. Есть возможность использовать непосредственно WebGL. В зависимости от ваших предпочтений, концентрироваться на графических процессах и железе (WebGL) или анимации и самой графике (Threejs).

Достаточно кроссбраузерна.

var camera, scene, renderer; var geometry, material, mesh; init(); animate(); function init() { camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10); camera.position.z = 1; scene = new THREE.Scene(); geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2); material = new THREE.MeshNormalMaterial(); mesh = new THREE.Mesh(geometry, material); scene.add(mesh); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } function animate() { requestAnimationFrame(animate); mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render(scene, camera); } body { margin: 0; } <script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

Офф. сайт примеров

Pixi.js

Фреймворк для , но не движок для разработки игр, это обёртка для WebGL, надо отдельно подключать нужные библиотеки (могут быть слабо поддерживаемые). Из сильных сторон скорость, возможно создавать мобильные аппликации.

Пошаговые туториалы с подробными объяснениями, как что работает. Кроссбраузерная. Дает возможность манипулировать cпрайтами (чаще это растровыми изображениями), лёгкость в подгрузке (изображений, JSON объектов и т.д.), гибкие структуры контейнеров.

var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb}); document.body.appendChild(app.view); // create a new Sprite from an image path var bunny = PIXI.Sprite.fromImage('//picsum.photos/50/50') // center the sprite's anchor point bunny.anchor.set(0.5); // move the sprite to the center of the screen bunny.x = app.screen.width / 2; bunny.y = app.screen.height / 2; app.stage.addChild(bunny); // Listen for animate update app.ticker.add(function(delta) { // just for fun, let's rotate mr rabbit a little // delta is 1 if running at 100% performance // creates frame-independent transformation bunny.rotation += 0.1 * delta; }); <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js"></script>

Офф. сайт примеров

D3.js

Библиотека для графической визуализации, в основном визуализация данных. Имеет модули под определённые задачи. Детализированная векторная графика (SVG), также поддерживает JSON, CSV, geoJSON. Имеет встроенные JS функции для манипулирования объектами.

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

var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), transform = d3.zoomIdentity;; var points = d3.range(2000).map(phyllotaxis(10)); var g = svg.append("g"); g.selectAll("circle") .data(points) .enter().append("circle") .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .attr("r", 2.5) .call(d3.drag() .on("drag", dragged)); svg.call(d3.zoom() .scaleExtent([1 / 2, 8]) .on("zoom", zoomed)); function zoomed() { g.attr("transform", d3.event.transform); } function dragged(d) { d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y); } function phyllotaxis(radius) { var theta = Math.PI * (3 - Math.sqrt(5)); return function(i) { var r = radius * Math.sqrt(i), a = theta * i; return { x: width / 2 + r * Math.cos(a), y: height / 2 + r * Math.sin(a) }; }; } <!-------- https://bl.ocks.org/mbostock/3127661b6f13f9316be745e77fdfb084 --------> <svg width="960" height="500"></svg> <!-------- Можно скролить картинку --------> <script src="https://d3js.org/d3.v4.min.js"></script>

Список примеров

Детальное сравнение Pixi.js vs Three.js