OpenHarmony实现360度的全景渲染功能—ThreeJs360Demo
原创OpenHarmony实现360度的全景渲染功能—ThreeJs360Demo
原创
介绍
ThreeJs360Demo,使用系统提供的Web组件，加载threeJs，实现360度的全景渲染功能
效果展示
支持的图片与视频格式
格式 | 备注 |
|---|---|
图片JPG格式 | 支持 |
图片PNG格式 | 支持 |
图片GIF格式 | 支持（失去原图的动态效果） |
视频MP4格式 | 支持 |
视频WEBPM格式 | 支持 |
样例说明
参照该Demo工程Index页面
如：
//https://53004908n5.imdo.co ThreeJs实现全景效果的h5页面 服务器地址
Web({ src: "https://53004908n5.imdo.co", controller: this.controller })
.width('100%')
.height('100%')
.margin({ top: 10 })
.imageAccess(true)
.horizontalScrollBarAccess(true)
.onProgressChange((ev) => {
console.log("ThreeJs360 progress:" + ev.newProgress);
})
.onErrorReceive((error) => {
console.log("ThreeJs360 error:" + error.error.getErrorInfo() + ";code:" + error.error.getErrorCode());
console.log("ThreeJs360 error url:" + error.request.getRequestUrl());
})使用说明
1丶将工程目录中的source文件下代码放到搭建的服务器
2丶在对应的html5页面，设置资源文件（图片或者视频）
图片:在对应的h5页面中引入对应js文件丶设置展示图片的div标签及其设置图片的路径及其初始化角度
引入source/360_image/js目录下的js文件
<script src="./js/three.js"></script>
<script src="./js/index.js"></script>div标签
<div id="pano-container"></div>设置图片路径及其初始化
const container = document.getElementById("pano-container");
Panorama.init(container, "xxxxxxx.jpg图片地址", 180);视频：设置视频播放的video组件丶设置threejs绑定的canvas组件及其引入视频处理的js文件
定义视频播放的video组件，定义的id需要保持my_video
<video
preload
ref="video"
controls
loop
style="width: 100%; visibility: hidden; position: absolute"
src="xxxxxxxxxxxxxxxxxxxxx.mp4视频地址"
class="my_video"
></video>定义绑定threeJs的canvas组件，定义的id需要保持my_canvas
<canvas
style="width: 100%; height: 100vh"
width="1920"
height="823"
ref="canvas"
class="my_canvas"
></canvas>引入source/360_video/360_video-umd.js文件
<script src="./360_video-umd.js"></script>3丶启动资源服务器，在当前的source目录运行cmd，输入以下命令，启动资源服务器
运行命令：npx http-server.4丶web组件访问上述启动服务器
controller: web.WebviewController = new web.WebviewController();
...
Web({ src: "http://服务器地址", controller: this.controller })图片接口说明
接口说明 | 功能描述 |
|---|---|
init: function (container, imgPath, compassAngle) | 初始化功能，设置图片的地址及其图片的展示角度（0-360度） |
updateMesh: function (imgPath) | 刷新图片 |
resetParams: function () | 图片层的Params重置 |
视频层未暴露出接口，以script标签引入js文件，设置对应的vidoe组件id为my_video及其canvas组件id为my_canvas
软件架构
|-ets
| |-entryability
| |-EntryAbility.ts
| |-pages
| |-Index.ets #主页demo
|-doc #threeJs实现源码约束与限制
在下述版本验证通过：
DevEco Studio: 4.0 Canary2(4.0.1.300), SDK: API10 Beta(4.0.8.6)
写在最后
如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
- 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力；
- 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识；
- 想要获取更多完整鸿蒙最新学习知识点，可关注B站：码牛课堂鸿蒙开发；
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
