admin 管理员组文章数量: 1184232
react 360 项目实战
这章节呢，我们从一个项目案例实战，来进一步学习react 360框架的使用。
项目的内容呢，我们需要使用React VR开发一个360度球形的图像可旋转查看器。项目中呢，我们将采用几张全景图片和几张对应的小的thunmb按钮图片，最终把按钮放置在360度的立体空间内，制作点击交互；点击这些按钮图片后，全景的360画廊直接进行切换；
当然，有一些开发的注意事项，由于呢，VR立体WEB空间技术，是属于比较新颖的技术。所以我们的浏览器最好使用比较新的浏览器，例如chrome，firefox等，而且呢，这里呢，要求我们大家最好把浏览器升级到最新的版本；
项目开发
接下来呢，我们就进入开发阶段，在上一章节中，我们已经在本地使用了react-vr-cli这款脚手架工具，搭建好了我们的react 360开发环境。好，我们再来回顾下，搭建的流程，如下所示：
npm install -S react-vr-cli
npx react-vr-cli init newapp
cd newapp
npm start
使用npm start命令之后呢，我们就需要在浏览器的地址栏输入http://localhost:8081/vr/, 以第一次使用npm start命令，命令行就会自动构建Bundling vr\client.js、index.vr.js客户端文件，提供客户端显示的模块支持。
如果大家看到了这样一个，一个黑色和白色方格相见的的房间，然后呢有三阶楼梯，柱子和还有Hello的文本，就说明我们的服务，启动成功，而且浏览器可以直接兼容的。
我们现在来分析下新生成的项目目录结构：
C:.
| .babelrc
| .flowconfig
| .gitignore
| .watchmanconfig
| index.vr.js
| package.json
| rn-cli.config.js
|
+---static_assets
| chess-world.jpg
|
+---vr
| client.js
| index.html
|
\---__tests__
index-test.js
从构建生成的的目录我们可以分析出，react VR CLI运行所提供支持的最重要的文件和文件夹是：
index.vr.js: 这是应用程序的访问入口。这个文件包含者我们在浏览器所看到场景的源代码，因为我们第一次启动的使用构建的也是这个文件static_assets: 这个文件夹呢，应包含我们vr应用程序中使用的所有静态资源。我们会把我们项目开发所需要使用的全景图片和按钮图片放置在这个static_assets文件夹中
接下来，我们需要分析一下最终案例效果的项目组件组成部分 >
通过上面的最终案例分析，我们来划分一下我们的组件层级结构：
Canvas组件，这个canvas组件呢，它就是我们全屏360 VR图像的画布展示的内容Button组件，每一个按钮图标ButtonList UI组件，这几个按钮图标组成的列表
这3个组件呢，对应着3个不同的js文件，所以呢，我们需要创建一个components文件夹，来存放我这这些组件文件。当然呢，大家也可以使用其他命名方式，不用采用components命名也是没问题的，按照大家的喜好即可。
当然，在开发我们的组件之前呢，我们需要做一件事情，一件什么样子的事情呢？我们需要去到index.vr.js这个文件中，把项目启动展示的默认案例的代码给移除掉，好，我们可以编辑index.vr.js文件如下：
import React, {
Component} from 'react';
import {
AppRegistry,
View,
} from 'react-vr';
export default class newapp extends Component {
render() {
return (
<View>
//...
</View>
);
}
};
AppRegistry.registerComponent('newapp', () => newapp);
360 VR场景Canvas组件
接下来，我们进入组件开发阶段，首先我们需要创建场景组件components/Canvas.js，编辑如下：
import React, {
Component } from 'react';
import {
asset,
Pano,
} from 'react-vr';
class Canvas extends Component {
constructor(props) {
super(props);
this.state = {
src: this.props.src,
}
}
render() {
return 版权声明：本文标题：React 360 全景VR交互项目实战 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1755025260a3061979.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论