【verge3D】为web3D开启陀螺仪功能

我想要实现在v3d中通过陀螺仪控制相机的方向,在v3d的示例中,我找到了misc_controls_deviceorientation.html,这是官方实现这个功能的示例。示例在SDK中,由于v3d是基于three.js的,在three.js官网的示例中有对应的演示:

https://threejs.org/examples/#misc_controls_deviceorientation

阅读代码发现,关键是调用一个DeviceOrientationControls.js的库。由于我想要以后继续使用拼图创建交互,所以我需要在player的基础上增加这个功能。实现步骤如下。

1.通过app管理器创建一个应用“my_awesome_app”。

2.在生成的my_awesome_app.html中引入DeviceOrientationControls.js,这个文件的位置在verge3d/examples/js/controls下面,把它拷贝到你的程序目录下。

<script src="DeviceOrientationControls.js"></script>

3.在生成的my_awesome_app.js中runCode函数中加入如下代码:


function runCode(app) {
// add your code here, e.g. console.log('Hello, World!');
// 陀螺仪控制方向
var camera, scene, renderer, controls;
camera = app.camera;
scene = app.scene;
renderer = app.renderer;
controls = new v3d.DeviceOrientationControls( camera );
animate();
function animate() {
window.requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
}
}
});

视频演示:https://www.bilibili.com/video/av28704507/

360全景图示例:

扫码在手机上打开

http://zjbcool.com/static/assets/gyro/gyro.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/1550186.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

HTML5地球Web3D可视化(WebGL Three.js)

接触WebGL也有五六年了&#xff0c;今天闲着没事&#xff0c;就整理了下过去写的有关地球数据可视化的案例&#xff0c;算是对WebGL的宣传推广吧。 视频查看Web3D效果 B站地址&#xff1a;https://www.bilibili.com/video/BV1qA411H7Xs 在HTML4的时代&#xff0c;如果想在We…

WEB 3D

WEB3D又称虚拟三维&#xff0c;是一种在 虚拟现实技术的基础上&#xff0c;利用3D互联网平台将现实世界中有形的物品通过互联网进行虚拟的三维立体展示并可互动浏览操作的一种虚拟现实技术。相比起目前网上主流的以图片、FLASH、 三维动画的展示方式来说&#xff0c;WEB3D技术让…

Three 之 three.js (webgl)基础 第一个入门 Web 3D 场景

Three 之 three.js &#xff08;webgl&#xff09;基础 第一个入门 Web 3D 场景 目录 Three 之 three.js &#xff08;webgl&#xff09;基础 第一个入门 Web 3D 场景 一、简单介绍 二、Three 中构建场景主要的三要素 三、场景&#xff08;Scene&#xff09; 四、摄像机&a…

Web3D水厂:数字孪生智慧水务三维WebGL可视化管理系统

建设背景 伴随着城市的发展趋势&#xff0c;各水司供水半经扩张&#xff0c;管网更为繁杂&#xff0c;成本和操作难度系数大幅度提高。安全性&#xff0c;高品质&#xff0c;高效率供水服务项目的急切要求和阶梯水价政策的执行&#xff0c;对水司经营明确提出了高规定。智慧水…

Web3D展示框架whs.js:基于Three.js的Web3d应用程序的超快3D框架

whs.js介绍: whs.js是一个在Three.js基础上构建的Web3D应用框架&#xff0c;它实现了一个具有组件系统和插件支持的核心&#xff0c;可以快速开发出web3D场景。 Web3D展示框架whs.js&#xff1a;基于 Three.js的Web应用程序的超快 web3D框架 whs.js如何获取 whs是开源项目&am…

WEB 3D JS 使用【3Dmol.js】

在web使用3d查看器&#xff0c;很多时候我们会优先考虑是不是要用wegGL又或者Three.js 这里分享一个在生物和化学上比较简单的分子3D查看器 3Dmol.js 先看下这句话&#xff1a; 3D view 查看器 default pdb; can be pdb, sdf, xyz, mol2, or cube 如果不是以上的格式&#…

Web3D重构(VueWebApi)总结

1、 不保存预设 注意&#xff1a;创建时选取VUE3.0版本 2、VUE中只针对某个属性做translate动画&#xff0c;那么要在translate加上该属性&#xff0c;否则就所有属性都会动画&#xff1a; 3、VUE中export与import 3、某个元素集合的第一个元素 5、要安装淘宝的cnpm镜像&#…

3D探索——Web 3D哪家强?

腾讯DeepOcean原创文章&#xff1a;http://dopro.io/web-3d-power.html 得益于手机厂商爆炸式的配置堆砌与移动互联时代到来&#xff0c;html在手机上的效果愈加丰富&#xff0c;Web开发者已经不满足于2D效果的实现&#xff0c;而把目标放到了更加炫酷的3D效果上。 在Web3D百花…

17个WebGL框架及Web3D图形库

