Three JS Editor — еще минималистичный, но очень полезный редактор 3D графики, на основе WebGL и библиотеки ThreeJS.
Three.js — легковесная кросс-браузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений.

image
Кликабельно

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

Цикл работы с ThreeJS редактором
1. Сразу работать в ThreeJS редакторе. Метод хорош только если ваши объекты не очень сложные, то есть если объекты ThreeJS редактора вас устраивают.

2. Использовать дополнительные редакторы для создания более сложных фактур (Blender, Unity). Потом их выгрузка и загрузка в ThreeJS Editor, корректировка и экспорт готового проекта, уже через ThreeEditor.

Картинка к статье сделана скорее всего так, методом использования объектов из других редакторов.

Настройка редактора
Настроек на так уж и много

  • Можно выбрать тему
  • Автосохранение
  • Показывать сетку или нет
  • Сохранение истории действий
  • Выбор рендера (Обработчика графики)


Выгрузка проекта
Выгрузка делается очень просто, в меню. Основная часть проекта выгружается в json-файле. Прошу заметить что все текстуры (картинки), выгружаются не в jpg или png, а в формате base64, прямо в файле app.json. После выгрузки лучше это заменить на прямые ссылки к картинкам.

Работа в коде
Библиотека Three.js определяет класс THREE, инкапсулирующий объект сцены, камеры, освещения, материалов, текстур и др. Все операции для манипуляции графикой после выгрузки, нужно делать в файле app.js.

Проект нужно запускать через локальный сервер или через LivePreview в редакторе кода Brackets.

В статья специально не конкретизируются кнопки и пункты меню, так как редактор развивается и они могут менять свое место положение, а сам интерфейс интуитивен.

Редактор уже пригоден для работы.

Пример:

camera.position.z = 5;
camera.rotation.z = 5;

var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var object = new THREE.Mesh( geometry, material );

scene.add( object );
scene.remove( object );


Ссылки:
http://threejs.org/editor/
https://threejsdesktop.github.io
http://threejs.org
Поделиться с друзьями
-->

Комментарии (6)


  1. napa3um
    08.08.2016 13:53
    +2

    Вы забыли перевести текст на русский язык.


    1. TheShock
      08.08.2016 14:02
      -3

      Согласен. А кое-где излишне перевели. Например, это:

      Выгрузка делается очень просто, в меню. Основная часть проекта выгружается в json-файле. Прошу заметить что все текстуры (картинки), выгружаются не в jpg или png, а в формате base64, прямо в файле app.json. После выгрузки лучше это заменить на прямые ссылки к картинкам

      Трижды перечитал, но так и не понял, что тут написано. Во-первых, не знаю, что такое «выгрузка». Во-вторых, сформулировано просто дико.


      1. TheShock
        08.08.2016 14:04
        -3

        Ох, дошло с четвертого раза. Это «экспорт». Непонятно, правда, зачем эти понты с «выгрузкой», если «экспорт» тоже в русском языке есть.


  1. Flakky
    11.08.2016 22:26

    Не понятно, зачем статья. В особенности при таком переводе.

    Если уж пишите о чем-то, то пишите либо о своем опыте, либо как обзор. Ну и с нормальным переводом. А то эта статья из разряда «Вот есть такой-то редактор. Просто оставлю это здесь.»


    1. dimapopov
      15.08.2016 11:43

      Я один из разработчиков редактора, https://threejsdesktop.github.io, это моя кастомная версия для десктопа.
      Цель статьи просто показать что такое есть.


      1. Flakky
        15.08.2016 12:38

        Я к тому, что это какой-то кривой перевод. Хотелось бы более развернутый обзор.

        Более того, в таком случае расскажите, в чем преимущество перед обычным ThreeJS редактором…

        Больше, больше инфы :) Хабр это все таки не рекламная площадка (хотя иногда кажется, что так и есть) :)