Langkau ke kandungan

Pemasangan ​

SenangStart XR ialah rangka kerja GUI yang dibina di atas A-Frame. Ia disediakan sebagai satu berkas pelayar yang mendaftarkan 18 komponen sxr-* dan primitif HTML a-sxr-* yang sepadan pada objek global AFRAME.

Versi A-Frame yang disokong ialah 1.7.x dan 1.8.x (kebergantungan rakan >=1.7.0 <1.9.0). Lihat Versi A-Frame.

Binaan setempat ​

Sertakan A-Frame, kemudian berkas SenangStart XR, dalam <head> halaman anda:

html
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
<!-- local build -->
<script src="dist/senangstart-xr.js"></script>

Kemudian gunakan primitif a-sxr-* dalam <a-scene> anda (lihat bahagian Komponen):

html
<a-scene>
  <a-sxr-flex-container
    flex-direction="column" justify-content="center" align-items="center"
    width="4" height="3" opacity="0"
    position="0 1.6 -2">
    <a-sxr-button width="2" height="0.6" value="Hello XR"
      onclick="handleClick"></a-sxr-button>
  </a-sxr-flex-container>
</a-scene>

Pasang melalui npm ​

bash
npm install @bookklik/senangstart-xr

A-Frame ialah kebergantungan rakan (julat disokong: >=1.7.0 <1.9.0) dan mesti dimuatkan pada halaman terlebih dahulu. Pakej menyertakan berkas binaan dan fon dalam dist/ / akar pakej; rujuk dist/senangstart-xr.min.js melalui tag <script> (berkas mendaftarkan komponennya pada objek global AFRAME dan tidak boleh dimuatkan melalui require()):

html
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
<script src="node_modules/@bookklik/senangstart-xr/dist/senangstart-xr.min.js"></script>

Penggunaan CDN ​

html
<script src="https://unpkg.com/@bookklik/senangstart-xr@2.1.0/dist/senangstart-xr.min.js"></script>

Tetapkan versi CDN

Pengalihan unpkg/jsdelivr bagi URL tanpa versi boleh menyediakan keluaran yang berbeza daripada keluaran yang anda uji.

Jalankan contoh pameran ​

Adegan demo sedia guna disertakan di examples/index.html. Mulakan pelayan pembangunan yang disertakan:

bash
npm start

Kemudian buka http://localhost:8080 dalam pelayar untuk melihat widget berfungsi.

Langkah seterusnya ​