WebGL是基于OpenGL的JavaScript API库&#xff0c;允许Web浏览器在浏览器中渲染3D / 2D图形&#xff0c;而无需安装额外的插件、桌面应用程序。WebGL允许通过浏览器使用机器GPU将3D图形渲染成HTML页面。WebGL目前在大多数浏览器(如Google Chrome&#xff0c;Mozilla Firefox和S…

实践 ArcGIS Web 3D

ArcGIS 产品家族的 Web 3D 功能众多用户期待已久&#xff0c;从 ArcGIS 10.3.1 版本开始&#xff0c;Esri 放了个大招&#xff0c;千呼万唤始出来的 Web 3D 功能&#xff0c;终于不再犹抱琵琶半遮面了。 那到底如何将创建和发布3D场景呢&#xff1f; 下面就把今天的测试过程记录…

`web3d模型线上展厅(一)

大家好&#xff0c;我是遂海枫林。最近呢又准备活跃起来了。 最近主要研究了下3D相机迅速搭建web线上模型的一个项目。 项目缺口 由于疫情&#xff0c;线上学习&#xff0c;线上工作&#xff0c;线上研究已经成为了大众接纳和处理事务最主要的方式&#xff0c;计算机网络带来…

Web3D开发经验分享:基于Three.js的Web3D建模案例

个人主页&#xff1a; 左本Web3D&#xff0c;更多案例预览请点击》 在线案例 个人简介&#xff1a;专注Web3D使用ThreeJS实现3D效果技巧和学习案例 &#x1f495; &#x1f495;积跬步以至千里&#xff0c;致敬每个爱学习的你。喜欢的话请三连&#xff0c;有问题请私信或者加微…

如何利用Web3D技术打造在线虚拟展览馆

随着Web3D技术的不断发展&#xff0c;越来越多的企业和组织开始将其应用于虚拟展览馆的建设中。虚拟展览馆可以为观众提供高度沉浸式的展览体验&#xff0c;让观众可以随时随地参观各种展览&#xff0c;同时也为展览组织者提供了更多的展示方式和机会。下面将介绍如何利用Web3D…

使用threejs简单Web3D效果

目录 1. threejs介绍 2. thresjs的使用 3. 组件介绍 4. threejs的动画 5. 参考资料 前几天在网上看到一个threejs的实现的web 3d的动画&#xff0c;很炫酷&#xff0c;所以特地去了解了一下threejs。我们首先看下官方使用threejs实现的效果&#xff1a; 1. threejs介绍 t…

几种Web3D技术的比较

1 引 言 虚拟现实(VirtualReality,简称VR)技术是一种逼真地模拟人在自然环境中的视觉、听觉、运动等行为的人机界面技术。由于虚拟现实具有实时的三维空间表现能力、提供了人机交互式的操作环境以及给人带来了身临其境的感受,它正成为继多媒体之后的又一个研究和应用的热点,开…

Web3D发展趋势以及Web3D应用场景

1&#xff0c;Web3D发展趋势 随着互联网的快速发展&#xff0c;Web3D技术也日渐成熟&#xff0c;未来发展趋势也值得关注。以下是Web3D未来发展趋势的七个方面&#xff1a; 可视化和可交互性的增强&#xff1a;Web3D可以为三维数据提供可视化和可交互性的增强&#xff0c;将极大…

Web 3D 从入门到跑路

大厂技术 坚持周更 精选好文 前情概要 作为在该领域小白的我&#xff0c;在准备该主题分享之前&#xff0c;我信心满满的去知乎查了下&#xff0c;如何学习 WebGL&#xff1f; 如何入手webGl以及three.js呢? - 知乎[1] 前端开发者应该如何学习计算机图形学相关的知识? - 知…

什么是Web3D?Web3D技术发展历程以及Web3D应用场景

当今的互联网已经迈入了第三代&#xff0c;这被称为Web3.0&#xff0c;而Web3D正是Web3.0的其中一个技术分支。Web3D是指将三维图形技术应用于Web上的技术&#xff0c;它是将3D图形和Web技术结合起来的一个分支&#xff0c;可以使用户在Web上以更真实、更直观的方式浏览和操作虚…

Web3D 从入门到跑路 · 3D 初体验

3D初体验 本文整理自老冯于 凹凸 2022 年技术分享&#xff0c;带领大家从案例、应用、技术生态出发&#xff0c;让大家了解一下 3D 在 Web 端的现状。 Hey 3D whats up&#xff0c;最近在Web圈混得怎样 在“元宇宙”概念越来越火热的背景下&#xff0c;我们准备了一系列的 3D…

20151021

题目一给定一个无序数组&#xff0c;请调整该数组&#xff0c;调整成奇数放在数组的左边&#xff0c;偶数放在数组的右边。但是奇数与奇数之间的相对顺序不变&#xff0c;偶数和偶数之间的相对顺序也不变。要求思考&#xff1a;如果额外空间复杂度必须为O(1)&#xff0c;时间复…