[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Какими средствами реализуется 3D(xyz) дизайн
exotica
Доброго времени wink.gif итак вопрос прост, реализация - неизвестна. Гугл приводит не к тем результатам которые хотелось бы видеть. Так что я в замешательстве wink.gif

Вопрос: Когда-то давно мне попадал на глаза сайт, используя навигацию которого образовывался эффект 3Д пространства. Все это выглядело таким образом будто все содержимое помещено в куб с кординатами x y z который имея background black получался бесконечным.

основу элементов страницы составляли белые линии , которые составляли разнообразные геометрические фигуры, которые при использовании навигации перемещались и выглядели объемными


как?!

_____________
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза
sergeiss
Было бы неплохо увидеть пример такого сайта, чтобы разговор был более предметный. Потому что по твоему описанию можно представить разный дизайн. То ли только меню "в пространстве", то ли и данные (картинки, текст) тоже "в пространстве".

Вообще, "в первом приближении", можно использовать canvas из HTML5.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
exotica
user posted image

Вот нашел что то наиболее похожее из изображений.

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

_____________
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза
exotica
Возможно я криво описываю идею но по другому пока не могу ее описать

_____________
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза
McLotos
Т.е. попадая на сайт пользователь оказывается внутри сферы с огромным количество плоскостей и при переходе по ссылкам он просто переворачивает сферу чтобы увидеть другую её секцию. Вариантов на чистом css я не видел, но было что-то такое на js. Хотя думаю что flash сделал бы такое ещё проще.

_____________
программирование - инструмент для решения конкретных задач, любая попытка спроектировать что-то универсальное приведет к провалу.©paul85
В любом случае тебе прийдётся пройти путь изобретения велосипеда, который прошли другие, только причиной твоего изобретения будет непонимание принципов работы велосипеда изобретённого другими людьми.©SlavaFr
jQuery это попытка использовать АН-225 для перевозки зубочистки
sergeiss
Цитата (exotica @ 8.09.2014 - 21:59)
Вот нашел что то наиболее похожее из изображений.

Цитата (exotica @ 8.09.2014 - 22:03)
Возможно я криво описываю идею но по другому пока не могу ее описать

Да вроде как понятно твое описание.

Я бы, в случае необходимости, использовал бы canvas. Потому что с его помощью можно, по сути, использовать векторную графику, и очень динамично всё перерисовывать. Задаешь точку местоположения, задаешь направление взгляда и рисуешь.

PS. Вот примерно также, как в этой теме я делал картинки http://phpforum.su/index.php?showtopic=22888, там ссылка была http://owndesign.ru/tests/rotate/rotate_gr...t.php?id=129812
Разница только в том, что там я рисовал средствами ПХП, но можно то же самое сделать средствами JS. Принцип один и тот же, по своей сути. Есть векторное описание объекта, есть алгоритм построения.
В той картинке, при необходимости, можно задать точку зрения внутри графика (надо только доработать алгоритм отображения). И будет график выглядеть как город вокруг наблюдателя smile.gif

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
bestxp
Тут ни канвас ничего подобное не нужно

все есть в css http://habrahabr.ru/post/151300/ если дополнит js можно еще и эффекты сделать
exotica
Вообщем если я окажусь в больнице без сознания, то знай что мне удалось реализовать запланированное. biggrin.gif
Зачитал я несколько десятков статей, сделал пробные попытки изменения предлагаемых примеров разных работ. Понял что мне п****ц т.к. тредставить себе я могу такую "сотоподобную" структуру в виде сферы от 1 до 1000 ячеек. А вот когда попробывал приблизительно посчитать как это должно выглядеть в коде, даже усомнился в своем желании получить результат. Не говоря уже о онаблюдателе и навигации.

Но не буду отчаиваться, жизнь одна и лучше испустить дух в стремлении, чем другими не лепыми способами biggrin.gif

Итак после беглого осмотра у меня назрел следующий план действий:
  • Закрыться на дне океана в контейнере Подготовить рабочее место в котором ни что не отвлекает
  • Благо гугл есть значит недостающие знания по JS , вектору, и некоторых матиматических формул и функций можно будет незамедлительно почерпнуть оттуда
  • Начну я собственно с построения шестигранных сот в 2Д и отработки возможных полезных событий над 2д макетом
  • Далее постараюсь реализовать 1 ячейку сот в 3Д, попробую сотворить взаимодействие с нею пользователя браузера. Заодно отточу ранее полученные знания.
  • Далее думаю надо будет разбираться как написать функцию построения сферы с максимальным и минимальным количеством ячеек(сот), т.к. 1000 ячеек писать отдельным кодом это глупо, должно быть решение.
  • Результатом должна получиться сфера допустим в ту же 1000 ячеек, гасположив наблюдателя так чтобы он мог наблюдать только 2-3 ячейки одновременно, значит сфера превысит размер монитора в 333-500 раз(!)


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

P/S почему такая большая сфера? Потому что по плану путешествие в сайт начинается с авторизации, и авторизацию пользователь проходит на орбите этой сферы, при успешной авторизации камера переместиться в нутрь и будет выведена главная страница

_____________
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза
exotica
bestxp
есть сомнения что CSS3 не хватит для реализации задуманного

_____________
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза
sergeiss
Цитата (bestxp @ 9.09.2014 - 08:27)
все есть в css http://habrahabr.ru/post/151300/ если дополнит js можно еще и эффекты сделать

По-моему, проще будет застрелиться, чем сделать такую хрень из 1000 шестиугольных сот wink.gif В то же время, на JS с помощью canvas всё ясно и прозрачно делается.
Хотя я и не исключаю, что просто "не умею их готовить".

Впору конкурс объявлять на построение 1000 сот, с возможностью динамического изменения точки зрения и направления зрения... Без ограничения средств: JS, CSS, flash, PHP (а почему бы и не его использовать?) - кто на чём умеет.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

user posted image
McLotos
Цитата (sergeiss @ 9.09.2014 - 11:28)
Впору конкурс объявлять на построение 1000 сот,

давно конкурсов не было. совсем все расслабились =)

_____________
программирование - инструмент для решения конкретных задач, любая попытка спроектировать что-то универсальное приведет к провалу.©paul85
В любом случае тебе прийдётся пройти путь изобретения велосипеда, который прошли другие, только причиной твоего изобретения будет непонимание принципов работы велосипеда изобретённого другими людьми.©SlavaFr
jQuery это попытка использовать АН-225 для перевозки зубочистки
exotica
Рад что оценили задумку. Перерыл уже около сотни статей. Подобной реализации не нашел. Путь будет труден biggrin.gif

_____________
[FAQ]Регистрации пользователей, сохранение в БД
---------------------------------------------------------------------------
Выходя из ванной, вышел из нее два раза
McLotos
Я вспомнил что раньше был классный сайт, в общем там строка поиска, и он передаёт запрос в гугл, а потом получив результат создает огромный куб из страниц которые в результате получил от гугла. там даже можно было выставлять размер, сколько страниц на одной стороне куба нужно показывать

_____________
программирование - инструмент для решения конкретных задач, любая попытка спроектировать что-то универсальное приведет к провалу.©paul85
В любом случае тебе прийдётся пройти путь изобретения велосипеда, который прошли другие, только причиной твоего изобретения будет непонимание принципов работы велосипеда изобретённого другими людьми.©SlavaFr
jQuery это попытка использовать АН-225 для перевозки зубочистки
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2025 Invision Power Services, Inc.