By default, when I load a scene, the camera is pointing straight ahead. But I would like it to be pointing slightly upwards.
I tried using the rotation attribute to tilt the camera. At first instance, it works. But when I move the camera back down (to what would be its default position), and try to move to the side then, the camera moves in a strange angle. Not like it would if I loaded the scene with no camera rotation, moved up, and moved back again.
I am using the 1.0.4 version of a-frame, on a desktop, in Firefox, controling the scene with the mouse.
Here is my code:
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<a-scene>
<a-entity id="rig" rotation="20 0 0">
<a-entity camera look-controls="reverseMouseDrag: true" cursor="rayOrigin: mouse" position="0 1.6 0"></a-entity>
</a-entity>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
<a-sky src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Equirectangular_projection_SW.jpg/1920px-Equirectangular_projection_SW.jpg"></a-sky>
</a-scene>
Considering rotating a-sky instead or setting the objects scene in the starting configuration you need. Be aware that in VR you won't be able to force the user to look into a specific direction.
Related
I am seeking assistance with Quasar, I am completely new to coding and JS/Quasar framework. I was wondering if the out of box qdrawer can be tweaked so when launching the page, instead of having it opened by default, to have it closed instead and clicking the hamburger button will open it.
Mainlayout.vue:
<q-drawer v-model="leftDrawerOpen" show-if-above bordered> <---- In question
<q-list>
<q-item-label header> Essential List </q-item-label>
<EssentialLink
v-for="link in essentialLinks"
:key="link.title"
v-bind="link"
/>
</q-list>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
I attempted to rename to leftDrawerClosed but no success
The element q-drawer uses several mechanisms to be opened or closed. First and foremost the binding to the variable leftDrawerOpen is essential. You may consider initializing it to false in the setup section. However, as the q-drawer element also contains the show-if-above directive, you should be aware that the state of this variable is ignored for larger screens (see the API docs: https://quasar.dev/layout/drawer). If the drawer should be closed regardless of screen size you should in addition remove this directive.
I am trying to add prime face slider horizontal bar from this link in my xhtml file of JAVA EE: https://www.primefaces.org/showcase/ui/input/slider.xhtml?jfwid=fa7b8
the code is :
<h5 class="p-mt-0">Basic</h5>
<h:panelGrid columns="1" style="margin-bottom: 10px">
<p:inputText id="txt" value="#{sliderView.number1}"/>
<p:slider for="txt" range="false"/>
</h:panelGrid>
but i am getting error like: Error Parsing /beergame_user.xhtml: Error Traced[line: 116] The prefix "p" for element "p:inputText" is not bound and same for p:slider.
my head tags are same as indicated in documentation of prime face which are:
but still the error is showing.
I have used metro mahhapps flyout like this:
<Grid>
<Controls:FlyoutsControl>
<Controls:Flyout IsModal="True" IsOpen="True" Header="Flyout" Position="Right" Width="200">
<!-- Your custom content here -->
</Controls:Flyout>
</Controls:FlyoutsControl>
</Grid>
and it disables everything, even itself - I can not close it, nor can I close my application.
Am I doing something wrong?
The Flyouts container must be located on MetroWindow level.
<Controls:MetroWindow.Flyouts>
<Controls:FlyoutsControl>
<Controls:Flyout IsModal="True" IsOpen="True" Header="Flyout" Position="Right" Width="200">
<!-- Your custom content here -->
</Controls:Flyout>
</Controls:FlyoutsControl>
</Controls:MetroWindow.Flyouts>
I'd like to attach a webcam stream as a texture to an entity within an aframe, is this possible and how would I do that?
An example of the effect I'm going for include:
Projecting my webcam feed onto a TV within the vr
"Face timing" someone within VR
Seeing yourself within the VR for debugging purposes
https://media.giphy.com/media/cJjZg8kXSUopNzZP4V/giphy.gif
Adding the Asset
The first step is to add the video as an asset:
<a-assets>
<video id="webcam" playsinline></video>
</a-assets>
Note the playsinline directive which prevents the page from entering full screen mode, particularly on mobile devices. It’s just a little detail I like to add, because while our app will be run fullscreen anyways I want the app to decide that and not some random video element!
Create the Stream
Next we create the stream with:
<!-- Start the webcam stream and attach it to the video element -->
<script>
// You can also set which camera to use (front/back/etc)
navigator.mediaDevices.getUserMedia({audio: false, video: true})
.then(stream => {
let $video = document.querySelector('video')
$video.srcObject = stream
$video.onloadedmetadata = () => {
$video.play()
}
})
</script>
Apply the Texture
Finally, we apply the stream as a material onto any entity with: material="src: #webcam"
Working Demo
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<!-- Create an empty video tag to hold our webcam stream -->
<a-assets>
<video id="webcam" playsinline></video>
</a-assets>
<!-- Creates -->
<a-scene background="color: #ECECEC">
<a-box position="-1 0.5 -3" rotation="0 45 0" shadow material="src: #webcam"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>
<!-- Start the webcam stream and attach it to the video element -->
<script>
// You can also set which camera to use (front/back/etc)
// #SEE https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
navigator.mediaDevices.getUserMedia({audio: false, video: true})
.then(stream => {
let $video = document.querySelector('video')
$video.srcObject = stream
$video.onloadedmetadata = () => {
$video.play()
}
})
</script>
If the Code Runner doesn't work, you can also play with it here: https://glitch.com/~webcam-as-aframe-texture
I am using gmaps4jsf jar file for getting dynamic marker on google map but once i click on submit button then getting whole data on web page, evem map also with dynamic marker but map marker is coming after refresh the page.
jsf code:
<m:map id="map" width="650px" height="450px" latitude="#{map.latitude}" longitude="#{map.longitude}" enableScrollWheelZoom="true" zoom="9">
<m:marker latitude="#{point.latitude}" longitude="#{point.longitude}" >
<m:htmlInformationWindow htmlText="Click me!" />
</m:marker>
</m:map>
<p:column>
<p:commandButton value="Display" action="#{map.display}" update="form"/>
</p:column>
jsf component is refreshing fine only problem with google map..
You should use partiallyTriggered="true" for refresh the google map. as you said you are using gmaps4jsf jar so it will help and i'm updating your code so you can find here
<m:map id="map" partiallyTriggered="true" width="650px" height="450px" latitude="#{map.latitude}" longitude="#{map.longitude}" enableScrollWheelZoom="true" zoom="9">
<m:marker latitude="#{point.latitude}" longitude="#{point.longitude}" >
<m:htmlInformationWindow htmlText="Click me!" />
</m:marker>
</m:map>