A-FRAME(초보자 안내서)

4814 단어 frameworkhtmljavascriptaframe

소개


여전히 이 아름다운 인터넷 세계에 적응하고 있는 사람들에게 인터넷 개발은 가장 번영하고 잠재력이 있는 시장 중의 하나이다.개발자들이 인공지능, 머신러닝, 가상현실에 점점 관심을 가지면서이 기술은 틀림없이 미래에 보답을 가져올 것이다.그래서 오늘 우리는 이런 기술 중의 하나인 가상현실, 즉 VR을 바탕으로 배울 것이다.A프레임워크를 사용하여 가상현실 환경을 구축합니다.

A 프레임


A-Frame은 가상 현실 체험을 구축하는 데 사용되는 웹 프레임워크입니다.A-Frame은 HTML을 기반으로 하여 쉽게 시작할 수 있습니다.그러나 A-Frame은 3D 장면도나 표기 언어가 아니다.그 핵심은 강력한 실체 구성 요소 프레임워크로 성명성, 확장성, 조합 가능한 3층 구조를 제공한다.js.
처음에는 모질라에서 구상한 것으로 현재는 슈퍼미디어에서 A-Frame의 공동 창조자가 유지하고 있으며 A-Frame은 가상현실 내용을 개발하는 간단하고 강력한 방법으로 개발되었다.독립된 개원 프로젝트로서 A-Frame은 이미 가장 큰 가상 현실 지역사회 중의 하나로 발전했다.소스 - A 프레임

요구 사항


  • Brackets
  • 이것은 간단하고 깨끗한 텍스트 편집기로서 우리가 본고에서 사용할 기능을 제공한다.
  • 이것은 한 사이트의 실시간 미리보기 기능이 있어 환경을 설정할 때 매우 유용하다.
  • 내장 서버가 있기 때문에 외부 데이터베이스 프로그램이 필요하지 않습니다.
  • 웹 브라우저
  • HTML 5를 지원하는 웹 브라우저는 매우 좋습니다.

    • 입문


    이것은 매우 기본적일 것이다. 왜냐하면 이것은 초보자이기 때문에 누가 a 프레임워크를 사용하기 시작하려고 하는가.이를 위해, 우리는 코드를 작성할 것이며, 나는 모든 절차를 설명할 것이다.
    <html>
  <head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>
    위에서 우리는 기본적으로 HTML 파일의 기본 윤곽과 다른 표시를 가지고 있다.걱정하지 마라, 나는 그것의 한 걸음 한 걸음 설명할 것이다.
    <script></script>
  • 우리는 이미 A-frame의 스크립트를 가져와서 그들의 사이트에서 찾을 수 있다.최신 버전의 A-frame을 사용해야 합니다.
    • <a-scene></a-scene>
  • 이것은 라벨로 사이트에서 볼 수 있는 모든 요소를 포함한다.
  • 이 태그를 HTML 파일의 본문 태그로 볼 수 있습니다.
    • <a-box></a-box> and its attributes
  • 이것은 A-frame 프레임워크의 HTML 표시입니다. 이것은 당신에게 더욱 정확한 3차원 상자를 제공할 것입니다.
  • 위치, 회전 및 색상은
  • 위치 - 위치는 상자 또는 그 어떠한 물체의 좌표를 나타낸다.x, y, z축은 각각 3개의 값을 얻는다.
  • 회전 - 위치와 같고 x, y, z축은 3개의 값을 얻는다.
  • 색상 - 이 속성의 이름은 직사각형 음영처리됨을 나타냅니다.
    • <a-sky></a-sky>
  • 환경을 만드는 데 사용됩니다.환경은 색상과 이미지로 만들 수 있으며 대부분의 개발자는 360° 이미지를 사용합니다.

    • 처단하다


    프로그램을 작성한 후 필요한 위치에 저장해야 합니다.화면 오른쪽 상단의 실시간 미리 보기 단추를 누르기만 하면 됩니다.

    기본 웹 브라우저에서 웹 사이트의 외관을 보여 주는 새 창을 열 것입니다.이것은 코드에서 변경할 때 변경되는 실시간 미리 보기 창입니다.이것은 실시간으로 위치, 회전 및 기타 속성을 변경할 수 있도록 도와줍니다. 한 번 또 한 번 저장하고 새로 고칠 필요가 없습니다.
    출력

    만약 네가 모든 것을 잘했다면, 너는 결국 위의 출력을 얻을 수 있을 것이다.
    만약 그것이 새로 고침을 표시하지 않았다면, 코드가 정확하다면, 그것은 틀림없이 나타날 것이다.

    마지막 메모


    이 프레임워크를 사용하면 많은 일을 할 수 있습니다.너는 그들의 사이트에서 많은 예를 볼 수 있는데, 이것은 더욱 많은 것을 이해하는 데 도움이 될 것이다.
    이 테마에 대한 항목을 보려면github에 있는 저장소를 방문하십시오 - [https://github.com/surajsrv11/A-FRAME-]
    gitmerge 공식 소스 코드를 로컬 서버로
    Get 요청과 Post 요청의 차이점

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage