I followed the docs exactly as described (refer
https://aframe.io/docs/master/components/scale.html)
in a super basic WebVR scene on Glitch and it seems the code related to reflecting a sphere along the Z-axis won't work. It seems to be fairly straightforward, so I can't imagine why there should be any trouble. Am I doing something stupid or is it really not working? I know I could use a-sky but I want more control over position, rotation, etc (it needs to be an element in the world).
A-Frame Version: 1.0.4
Platform / Device: Windows ASUS Rog Zephyrus Laptop, Desktop browser (tested on Firefox and Edge)
Reproducible Code Snippet or URL: https://east-stock.glitch.me/. Ideally, you shouldn't be able to see the sphere from "outside" it, as in this scene, and the red should appear once you navigate "inside" the sphere.
Just so you have it, this is what I put in my scene:
<a-entity
geometry="primitive: sphere; radius: 4"
material="color: red"
scale="1 1 -1"
position="0 0 -5"
></a-entity>
You need to add some properties to the material of the sphere to get it to work.
<a-entity
geometry="primitive: sphere; radius: 4"
material="color: red; side: back; shader: flat; "
scale="1 1 1"
position="0 0 -5"
></a-entity>
You only want to show the 'back' of the faces of the sphere, that's what the side:back does. You probably don't want the sphere to reflect the light, therefore in this case I would add the shader:flat parameter so it is rendered flat.
Related
I'm getting a warning saying "Unknown property userHeight for component/system camera.". And it doesn't seem to make any difference.
No, it has been removed. Modify the camera position to set the user height in 2D mode (in VR mode it will be overridden by the headset position):
<a-entity camera position="0 1.6 0" look-controls></a-entity>
To place the user in the scene in both 2D and VR use a camera rig:
<a-entity id="rig" position="25 10 0">
<a-entity id="camera" camera look-controls></a-entity>
</a-entity>
I am rotating a glTF model of the moon. I want it to rotate around its center, rather than around the center of the scene.
I tried the answer here:
How to change the rotation axis for an animated A-Frame object?
but it doesn't seem to work for me (the object doesn't rotate at all).
I have tried the code here as well: https://blog.prototypr.io/learning-a-frame-how-to-do-animations-2aac1ae461da
But the object doesn't rotate when I use that either.
So far I have only been able to get it to rotate using this code:
<a-entity gltf-model="#moon" scale="0.5 0.5 0.5" position="0 0 0"
animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-entity>
But using that, it rotates around the center of the scene rather than rotating on it's own central axis, if that makes sense. (Global axis rather than local axis?)
This is how I am loading in A-Frame:
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
Add a parent entity around it then the model will rotate around that.
<a-entity>
<a-entity gltf-model="#moon" scale="0.5 0.5 0.5" position="0 0 0"
animation="property: rotation; to: 0 360 0; loop: true; dur: 10000"></a-entity>
</a-entity>
The other way to fix this is to place your axis in the 3D app that created the model, and export the gltf again.
How can I increase the speed of the WASD Controls for my WebVR page?
Because now it goes really slow.
<a-entity position="0 1.8 0" camera look-controls wasd-controls>
<a-camera id="camera">
<a-cursor color="#333" maxDistance="30"></a-cursor>
</a-camera>
</a-entity>
The wasd-controls component has several options, described in the A-Frame v0.4.0 docs. Increasing acceleration, or decreasing easing, will both make the camera move faster.
<a-entity camera look-controls wasd-controls="acceleration: 100">
<!-- ... -->
</a-entity>
The acceleration config does not affect top speed. If you are looking to change top speed, I made a fork of aframe that includes configs for speed as well as new features like gravity, look sensitivity, and Y-axis inversion.
I have a cylinder in A-Frame with a texture applied to the outside. I want to make this an igloo I can go inside. How do I apply the texture also to the inside of the cylinder?
<a-cylinder></a-cylinder>
<a-entity geometry="primitive: cylinder" material="src: #texture"></a-entity>
You can set the material.side to double to render on both sides of the mesh. https://aframe.io/docs/0.3.0/components/material.html#properties
<a-cylinder side="double"></a-cylinder>
<a-entity geometry="primitive: cylinder" material="src: #texture; side: double"></a-entity>
<a-videosphere src="myvideo.mp4"> displays a video on an entire 360-degree sphere, but I want to display a video or image, but only on a portion of a sphere like a hemisphere. Something like:
(from MathWorld - A Wolfram Web Resource: wolfram.com)
How would I do this in A-Frame?
You can use the sphere geometry (<a-entity geometry="primitive: sphere"> or <a-sphere>) and control the phiLength/thetaLength angles of the sphere to specify a segment. Theta length controls horizontal sweep angle and phi length controls vertical sweep angle:
(source: mediabox.fr)
For a hemisphere, we would do:
<a-entity geometry="primitive: sphere; thetaLength: 180; radius: 5000; segmentsWidth: 64; segmentsHeight: 20" scale="1 1 -1" material="src: #myVideo; shader: flat"></a-entity>
Or:
<a-sphere theta-length="180">
And then apply the material.
For videosphere, we can update it:
<a-videosphere src="#myVideo" geometry="thetaLength: 180"></a-videosphere>
However, the video won't be cropped as you'd expect. So you might have to crop beforehand. If you want it to crop like background-size: cover, we might have to do something special like hide portions of the sphere.