概述
使用oculus设备开发一个漫游demo,具备在头显中使用遥感控制方向,左手控制器具备传送跳跃功能,导航网格的制作
如有不明白的可以加QQ:2354528292;wx: aichitudousien
更多教学视频请访问:https://space.bilibili.com/236087412
源码获取:https://item.taobao.com/item.htm?spm=a21dvs.23580594.0.0.3c3a645e6Jz6my&ft=t&id=714567597879
oculus VR漫游
静态资源
<a-assets timeout="40000">
<!-- 房子 -->
<a-asset-item
id="Building"
src="assets/model/New_Building_final1.glb"
nav-agent="speed: 1.5; active: true"
></a-asset-item>
<a-asset-item
id="Building_skeleton"
src="assets/model/New_Building_final_skeleton1.glb"
nav-agent="speed: 1.5; active: true"
></a-asset-item>
<!-- 树 -->
<a-asset-item
crossorigin="anonymous"
id="Palm"
src="assets/model/PalmMinimal.glb"
></a-asset-item>
<!-- 小地图 -->
<a-asset-item
crossorigin="anonymous"
id="Island"
src="assets/model/Islands.glb"
></a-asset-item>
<img crossorigin="anonymous" id="flare-asset" src="assets/images/adjustflare.jpg" />
<img crossorigin="anonymous" id="grid" src="assets/images/opaic_grid.png" />
</a-assets>
海岛
<a-entity
id="navmesh-Island"
gltf-model="url(assets/model/navmeshMegaHelloIsland.gltf)"
scale=""
visible="true"
nav-mesh=""
></a-entity>
海洋
<a-ocean
position="-28.98488 -1.76439 22.54954"
scale="3 3 3"
width="50"
depth="50"
opacity=".75"
ocean="density: 45; amplitude: -0.1; speed: 0.75; speedVariance: 0.1"
></a-ocean>
控制器
<a-entity
id="cameraRig"
movement-controls="constrainToNavMesh: true;"
navigator="cameraRig: #cameraRig; cameraHead: #head; collisionEntities: .collision; ignoreEntities: .clickable"
position="0 0 0"
rotation="0 0 0"
>
<a-entity
id="head"
camera="active: true"
position="0 1.6 0"
look-controls="pointerLockEnabled: true; reverseMouseDrag: true"
></a-entity>
<a-entity
class="leftController"
oculus-touch-controls="hand: left"
teleport-controls="cameraRig: #cameraRig; teleportOrigin: #head; button: trigger; curveShootingSpeed: 18; collisionEntities: #navmesh-Island; landingMaxAngle: 60"
visible="true"
>
</a-entity>
<a-entity
class="rightController"
oculus-touch-controls="hand: right"
laser-controls
raycaster="showLine: true; far: 15; interval: 0; objects: .clickable, a-link;"
line="color: lawngreen; opacity: 0.5"
visible="true"
></a-entity>
</a-entity>