Как объявить материал «маска» с помощью A-Frame.js

Я пытаюсь сделать сцену, где есть «дыра в стене». Как объявить материал «маска» с помощью A-Frame.js

Для этого требуется плоскость с удаленным квадратом, а затем примененный к плоскости материал со следующими свойствами:

  1. Невидимый для камеры
  2. Скрывает от рендеринга любые другие объекты, которые находятся за ним.

Есть пример с three.js здесь, но как я могу сделать это с синтаксис материала a-frame?

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
1 156
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Маска".

Глядя на пример коробочка, чтобы создать иллюзию, Ли создает две коробки.
1) Коробка которая "в проруби"
2) Невидимая коробка чуть большего размера без крышки - для маскировки первой. Верхняя часть снимается, чтобы работать как «отверстие», через которое вы можете увидеть первую коробку.

Как это можно сделать в THREE.js

Маскировка достигается за счет того, что второй блок не может отображать какой-либо цвет. Из примера Ли:

 let material = new THREE.MeshBasicMaterial({
      colorWrite: false;
 })

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

Как это можно сделать в кадре

Боюсь, вы не можете просто сделать материал «плаща» в рамке. Свойство colorWrite не отображается в компоненте material.

Я думаю, что самым простым способом будет создание компонента cloak, который создаст второй блок в THREE.js:

AFRAME.registerComponent('cloak', {
    init: function() {
      let geometry = new THREE.BoxGeometry(1, 1, 1)
      geometry.faces.splice(4, 2) // cut out the top faces 
      let material = new THREE.MeshBasicMaterial({
         colorWrite: false
      })
      let mesh = new THREE.Mesh(geometry, material)
      mesh.scale.set(1.1, 1.1, 1.1)
      this.el.object3D.add(mesh)
    }
})

и используйте его так:

<a-box material = "src: myPic.png; side: back;" cloak>

Проверьте это в этот код. С маркером HIRO у вас должно получиться вот такое отверстие:

Использование моделей или других объектов в качестве «плащей»

Здесь нам нужно применить магию colorWrite=false к каждому узлу/потомку модели.

init: function() {
  // make sure the model is loaded first
  this.el.addEventListener('model-loaded', e=>{
    let mesh = this.el.getObject3D('mesh') // grab the mesh
    if (mesh === undefined) return;        // return if no mesh :(
    mesh.traverse(function(node) {         // traverse through and apply settings
      if (node.isMesh && node.material) {  // make sure the element can be a cloak
        node.material.colorWrite = false
        node.material.needsUpdate = true;
      }
    });
  })
}

Также убедитесь, что плащ отображается перед элементами, которым требуется маскирование:

<a-marker>
  <a-entity gltf-model = "#wall-with-a-hole" cloak-component></a-entity>
  <!-- the other stuff that needs to be cloaked-->
</a-marker

Спасибо, это здорово. Для меня было бы здорово добавить параметр «cloak» к <a-entity> и применить colorWrite:false ко всему объекту. Это возможно?

kthornbloom 20.05.2019 19:38

Привет, я не уверен, чего вы пытаетесь достичь, полезно ли что-нибудь из этого: плащ на сетчатой ​​группе с вырезом лица, плащ на двух объектах включается/выключается каждую секунду

Piotr Adam Milewski 20.05.2019 20:19

У меня уже есть 3D-модель: <a-entity collada-model = "#myshape"></a-entity>, и я просто хочу применить к ней материал плаща. Не могу заставить его работать :/

kthornbloom 20.05.2019 21:37

Можете ли вы предоставить глюк или репозиторий git?

Piotr Adam Milewski 20.05.2019 21:54

Конечно: glitch.com/edit/#!/join/90f266fd-8068-4467-9f91-58838a09aedf Есть модель самолета с "окном", которое я хочу использовать как плащ. Если вы посмотрите в активах, я добавил используемый пользовательский маркер.

kthornbloom 20.05.2019 22:30

Итак, строка 35 - это предмет, который я хочу сделать "плащом".

kthornbloom 21.05.2019 14:05

Я постараюсь проверить это, как только буду дома, ничего, если я сделаю ремикс и немного порежу?

Piotr Adam Milewski 21.05.2019 14:43

Давайте продолжить обсуждение в чате.

kthornbloom 21.05.2019 16:09

Другие вопросы по теме