geometry auto-scaling not working to fit text on value change - aframe

I'm having trouble with the auto-scale of the geometry to fit the text. It works well when the entity is created, like so:
<a-entity id="testtext"
position="0 0 0"
geometry="primitive: plane; height: auto; width: auto"
material="color: blue"
text="width: 5; value: not a long text">
</a-entity>
But the geometry stays as is if I update the text value by executing in the console the following command:
document.querySelector('#testtext').setAttribute('text','value', 'new text is long enough to wrap and force multiline content')
This results on a multiline content that overflows in height the geometry. My expectation was to see the plane resize to fit the multiline text.
Am I missing some attribute or setting or trick?
Thanks in advance for your help

Related

How to make thing take revolution rather than rotation?

```
<a-entity class="rota" id="duck1" color="#fdfd96" scale="0.1 0.1 .1" position="2 0 -7" animation="property: rotation; to:0 -360 0; loop:true; easing:linear; dur:30000">
<a-entity class="rota" color="#F0FFF0" gltf-model="spaceship.glb" animation__mouseenter="property: rotation; to:0 360 0; easing:linear; dur:4000; startEvents: mouseenter" position="0 0 1" scale="2 3 3" collison-check="el: #otherduck; radius: 0.15; other-radius: 0.15;"> </a-entity>
</a-entity>
```
In the first animation it makes the object take the whole revolution in a loop, completing it at specific interval. Whereas, I am using same animation(animation_mouseenter) setting inside then it just rotates along y-axis at a fix point given by previously animation. I want animation_mouseenter to work in a manner same as previous one but comparitively faster then previous animation.
In there is another issue as well. Now it just respond to first mouseenter call but not later. I know this is because I have not used from in animation_mouseenter. But I don't want animation to start from one particular location, rather I want it to occur whenever there's a mouse over the entity.
The outer entity is a parent of the inner entity.
The inner entity's position is set relative to the parent (outer) entity.
When you rotate the outer entity, you will see the inner entity moving round in a cicle, around a pivot point that is the position of the outer entity.
When you rotate the inner entity, you are just rotating the inner entity, so it will just spin on its own axis.
An analogy: imagine a cookie on the edge of a plate. The outer animation is likely spinning the plate: the cookie moves around. The inner animation is like spinning the cookie: it stays still and just spins.
For the effect you want, I think you need to move the inner animation onto the outer entity (spin the plate, not the cookie).
You can still trigger it with the mouseover event because the mouseover event will bubble up from child to parent. Alternatively, you could use a small component to relay events from one object to another (here's an existing component that could help you to do that https://github.com/diarmidmackenzie/key-bindings).

Is there a way to reflect a sphere so that it behaves as a skybox in A-frame? (A-frame docs suggestion not working)

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.

How to rotate a glTF model on the spot in A-Frame?

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.

<a-sky> only display image with side:back

My sky image will display with material side:back but not with side:front... I'm mystified. Currently showing with side:back here:
https://dour-blouse.glitch.me/
The image is reversed, and I don't want it to be. If side:back is correct, should I just flip the image in photoshop?
you can flip the image using the scale attribute (setting the scale to -1 inverts the image in either axis) , and then switch the visible side:
scale="-1 1 1" material="shader: flat; side: front; src:#nyc"

How to create a 180-degree/semisphere/segment/partial video sphere in A-Frame?

<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.

Resources