Как генерировать простые 3D-изображения в JavaScript - PullRequest
1 голос
/ 25 января 2011

Мне нравится создавать упрощенную версию следующего статического изображения на чистом JavaScript. Он должен работать со старыми браузерами 2010 года, поэтому я не могу дождаться Firefox 4 и WebGL.

Мне не нужны какие-либо причудливые текстуры - задача состоит только в том, чтобы визуализировать, как складывать несколько ящиков.

Packing Order

Кстати: текущее изображение генерируется с помощью POV-Ray, который является избыточным для работы - и не запускается в браузере; -)

Ответы [ 6 ]

4 голосов
/ 18 февраля 2011

Поскольку вы говорите, что вам не нужны причудливые текстуры, я бы порекомендовал для поддержки винтажной графики складывать изображения, как упоминалось ранее.Я сделал для вас пример: http://jsfiddle.net/andersand/5RsEx/

Простая функция состоит в том, чтобы просто иллюстрировать и рисовать сегментированный прямоугольник.Конечно, вам может потребоваться выяснить расположение ящиков, ориентацию и т. Д., Если это является вашей бизнес-целью.

Такой подход может помочь вам с ящиками различной высоты (ось z).Если ваши ящики также различаются по ширине (x и / или y), вам необходимо создать больше изображений в соответствии с вашими потребностями.

3 голосов
/ 17 февраля 2011

Если вы можете обойтись без поддержки IE, или потребовать плагин для пользователей IE, или обеспечить растеризацию на стороне сервера для пользователей IE, вы можете использовать вычисленные файлы SVG.

Вы можете сделать очень простойПроекция вершин прямоугольников, возможно, начнется с простой изометрической проекции, а затем перейдет к перспективной проекции.Используйте для этого простую математическую матрицу 4x4, которая используется в OpenGL, и представляйте трехмерные координаты в виде [x, y, z, w] векторов.Поскольку изображения малы и достаточно просты, вы можете просто обойтись, используя умный порядок рендеринга, то есть снизу вверх, назад к фронту, что гарантирует, что вам не придется беспокоиться о копании в буфере глубины или другом подобномвещи.Должен быть довольно простым в реализации, вам не нужны сторонние библиотеки, и он будет изначально поддерживаться в большинстве современных браузеров.

Хорошо, я подумал, что это интересный эксперимент, поэтому я сделал рабочийверсия того, что я описал выше.Он работает во всех основных браузерах, за исключением IE.Поддержка SVG должна прийти в IE с введением IE9.Я тестировал в Opera, Firefox и Safari под OS X, а также Opera и Firefox под Linux.Возможно, можно добавить поддержку IE, сделав возможным вывод VML, хотя я должен сказать, что я не знаю, разрешает ли IE встраивание VML в XHTML с использованием пространств имен, как я использовал здесь.3D сложенных коробок

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

3 голосов
/ 25 января 2011

Посмотрели ли вы эти библиотеки, они выглядят нужными и могут выполнить вашу работу: Фантастические библиотеки 3D JavaScript , но, похоже, многим из них требуется WebGL.

1 голос
/ 25 января 2011

Поиск поддержки Collada (3D-файл на основе XML) может быть вашим лучшим выбором. Теперь, когда холст приземлился, многие трехмерные процедуры переносятся из Flash Actionscript в Javascript.

Вы можете экспортировать файлы Collada из всех основных 3D-приложений, а также из блендера;)

Попробуйте в качестве примера следующее:

http://www.rozengain.com/blog/2007/11/21/parsing-collada-3d-assets-with-javascript-in-the-html-5-canvas-element/

Если вы хотите повернуть 3D-сцену с помощью JavaScript, вам может потребоваться несколько месяцев, пока не выйдут движки. Скорее всего, они будут зависеть от HTML5.

Существует несколько реализаций WebGL, выполняющих обходы, но они предназначены для самых передовых браузеров и очень нестабильны.

0 голосов
/ 19 февраля 2011

Для сайта Nissan Leaf они используют Raphaël

0 голосов
/ 14 февраля 2011

Проверьте это демо и источник вдохновения:

http://www.nihilogic.dk/labs/canvas3dtexture_0.2/

...