Cardboard VR Display 是一款基于 Google Cardboard 设计的 Virtual Reality（虚拟现实）眼镜。这个 npm 包为前端开发者提供了一个便捷地创建 VR 体验的方式。
安装 cardboard-vr-display
使用npm安装 cardboard-vr-display 包：
npm install --save cardboard-vr-display
引入 cardboard-vr-display
在您的 HTML 文件中，需要添加以下标签引入 cardboard-vr-display：
<script src="./node_modules/cardboard-vr-display/cardboard.js"></script>
创建您的 VR 体验
要创建一个 VR 体验，请完成以下步骤：
- 在您的 HTML 文件中，创建一个包含层叠的 3D 元素的容器。
<div class="viewport">
<div class="layer1">
<!-- 3D 元素放置在这里 -->
</div>
</div>- 使用 cardboard-vr-display 包提供的
Cardboard.VRDisplay对象，创建一个虚拟现实场景并显示在屏幕上。
-- -------------------- ---- -------
--- ----- - --- ---------------------
--- ------------
------- --
-------- ----------
----------- --
------------ ----
------------- ---
------------- ----
--------------- -----
---------- -
--
---这个代码块中的 el 是指您的容器元素（.viewport），layers 是 您的 3D 元素层的属性 和它在 VR 相对距离。
属性说明：
element: 您的 3D 元素的属性（.layer1）。screenLeft: 屏幕左边缘在场景中的位置。screenWidth: 屏幕在场景中的宽度。screenCenter: 屏幕底部在场景中的位置。screenHeight: 屏幕在场景中的高度。screenDistance: 屏幕与用户眼睛的距离。eyeOffset: 用户眼睛之间的距离。
- 设置场景更新的回调函数。
scene.setFrameDataCallback(function () {
// 定义场景的每一帧如何更新
});场景可能需要在每一帧更新，因为这个场景是用 JavaScript 构建的。在这个回调函数中，您可以更新场景中的元素或动态定义它。
示例
-- -------------------- ---- -------
------
---------------- -- ------- ---------------
------- ----------------------------------------------------------------
-------
------
---- -----------------
---- ---------------
--------- ----------
------- -- - -- --------------
-- -------------- ------
------
------
--------
--- ----- - --- ---------------------
--- ------------
------- --
-------- ----------
----------- --
------------ ----
------------- ---
------------- ----
--------------- -----
---------- -
--
---
----------------------------------- -- -
-- ------------
--- ---- - -----------------------------
-------------------- - ---------- - --------------------- - -- - -------
---
---------
-------这个示例中，我们在<div class="viewport">之内使用了<div class="layer1">作为需要呈现为 3D 的元素。
在场景更新的回调函数中，我们使用了 getAngles().yaw，它表示相机当前绕 Y 轴的角度。然后我们使用 rotateY() 函数将标题通过 -1 倍角度旋转。
结论
cardboard-vr-display npm 包提供了一个简单的方法来创建 VR 体验，给前端开发者更多工具和灵活性。使用本文介绍的步骤创建 VR 体验，并在每一帧中更新场景元素，让您的 VR 体验更加生动。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaf73b5cbfe1ea0611043