跳到主要内容

起步

信息

本教程不依赖任何前端框架，完整源码示例 JavaScript | TypeScript。

本章你可以学到
  • 准备开发环境。
  • 如何引入 Five SDK。
  • 在屏幕中渲染一个三维空间。

准备工作​

开发环境​

  • 你需要准备一个现代浏览器。
信息

Five 的浏览器支持如下，请自行选择一个你熟悉的：

SafariSafari on iOSChromeChrome for AndroidEdgeFirefox
>= 9>= 9>= 49>= 93>= 13>= 45
  • 你需要安装 Node.js，并且 Node.js 版本尽量 >= 12.x，以规避历史遗留的兼容问题。

使用开发构建工具​

本示例通过 Vite 初始化开发环境。你可以通过下方代码自行初始化。

	# npm 6.x
	npm create vite@latest my-vue-app --template vanilla

	# npm 7+, extra double-dash is needed:
	npm create vite@latest my-vue-app -- --template vanilla

在 src 下建立本次教程的目录 src/0.getting-started。

每一个教程均会创建一个新目录作为记录，便于总结和查找。当课程结束你会得到:

src
├── 0.getting-started
├── 1.displaying-work
├── 2.knowing-state
...

这样的目录结构。完整代码样例也是这样的目录结构，你可以随时参考。

提示

如果你熟悉其他的开发构建工具如 Webpack ｜ Snowpack ｜ parcel 你也可以使用他们。

创建 HTML 文件​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>起步 | Getting started</title>
    <!-- highlight-start -->
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #app {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
    <!-- highlight-end -->
  </head>
  <body>
    <!-- highlight-start -->
    <div id="app"></div>
    <script type="module" src="./index"></script>
    <!-- highlight-end -->
  </body>
</html>
信息

使用直接引入 <script type="module" src="./index"></script> 是 Vite 的特征， 如果你使用其他开发构建工具请自行处理代码引入和入口文件。 比如 Webpack 下使用 HtmlWebpackPlugin 等。

书写测试逻辑代码​

我们先创建一个简单的 Hello World 来确保整体代码能够跑通。

const app = document.querySelector("#app");
// highlight-start
app.innerHTML = "Hello World.";
// highlight-end
export {};

最后的 export {}; 是因为 Vite 使用 type="module" 引入的关系，每个文件都需要是一个 module, 需要 export。 如果你使用其他开发构建工具，请按照自己的开发构建工具的要求编写。

启动服务 npm run dev。 并跳转到当前页面 " http://localhost:3000/src/0.getting-started/index.html "。

信息

请查看你的控制台，端口号会因为你的配置以及当前端口占用情况变更，请已控制台输出的为准。 如果你使用其他开发构建工具，请按照自己的开发构建工具的要求启动服务。

然后你会在页面看到:

Hello World.

这样的输出，说明开发构建工具的已经完成。

后面几个章节将不再详细叙述上述步骤，请一并完成即可。

从 npm 安装依赖包​

在你的工程目录安装依赖：

npm install @realsee/five three@0.117
信息

渲染一个三维空间​

是时候渲染一个 VR 场景看看了。

加载三维空间​

删除你之前的 Hello World 代码。我们来重新编写。 你可以先不清楚接下来编写的代码的含义，你在下一章会学习到。

import { Five, parseWork } from "@realsee/five";

const workURL =
  "https://vrlab-public.ljcdn.com/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json";

const five = new Five();

five.appendTo(document.querySelector("#app"));

fetch(workURL)
  .then((res) => res.json())
  .then((json) => {
    const work = parseWork(json);
    five.load(work);
  });

export {};

回到你的浏览器，看看是不是已经有一个三维空间已经展示出来了。 你可以用鼠标或者触摸手势操作画面，基本的浏览功能都已经附带了。

让画面自适应屏幕​

尝试调节浏览器窗口大小，发现画面没有随着窗口大小的变化而变化，与期望不符，我们给它添加这一功能：

import { Five, parseWork } from "@realsee/five";

const workURL =
  "https://vrlab-public.ljcdn.com/release/static/image/release/five/work-sample/07bdc58f413bc5494f05c7cbb5cbdce4/work.json";

const five = new Five();

five.appendTo(document.querySelector("#app"));

fetch(workURL)
  .then((res) => res.json())
  .then((json) => {
    const work = parseWork(json);
    five.load(work);
  });

// highlight-start
window.addEventListener("resize", () => five.refresh(), false);
// highlight-end

export {};

回到你的浏览器，看看是不是符合预期。

你真棒 🥳 ！

下一章节你会学到​

下一章节你会学到
  • 了解什么是 Work。
  • 了解刚才的代码，比如 parseWork(json) five.load(work) 是如何工作的。