I need rotate X axis of a-sky in my task in a 360 image liked project, but when I rotated, the look-controls works weird. The reason may be that camera's axis need change, and how can I change that camera's axis ?
look-controls works weird
<a-sky src="#skyTexture" rotation="30 0 0"></a-sky>
I guess you want to change the basis axes of the camera space, the easiest way to do that is wrapping the camera with a rotated object:
<a-entity rotation = "30 0 0">
<a-camera look-controls>
</a-camera>
</a-entity>
But, be careful, if you do that, all the objects in the scene would have a slope.
The controls are okay, You crooked the image, and the horizon is no longer a perfect circle around the camera, so Your perception feels off. If You rotate the camera, You will see the same image as if You didn't change anything.
I made a quick comparison of the rotations:
Take a look what is the relation of the horizon on the image, and the (0,0,0) grid. You can't rotate the sky in x, or z, and expect the guy to be lower and the horizon to be normal. If You want the user to be "higher", change the a-sky to a a-sphere and position it a bit lower than the camera, like i did here: https://codepen.io/gftruj/pen/Kqbxbx.
Craig.Li's anwser is correct if You want to rotate the camera, but its a bad idea to mess with the camera since the user should be the only one manipulating the camera ( what i think the initial intention of a-frame was ).
Related
I have an A-Frame scene that contains, among others, a <canvas> element that is the material source for a 3D scene object. I can paint on the canvas programmatically, and it shows up as texture. So far, so good.
However, I'd now also like to enable the user to paint something on the canvas using the controllers. I have added two raycasters/controls:
<a-entity laser-controls="hand: left" raycaster="objects: table2"></a-entity>
<a-entity laser-controls="hand: right" raycaster="objects: table2"></a-entity>
And on the table2 object, I have added a raycaster-listen mixin as described in https://aframe.io/docs/1.3.0/components/raycaster.html#listening-for-raycaster-intersection-data-change.
This works in so far as I get the console log entries with the world coordinates of the intersection point, but I'm absolutely stuck at how to get from the world coordinates back to the canvas coordinates I need to actually paint in the right spot.
In addition, it seems no canvas draw commands I issue in the raycaster-listen tick callback actually have any visible effect (regardless of coordinates).
Any hints appreciated!
As usual, I figured it out the next day 😉
[...] I'm absolutely stuck at how to get from the world coordinates back to the canvas coordinates I need to actually paint in the right spot.
Solution found at https://discourse.threejs.org/t/convert-camera-frustrum-to-uv-coordinate-on-texture/16791/2 - just use intersection.uv which actually contains the normalized texture coordinates of the intersection point. Scale by canvas width/height and you're done.
[...] it seems no canvas draw commands I issue in the raycaster-listen tick callback actually have any visible effect.
Solution found at aframe not rendering lottie json texture mapped to canvas but works in three.js - set texture.needsUpdate = true; in the tick callback after drawing on the canvas.
I'm working on a project where I'm putting a 3d cylinder object in front of a static 2d image on a three.js canvas, trying to make the cylinder look like its part of the photo.
In order for the 3d cylinder's perspective to match the photo behind it, it needs to be moved down the y axis. The problem is then it's moved out of the scene. I need a way to render the 3d cylinder how it would look with a -y position, but not actually move down the scene.
See image for details:
A combination of x-axis rotation to around 24 degrees, Lowering the FOV to around 10, and increasing the camera.position.z to about 35 got me the results I needed. Thank you #prisoner849
I'm using THREE.OrbitControls to dolly a THREE.OrthographicCamera. But, even thought the ortho camera renders correctly as repositioned, all that is updating on the orthographic camera is the 'zoom' property. Even after calling camera.updateProjectionMatrix(). Do I need to manually update the 'position' property of the camera based on the updated 'zoom' property? I want to display its position in my UI after dollying it.
(Note, this is a rewrite of my other question,THREE.js Orthographic camera position not updating after zoom with OrbitControl, in which I thought I was zooming with the OrbitControl but was actually dollying. Sorry about this).
Dollying in/out with an ortho cam would have an unnoticeable effect. With ortho cams there is no perception of proximity because it has no perspective. All objects appear the same in size regardless of distance from the lens because the projection rays are all parallel. The only difference you'd notice is when the objects get clipped because they're past the near or far plane.
So, the decision was made that scrolling with OrbitControls would change the zoom of the camera, narrowing in/out of the center.
If you want to force the camera to move further/closer of its focus point, you could just translate it back/forth in the z-axis with:
camera.translateZ(distance); A (-) distance would move it closer, and a (+) distance would move it further from its focus point.
I have a earth object that I would like to rotate using animation in A-frame.
I just want the object to rotate forever and I don't know how to do it.
Below is my code thanks!
<a-sphere rotation="45 0 0" position="-44.277 50 -80.933" radius="30" src="images/earth.png" roughness="0.6">
<a-animation attribute="rotation"
easing="linear"
dur="10000"
to="0 360 0"
repeat="indefinite">
</a-animation>
</a-sphere>
That code is correct. It will take 10,000 ms (10 seconds) to complete 1 rotation, and it will repeat indefinitely ("forever"). I just tested the code and it works. If the earth.png texture isn't appearing, it may be difficult to see the sphere rotation. If you use the same code on an <a-box>, for example, it's much more obvious.
That said, since you have the rotation for the <a-sphere> set to 45 along the x axis and have the <a-animation> set to rotate to 360 over the y axis, it will not rotate in a linear fashion.
This can be remedied by adding a container <a-entity> element and setting the default position and rotation on that entity, removing it from the <a-sphere>, which will now be positioned relative to its container.
Here is demo: https://codepen.io/dansinni/pen/MVgqxd
Note that I had to use a different texture for the Earth.
Using Aframe 0.6.1 I'm trying to make a button in the scene who begin an animation. This animation must rotate only the X angle of camera to 0. I like to leave all other angles same as before (ok, Z angle never moved, so like to only save Y angle).
an approach
<a-camera>
<a-animation begin="cameraToHorizonEvent" attribute="rotation.x" to="0" dur="2000"></a-animation>
</a-camera>
Here "rotation.x" DON'T WORK, something like this it's what I like. It's possible?
A temporal solution is to use animation-component, set rotation as property (attribute in a-animation), and do cameraEntity.setAttribute('animation', 'to', '0'+camRotY+camRotZ) and other stuff but I think that another solution can be
Thanks