Блог

моя ссылка: http://dl.dropbox.com/u/7727742/playlistsite6/index5.html

У меня есть 3d-куб, использующий вариант демо-версии zachstronaut (ссылка: http://www.zachstronaut.com/lab/galaxy-box / ). Он использует javascript, translate3d, scale3d и т.д…

Я пытался присвоить разные значения z-index в файле css, но безуспешно. Я могу получить доступ к объектам за пределами куба (вы можете видеть это с помощью эффекта наведения курсора мыши), но не к объектам внутри куба. У меня есть подозрение, что это потому, что он не выполняет функцию типа z-sort, такую как pre3d.js. Мне было интересно, может ли кто-нибудь предложить некоторое представление о том, где мне следует искать решение.

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

Спасибо!

Редактировать:

Тестировалось только в safari и Chrome dev

Webkit игнорирует z-индексы для всего, что определено translate3d, как и должно быть по логике. z-index предназначен для 2D-мира, это все равно что взять пачку бумаги и сказать «эта сверху» — у вас все еще есть плоская поверхность. К сожалению, если вы хотите иметь возможность выбрать одну из «звездочек» внутри вашего окна, вам почти не повезло, поскольку вы используете HTML-узлы.

Обычный способ сделать это — использовать click-map — в основном каждый объект визуализируется дважды. Один раз в обычном режиме и один раз в одном цвете без растушевки и т.д. Второй рендеринг никогда не отображается и просто используется, чтобы сообщить, на что нажал пользователь. Вы получаете цвет в том месте, где они щелкнули, и этот цвет соответствует определенному объекту. Если бы вы использовали canvas, вы бы сделали это таким образом и просто изменили порядок рендеринга при 2-м рендеринге.

Поскольку вы используете HTML-узлы, вы не можете этого сделать. У вас есть несколько вариантов:

• Вы можете вычислить, какая звезда находится под мышью, при перемещении мышью на основе поворота области просмотра и положения звезды по x / y / z
• вы можете попробовать описанный выше метод, наложив идентичный рендеринг без куба и с непрозрачностью звездочек 0%. Каждая звезда в вашем новом рендеринге будет сопоставляться со звездой в вашем существующем, и у вас будет простое обнаружение наведения курсора мыши.

Опубликуйте результаты! 🙂

Прежде всего, я рад, что вы нашли мою демонстрацию интересной!

Вам не повезет, если вы попытаетесь выполнить наведение курсора мыши или зафиксировать событие щелчка на объектах внутри 3D CSS3 cube по той же причине, по которой вам не повезет с захватом событий наведения курсора мыши на div под другим div… в HTML все события DOM отправляются на самый верхний узел DOM. Если один div перекрывает другой div, вы не можете щелкнуть тот, который находится под ним. Все, что находится внутри 3D cube, находится «под» другим DOM-узлом.

Все еще сложнее, потому что вы берете объекты в 3D-пространстве и просите пользователя взаимодействовать с ними на 2D-плоскости (окно браузера), используя 2D-устройство ввода (мышь).

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

Извините, я не смог больше помочь… HTML здесь нас немного подводит. Добро пожаловать в the bleeding edge!