Is it possible to move camera in A-Frame projects with Oculus touch controllers?
Can't find any working example.
You can try and re-use existing components. wasd-controls are working well for movement, so You can write a similar component utilizing the thumbstick input instead of the wasd keys.
You can try out my barbaric attempt here(docs).
It's quite simple - create a rig for the controllers + camera and attach oculus-thumbstick-controls to any controller:
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://gftruj.github.io/webzamples/aframe/controls/oculus-thumbstick-controls.js"></script>
<a-scene>
<!-- Camera + controllers rig -->
<a-entity id="rig">
<a-camera position="0 1.6 0"></a-camera>
<a-entity oculus-touch-controls="hand: left" ></a-entity>
<a-entity oculus-touch-controls="hand: right" oculus-thumbstick-controls></a-entity>
</a-entity>
</a-scene>
Related
I have the following code in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>Alchem Figher!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<!-- Scripts -->
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-particle-system#1.0.x/dist/aframe-particle-system-component.min.js"></script>
<script src="jquery.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v3.8.0/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-text value="Rational Bonding Presents" position="-3 7 -10" color="#EF2D5E">
<a-text value="Alchem Fighter" height="30" width="20" position=".5 -.5 0" color="#02e8f4"></a-text>
</a-text>
<a-sphere id="proton" position="0 2.5 -6" radius=".05" color="#EF2D5E">
<a-sphere id="eclouds1e1" radius=".53" color="#02e8f4" opacity=".4">
<a-entity id="s1e1" material="color: #02e8f4" rotation="0 90 0"; geometry="primitive: torus; radiusTubular: 0.004" >
<a-animation attribute="position" dur="250" from=".53 0 0" to="-.53 0 0" direction="alternate" repeat="indefinite"></a-animation>
<a-animation attribute="geometry.radius" dur="125" from=".01" to=".53" direction="alternate" repeat="indefinite"></a-animation>
</a-entity>
</a-sphere>
<a-sky src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Earth_Western_Hemisphere.jpg"></a-sky>
</a-scene>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
</html>
The torus id'd: s1e1
In here, <a-entity id="s1e1" material="color: #02e8f4" rotation="0 90 0"; geometry="primitive: torus; radiusTubular: 0.004" >, it has two animations attached to it. One for left to right movement, and another for expanding and contracting.
The question:
I would like these animations to synchronize so that the torus is expanded in the middle and contracted at the ends. It represents a visualization of an electron orbiting a single proton in a hydrogen atom, but I do not know how to approach that.
I was in the process of typing up a response, suggesting the use of the animation component (included in 0.9.0 core) rather than a-animation (deprecated, and removed in 0.9.0), which I would still recommend in general practice, but I realized that the animations still do in fact fall out of sync.
I'm assuming this is due to any of the following:
The extremely short interval (dur). The higher you set this, the less noticeable the timing issue.
A difference in overhead due to how the animated properties are targeted, e.g., raw property vs. attribute (using setAttribute under the hood).
IIRC, loops are set with either setTimeout or setInterval under the hood. Rather than rely on this, you may want to disable looping and trigger these animations by emitting a timed event so you can guarantee that they're executed simultaneously. You can create a custom component that does this using a throttled tick handler, setTimeout or setInterval.
I also suggest using either linear or easeInOutQuad for the easing as the default setting only eases in one direction, which can cause an undesirable effect.
Either way, you may want to submit this as a bug to the A-Frame repo: https://github.com/aframevr/aframe/issues/new
I'm trying to move with the controller in my scene when I open my view in internet explorer. I can't seem to get the code right to enable the movement for the windows mixed reality controller.
`
<!-- Player -->
<a-entity hand-controls="left"></a-entity>
<a-entity hand-controls="right"></a-entity>
<a-entity windows-motion-controls="hand: left"></a-entity>
<a-entity windows-motion-controls="hand: right"></a-entity>
<a-entity id="rig"
movement-controls
position="6 0 11">
<a-entity camera
position="0 1.4 0"
look-controls="pointerLockEnabled: true"></a-entity>
</a-entity>
`
When I push the controller forward and step into mixed reality I don't actually move forward into the scene.
I'm trying to include a STL file like a GLTF object in my A-Frame page, but I'm not making progress. I don't understand why the file doesn't work in a similar manner. Here is my code for the working page on Glitch with a GLTF file and a non-working one with the STL file. All object files are hosted on GitHub.
glitch.com/edit/#!/dramatic-hornet
(below is the non-working code excerpt copied from Glitch)
<a-scene>
<a-assets>
<a-asset-item id="object" src="https://github.com/rschildge/models/raw/master/NinjaSpinner.stl"></a-asset-item>
</a-assets>
<a-entity model="#object" position="0 0 -4" scale=".1 .1 .1"></a-entity>
<!-- <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>-->
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
As far as i know, a-frame's core doesn't have any loader for the .stl format.
There is a pretty recent community-made loader, be sure to check it out.
If it won't work, be sure to file an issue. If it works - give it a friendly star.
As for models in general, the a-frame team recommends the glTF format in the docs, as it is designed for webGL.
As for the model=.. syntax, you need to use a loader component, either the gltf-loader (like you do on glitch), or any other, but it won't work just with a model keyword
I am using the Samsung Internet Browser in GearVR with webVR enabled. I have taken the code for the "two boxes, one in each eye" example directly from the github source. It should show one box in each eye. But no matter what I have tried I get both boxes in each eye or something worse. Nothing I have tried produces the correct result.
My ultimate goal is to use webVR to play 360 3D videos (from VUZE) in stereo in webVR. But I cannot get even this simple stereo app to work. Any suggestions for the best way to get stereo VR to work in an HMD, especially GearVR would be greatly appreciated.
The source is the two boxes example from https://github.com/oscarmarinmiro/aframe-stereo-component
the code is:
<html>
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
<script src="aframe-stereo-component.js.min.js"></script>
</head>
<body>
<a-scene>
<a-sky color="#FFF"></a-sky>
<a-light color="#333" position="0 5 0" type="ambient" intensity="0.2"></a-light>
<a-light type="point" color="#EEE" intensity="1.0" position="3 3 10"></a-light>
<!-- 'left' eye entities will pass trough the camera in non-VR mode -->
<a-camera position="0 0 10" cursor-color="black" stereocam="eye:left;"></a-camera>
<!-- in VR mode, the first box is displayed only in the left eye, the second one in the right eye -->
<a-entity geometry="primitive: box" material="color: #C03546" stereo="eye:left"></a-entity>
<a-entity geometry="primitive: box" material="color: #3546C0" position="0 5 0" stereo="eye: right"></a-entity>
"</a-scene>
</body>
</html>
I can"t get the Samsung VR browser to work correctly for any example, not even Samsung's.
I use the Oculus Carmel browser for all WebVR on Gear VR.
The code showed above comes from the documentation at https://github.com/oscarmarinmiro/aframe-stereo-component.
A working example is at http://oscarmarinmiro.github.io/aframe-stereo-component/ .
Looking at the source code for http://oscarmarinmiro.github.io/aframe-stereo-component/two_boxes/index.html reveals that both the script lines in the head
should be replaced by the one line
<script src="../build.js"></script>.
build.js and correct versions of the index files are in the code files in https://github.com/oscarmarinmiro/aframe-stereo-component, but not in the documentation below it.
I am trying to create a simple animation of falling dices. With below code, I am trying to apply a cubemap to a-box but not able get the desired results.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.2.0/aframe.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<a-cubemap id="sky">
<img src="dice/Dice-1.png">
<img src="dice/Dice-2.png">
<img src="dice/Dice-3.png">
<img src="dice/Dice-4.png">
<img src="dice/Dice-5.png">
<img src="dice/Dice-6.png">
</a-cubemap>
</a-assets>
<a-entity geometry="primitive: box" material="envMap: #sky"></a-entity>
</a-scene>
</body>
</html>
As far as i know, environmental maps, using i.e. cubemaps, are used to provide a sphere environment, or work with reflecion/refraction, by providing a map of the surrounding environment.
In Your case, I would use a texture for <a-box>, or create a custom box made of planes, and texture them accordingly like this:
<a-entity id="dice">
<a-plane position="-0.5 0 0" rotation="0 -90 0"></a-plane>
<a-plane position="0.5 0 0" rotation="0 90 0"></a-plane>
<a-plane position="0 0.5 0" rotation="-90 0 0"></a-plane>
<a-plane position="0 -0.5 0" rotation="90 0 0"></a-plane>
<a-plane position="0 0 0.5" rotation="0 0 -90"></a-plane>
<a-plane position="0 0 -0.5" rotation="0 0 90"></a-plane>
</a-entity>
working fiddle: https://jsfiddle.net/x8dt1jjb/.
Cubemaps:
As I see from multiple sources, cubemaps had many issues:
Like here or here
I found some guy claiming that cubemaps work on all entities except the first one, check out his github,
cubemaps are working on his index.html
Please note, indeed cubemaps on his example are not working on the first entity, so my advice would be copying his cubemap declarations, and create <a-entity> with your envMap applied, but with scale="0 0 0", or visible="false". When made so, the first entity get's 'bugged' (but invisible, so who cares), and Your entity should work fine.
Works properly for me, inverted my sources though: http://gftruj.nazwa.pl/cubemap/
Note, that there is an order in which You need to declare faces of Your cubemap, as explained here. Looking at a dice cubemap, you need to get your order straight, for example:
dice-5, dice-2, dice-4, dice-3, dice-6, dice-1
btw I found a cubemap component, didn't tried it yet though.