简介
Hapi.js 是基于 Node.js 的一款免费、开源、强大的 Web 应用框架，被广泛应用于构建 RESTful API 或者 Web 应用。在前端方面，我们通常使用框架如 React、Vue 等构建单页应用。本文将介绍如何基于 Hapi.js 以及 Three.js 构建一个炫酷的 3D 单页应用。
准备工作
在开始之前，需要先安装 Node.js 和 npm。安装完成之后，我们需要创建一个新的项目并且安装依赖。
mkdir hapi-3d-app && cd hapi-3d-app npm init -y npm install hapi@18.4.0 three@0.111.0 vision@5.4.4 inert@5.1.4
- Hapi.js：我们使用的是 18.4.0 版本
- Three.js：我们使用的是 0.111.0 版本，用于创建 3D 场景
- Vision：hapi 的视图管理插件，可以轻松地向客户端提供一个带有 HTML 内容的响应
- Inert：hapi 的静态文件管理插件，可以管理 css、js 等资源
构建路由与模板
在完成初始搭建之后，我们可以开始构建路由和模板了。在 this.route() 中，我们可以指定路由的路径和处理函数，渲染视图时我们使用了 handlebars 模板引擎，并且在 template/index.html 中引用了 Three.js 的库文件和我们自己的 js 文件。
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------
----- ------ - --- -------------
----- -----
----- -----------
---
-----------------
------------------
----------------
-- ----- -- -
-- ----- -
----- ----
-
--------------
-------- -
----- ---------------------
--
----------- ----------
----- -----------
----------- ------------------
------- ---------
---
--------------
-
------- ------
----- ----
-------- --------- -- -- -
------ ----------------
-
--
-
------- ------
----- -------------------
-------- -
---------- -
----- -------------------- ---------
-
-
-
---
------------------ -- -
-- ----- -
----- ----
-
------------------- ------- -- ------------------ ------
---
----- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- -------------
-------
------
------- --------------------
------- --------------------------------
------- --------------------------------
-------
-------创建 3D 场景
当我们完成路由和模板之后，我们需要开始创建 3D 场景。在 index.js 中，我们创建了一个场景、相机和渲染器，并且向场景中添加了一个立方体，最后启动了渲染器。
-- -------------------- ---- -------
--- ------ ------- --------- -----
--- ----- - ------------------
--- ------ - -------------------
-------
----------
-------- ------ -
----- - --- --------------
------ - --- --------------------------- ----- - ------- ---- ------
----------------- - --
-------- - --- ---------------------
------- ---------------------------------
---------- ----
---
----------------------- --------
----- -------- - --- -------------------- -- ---
----- -------- - --- ------------------------- ------ -------- ---
---- - --- -------------------- ----------
----------------
-
-------- --------- -
-------------------------------
--------------- -- -----
--------------- -- -----
---------------------- --------
-这个时候，我们就可以运行项目并且看到我们的 3D 场景了。
实现 3D 动画
在完成 3D 场景的创建之后，我们可以在上面加上一些动画效果，比如旋转、缩放、位移等。这里以旋转为例，我们可以在 animate() 函数中对物体进行旋转。
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}接入交互事件
在上面的实现中，我们固定了物体的旋转效果，我们也可以通过交互事件来控制物体的动画效果。比如监听鼠标滚轮事件，实现缩放效果，或者监听键盘事件，实现位移效果。
-- -------------------- ---- -------
-------- ------------------- -
-----------------------
----------------- -- ------------ - ----
-
-------- ---------------- -
--- ------- - ----------
------ --------- -
---- ------------
--------------- -- ----
------
---- ----------
--------------- -- ----
------
---- -------------
--------------- -- ----
------
---- ------------
--------------- -- ----
------
-
-
--------------------------------------- ------------- -------
------------------------------------ ---------- -------总结
在本文中，我们介绍了如何基于 Hapi.js 和 Three.js 构建一个炫酷的 3D 单页应用。通过创建路由和模板，我们可以向客户端提供一个带有 3D 场景的 HTML 页面，通过 Three.js 我们可以创建一个和现实世界一样的 3D 空间，并且可以对其进行交互和动画操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64682415968c7c53b0855b8c