aframe
장면

소개

매개 변수

비고

장면 구성 요소 연결

구성 요소는 엔티티뿐만 아니라 장면에 첨부 될 수 있습니다. A-Frame에는 몇 가지 구성 요소가 포함되어있어 장면을 구성합니다.

내장 된 장면 사용하기

HTML 컨텐츠와 혼합 된 WebVR 컨텐츠를 사용하려는 경우 (예 : 확장 된 쇼케이스 핵심 컨텐츠를 작성하는 경우), embedded 태그를 사용할 수 있습니다. 이 기능을 사용하면 스마트 폰의 자이로 스코프를 사용하여 360 ° 콘텐츠를 둘러 보거나 컴퓨터를 클릭하고 드래그 할 수 있습니다.

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<div class="vrcontent">
  <a-scene embedded>
    <a-assets>
      <img id="sky" src="https://c1.staticflickr.com/5/4248/34705881091_37b5cf2d28_o.jpg" alt="" />
    </a-assets>

    <a-sky src="#sky"></a-sky>
  </a-scene>
</div>

<div class="overlay">
  <button class="calltoaction">Click me!</button>
</div>

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti animi aliquid architecto quibusdam ipsum, debitis dolor mollitia. Quidem, cumque quos porro doloribus iure dolore illum, qui rem asperiores unde laboriosam.Dolorum tempora quam eveniet ea recusandae deserunt, velit similique. Cum sunt rerum beatae officiis qui sed molestiae et ullam quasi, harum maxime vel, aspernatur quidem molestias. Provident quae illo harum?Sunt expedita, repellat saepe vel accusamus odio. Alias, obcaecati harum earum inventore asperiores quaerat, sit autem nostrum. Sunt illo numquam, temporibus pariatur optio nam, expedita necessitatibus aliquid nemo maxime nisi. Praesentium corporis, ea sunt asperiores, recusandae animi, rem doloribus, possimus cum laudantium libero. Maiores a, iusto aspernatur reiciendis ratione sunt nisi, rem, quasi temporibus ullam non. Neque repellat facilis illo.Quibusdam reiciendis sunt tempora fuga deleniti, molestias temporibus doloremque. Nam sed consequatur consectetur ut tempora a nesciunt, perspiciatis dolorem reprehenderit modi enim at veritatis, excepturi voluptate quod, voluptatibus voluptas. Cum.Debitis, nesciunt, repellat voluptatem sapiente incidunt quidem asperiores reprehenderit vero quisquam placeat sunt voluptatibus velit. Consectetur atque voluptates, repellendus facere sequi ea totam quia quis non incidunt. Soluta, aut, provident. Eos sequi itaque dolorem atque ex id maiores dolor eaque libero iste deserunt ea voluptate minima cum laboriosam, qui animi, fuga suscipit necessitatibus vero, autem blanditiis, totam nulla. Quo, et. Quisquam commodi voluptatum dolorem aspernatur, distinctio et ullam laborum laboriosam quo nisi, praesentium quaerat ab excepturi. Illum harum doloremque, accusantium, beatae culpa assumenda laboriosam, quos mollitia aperiam dolorem praesentium minus!</p>
</div>

디버그

디버그 구성 요소는 구성 요소 간 직렬화를 가능하게합니다.

<a-scene debug></a-scene>

컴포넌트 간 직렬화

기본적으로 성능상의 이유로 A- 프레임은 DOM을 구성 요소 데이터로 업데이트하지 않습니다. 브라우저의 DOM inspector를 열면 값이 아닌 구성 요소 이름 만 표시됩니다.

<a-entity geometry material position rotation></a-entity>

A-Frame은 구성 요소 데이터를 메모리에 저장합니다. DOM을 업데이트하면 내부 구성 요소 데이터를 문자열로 변환하기위한 CPU 시간이 필요합니다. 디버깅 목적으로 DOM 업데이트를보고 싶다면 디버그 구성 요소를 장면에 첨부 할 수 있습니다. 구성 요소는 DOM에 직렬화하기 전에 사용 가능한 디버그 구성 요소를 확인합니다. 그런 다음 DOM에서 구성 요소 데이터를 볼 수 있습니다.

<a-entity geometry="primitive: box" material="color: red" position="1 2 3" rotation="0 180 0"></a-entity>

이 구성 요소가 프로덕션 환경에서 활성화되어 있지 않은지 확인하십시오.

DOM에 수동으로 직렬화

DOM에 대해 수동으로 직렬화하려면 Entity.flushToDOM 또는 Component.flushToDOM을 사용하십시오.

document.querySelector('a-entity').components.position.flushToDOM();  // Flush a component.
document.querySelector('a-entity').flushToDOM();  // Flush an entity.
document.querySelector('a-entity').flushToDOM(true);  // Flush an entity and its children.
document.querySelector('a-scene').flushToDOM(true);  // Flush every entity.

장면에서 컨텐트 스크립트 실행하기

권장되는 방법은 구성 요소를 작성하고이를 장면 요소에 첨부하는 것입니다.
장면과 그 자식은이 구성 요소보다 먼저 초기화됩니다.

AFRAME.registerComponent('do-something', {
  init: function () {
    var sceneEl = this.el;
  }
});

<a-scene do-something></a-scene>

특수한 이유로 인해 전용 구성 요소를 작성하지 않으려면 장면이 초기화 및 연결을 마칠 때까지 기다려야합니다.

var scene = document.querySelector('a-scene');

if (scene.hasLoaded) {
  run();
} else {
  scene.addEventListener('loaded', run);
}

function run () {
  var entity = scene.querySelector('a-entity');
  entity.setAttribute('material', 'color', 'red');
}