Three JS Editor — еще минималистичный, но очень полезный редактор 3D графики, на основе WebGL и библиотеки ThreeJS.
Three.js — легковесная кросс-браузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений.
Кликабельно
При работе с библиотекой 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.
В статья специально не конкретизируются кнопки и пункты меню, так как редактор развивается и они могут менять свое место положение, а сам интерфейс интуитивен.
Редактор уже пригоден для работы.
Пример:
Ссылки:
http://threejs.org/editor/
https://threejsdesktop.github.io
http://threejs.org
Three.js — легковесная кросс-браузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений.
Кликабельно
При работе с библиотекой 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
