Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
0e67eaad
T
three.js
项目概览
Ablesons
/
three.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
three.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
0e67eaad
编写于
9月 19, 2018
作者:
M
Mr.doob
提交者:
GitHub
9月 19, 2018
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #14904 from Mugen87/dev11
Docs: Added basic WebVR page
上级
ee34ef1b
b8693fbc
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
85 addition
and
0 deletion
+85
-0
docs/list.js
docs/list.js
+1
-0
docs/manual/en/introduction/How-to-create-VR-content.html
docs/manual/en/introduction/How-to-create-VR-content.html
+84
-0
未找到文件。
docs/list.js
浏览文件 @
0e67eaad
...
...
@@ -19,6 +19,7 @@ var list = {
"
Next Steps
"
:
{
"
How to update things
"
:
"
manual/{lan}/introduction/How-to-update-things
"
,
"
How to create VR content
"
:
"
manual/{lan}/introduction/How-to-create-VR-content
"
,
"
Matrix transformations
"
:
"
manual/{lan}/introduction/Matrix-transformations
"
,
"
Animation system
"
:
"
manual/{lan}/introduction/Animation-system
"
},
...
...
docs/manual/en/introduction/How-to-create-VR-content.html
0 → 100644
浏览文件 @
0e67eaad
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<meta
charset=
"utf-8"
>
<base
href=
"../../../"
/>
<script
src=
"list.js"
></script>
<script
src=
"page.js"
></script>
<link
type=
"text/css"
rel=
"stylesheet"
href=
"page.css"
/>
</head>
<body>
<h1>
[name]
</h1>
<br
/>
<p>
This guide provides a brief overview of the basic components of a web-based VR application
made with three.js.
</p>
<h2>
Workflow
</h2>
<p>
First, you have to include [link:https://github.com/mrdoob/three.js/blob/master/examples/js/vr/WebVR.js WebVR.js]
into your project.
</p>
<code>
<
script src="/path/to/WebVR.js"
><
/script
>
</code>
<p>
*WEBVR.createButton()* does two important things: It creates a button which indicates
VR compatibility. Besides, it initiates a VR session if the user activates the button. The only thing you have
to do is to add the following line of code to your app.
</p>
<code>
document.body.appendChild( WEBVR.createButton( renderer ) );
</code>
<p>
Next, you have to tell your instance of *WebGLRenderer* to enable VR rendering.
</p>
<code>
renderer.vr.enabled = true;
</code>
<p>
Finally, you have to adjust your animation loop since we can't use our well known
*window.requestAnimationFrame()* function. For VR projects we use [page:WebGLRenderer.setAnimationLoop setAnimationLoop].
The minimal code looks like this:
</p>
<code>
renderer.setAnimationLoop( function () {
renderer.render( scene, camera );
} );
</code>
<h2>
Next Steps
</h2>
<p>
Have a look at one of the official WebVR examples to see this workflow in action.
<br
/><br
/>
[example:webvr_ballshooter WebVR / ballshoter]
<br
/>
[example:webvr_cubes WebVR / cubes]
<br
/>
[example:webvr_dragging WebVR / dragging]
<br
/>
[example:webvr_lorenzattractor WebVR / lorenzattractor]
<br
/>
[example:webvr_panorama WebVR / panorama]
<br
/>
[example:webvr_paint WebVR / paint]
<br
/>
[example:webvr_rollercoaster WebVR / rollercoaster]
<br
/>
[example:webvr_sandbox WebVR / sandbox]
<br
/>
[example:webvr_sculpt WebVR / sculpt]
<br
/>
[example:webvr_vive_paint WebVR / vive / paint]
<br
/>
[example:webvr_vive_sculpt WebVR / vive / sculpt]
<br
/>
</p>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录