Skip to main content

起步

info

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

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

准备工作

开发环境

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

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

SafariSafari on iOSChromeChrome for AndroidEdgeFirefox
>= 9>= 9>= 49>= 93>= 13>= 45

使用开发构建工具

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

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

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

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

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

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

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

tip

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

创建 HTML 文件

src/0.getting-started/index.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>
<style>
* { margin: 0; padding: 0; }
html, body, #app { width: 100%; height: 100%; overflow: hidden; }
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="./index"></script>
</body>
</html>
info

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

书写测试逻辑代码

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

src/0.getting-started/index.js
const app = document.querySelector("#app");
app.innerHTML = "Hello World.";
export {};

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

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

info

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

然后你会在页面看到:

Hello World.

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

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

npm 安装依赖包

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

npm install @realsee/five three@0.117
info

渲染一个三维空间

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

加载三维空间

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

src/0.getting-started/index.js
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 {};

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

让画面自适应屏幕

在缩放屏幕时会发现,画布的大小并没有随着窗口变化,我们给他添加这一功能:

src/0.getting-started/index.js
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);
});

window.addEventListener("resize", () => five.refresh(), false);

export {};

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

你真棒 🥳 !

下一章节你会学到

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