There's no need to show the code as the Codecademy exercise tries to explain how the inspector works. So basically I've learned how to make the camera start or to move in the scene. So my question isn't about moving the camera. Rather, what I want is (using the inspector) to rotate the scene in order to look up at a certain character through the ground.
Where in the element subsection can I find the coordinates of the scene? I know the camera is positioned at (0,0,0) by default and you can move around using the ASWD movement keys. Although I don't think I can see from the ground using those keys.
I hope I'm being specific enough and there's no issue with the question. I've Googled for some time but I haven't found an answer. So if an answer is out there, sorry for not having found it.
Thanks in advance.
Edit: enter image description here
I've managed to enter into the A-Frame inspector (as I was using the default one) and drag the <a-entity> as I think this is the camera object. Now, how can I try and see this picture from the ground?
Thanks for editing my question. Feel free to do it. Have a nice day.
You're doing this Codecademy exercise?
I think you should find out where you can modify the a-plane primitive. Then play around with its rotation property.
Related
Turns out I’m working with the Autodesk Forge viewer and Three.js, trying to render 2D text that can be interacted with (specifically select, rotate, and move).
To do this I am working with meshes (using MeshBasicMaterial, Mesh and TextGeometry) but it turns out that the text does not look perfectly sharp, it presents aliasing and I found that according to the API reference, the antialiasing is not applicable to 2d.
Here are some examples of the problem, as you can see, the more I move away from the plane, the worse the text looks (and even up close it doesn't look perfect):
I have tried to make a test representing the text with a Sprite (despite the fact that it would mean having to change the entire implementation already made with meshes of other functionalities) but apart from the fact that I cannot see it, I have seen example images and they do not appear either well: aliasing is visible from a distance and it looks really blurry up close. Here some examples:
Is there a way to correct this problem or is this the most I can get in 2D? I've tried searching for information on this but can't find anything helpful. And what has puzzled me the most has been realizing that antialiasing was not applicable in the case of 2d, like making it clear that nothing can be done to fix it.
I would be very grateful if you could solve my doubts, thank you very much in advance for your help.
An easier alternative, is to just use a higher pixel ratio for the renderer...
window.devicePixelRatio=2;
viewer.resize();
For example, using the custom geometry text, from Joao's demo, you can see the same aliasing issue at DPR=0.5 and DPR=1.0 ...
https://joaomartins-forge.github.io/textgeometry-sample/
But when I set the DPR=2.0, the text looks clean. The trade off is rendering performance, but your 2D drawings may be simple enough that it won't matter. You can use a 'mouse up' camera settle trick, to switch between DPR of 1 and 2, if you want a better UX experience.
There are a few ways to solve this aliasing issue for 2D (and 3D text).
The way I would recommend for your use case, is to use DIV elements (THREE.CSS3DRenderer), instead of text converted into three.js tessellated triangle geometry, as shown in this blog post:
https://forge.autodesk.com/blog/how-do-you-add-labels-forge-viewer
You can find out more information about THREE.CSS3DRenderer here:
https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer
and an Example here: https://threejs.org/examples/#css3d_periodictable
Using CSS3DRenderer instead of CSS2DRenderer, means you will get the correct scaling (and rotation) of the div element as you zoom into your 2D drawing and the mathematics inside the calculation for the matrix transform has less edge-cases.
Once you are using DIV elements for your text, you will notice that the text is sharper and has no aliasing issues. That's because it is not being rasterized by the webGL pipeline, but by the SKIA library used by chrome/firefox/opera/etc for rasterizing text.
There is one final option, that uses signed-distance fields, but it's probably overkill for what you need.
Let me know if you want some example code.
Here is a playground to illustrate my problem: https://playground.babylonjs.com/#V181I2#34
On my scene I’m trying to replicate the camera’s behavior we have with paraview.
left drag → rotation around some point. OK
right drag → panning of the camera, but without changing the rotation center. I managed to do that using camera.targetScreenOffset thanks to a Playground I found here (https://playground.babylonjs.com/#EBPQH9#43 → many thanks to the author !)
Now on double click (for example) on a mesh, I would like to change the center of rotation to the center of the mesh, but again without having the targeted mesh centered on the screen, without having the current view changed the slightest.
I’ve been searching a lot how to do that without success.
From my understanding, in order for the target mesh not to be automatically centered:
modifying the camera position is useless. It would only change the perspective.
setting the right values for the targetScreenOffset would work. But I don’t know how to determine them. I’ve been looking for the right way to project a distance computed in the world coordinate system (between 2 successive camera targets) to coordinates for the targetScreenOffset property, without success. I don’t even understand the units used by that property.
there must be some other ways ?
Right now I don’t feel qualified enough to write the camera’s behavior from scratch.
Would anyone be able to help me or point me in the right direction?
I am trying to implement a tool into my application. the tool would allow the user to plot a triangle meshes using the mouse. I have looked everywhere for a way to do this, tutorials, examples, etc and have not been successful. I have seen the FXyz library but that does not really simulate What I am trying to accomplish. The goal of the program looks as follows:
Use Case Sequence:
The user adds a png image to the 3D scene or drags it into the 3D scene using the mouse.
Once the image is being displayed the user would then be able to plot a mesh around the image.
Once the user has finished plotting the mesh. There would have to be a way to add the image being overlayed by the mesh as a texture to the mesh. The image should look the same after being added as a texture. Is this too hard or beyond the scope of what can be achieve in JavaFX?
Theoretically It would then be possible to drag the vertices of the mesh at draggable points and successfully applying transformations to the texture. Would this be possible?
Images showing what I am trying to achieve
As you can see maybe after plotting the mesh the points connecting the vertices can be dragged in order to manipulate or transform the shape of the mesh. If the mesh has a texture over it. would the image then also transform ?
Would this be possible with the TriangleMesh class that JavaFX has which by the way there is very little out there which explains how to use it and how the points, face points and texture points work. Very confusing =(.
Target End Result
My question is would the type of manipulation shown in the image above be possible in JavaFX? Can this sort of functionality be achieved using the TriangleMesh class or other similar class in JavaFX ? As you can see what I am trying to achieve is really image manipulation I would appreciate knowing if there is another better way to do this.
I unfortunately do not have any code I can share. I just cant seem to produce any regarding this task. I am not asking to be given code or for someone to solve the problem for me. I just want to see examples be guided into the right direction on how to do this and to know if it is even possible or should I just give up on it!
If you have read this far Thank you so much for your time I really appreciate it.
I have read your question till the end :-) In contrast to many people here you are at least providing a clear description of what you want to achieve. According to my own experience I would say that what you want to do is easily possible with JavaFX and the MeshView is the way to go here.
You can use your image as the texture for this mesh and you can distort the image by manipulating the vertices of this mesh. I have implemented part of your functionality myself for a project so I know that it works.
I've been working on a little space simulator demo using three.js and flightcontrols.js (an example that ships with three.js)
The demo is viewable at - http://www.zacharycarter.com/PrivateerRedux/demo.html
The control scheme is pretty simple - the mouse controls the camera and you left click to fire a projectile.
I'm having a little bit of trouble with how I'm spawning my projectiles. Currently I'm setting their rotation to the same rotation of my camera which I believe is what is causing my problems.
You'll notice that as you rotate the camera around the game world, and continue firing projectiles, that the position and orientation of the projectiles quickly becomes whacky.
I'm using quaternions to represent my camera's rotation but I also derrive the Euler angles from the quaternion before setting my projectiles rotation to match that of my cameras.
Any ideas as to what I'm doing wrong here? I have a feeling I need to figure out a constant front facing rotation from my camera rotation but I'm not quite sure how to do that.
Thanks!
If I understand this correctly, I think your problem is that you're applying world transformations and local transformations (i.e rotation in world space to have bullets fly in the right direction and rotation of bullets around the bullets' local axes) incorrectly. It seems they're all being applied in the same space.
Instead of writing up a whole new example, however, I'll leave it to the old, trusty internet to hand us some guidance on the issue using the common example of a solar system.
This might enlighten you:
http://docs.techsoft3d.com/visualize/3df/latest/Hoops3DGS/prog_guide/03_3_viewing_modelling_matrices.html
(have a look at figure 3.3.2.b)
...and here's an OpenGL example demonstrating the same thing:
http://www.codemiles.com/c-opengl-examples/solar-system-transformations-t7292.html
There's the theory anyway, hope that helps!
I would like to add a sphere with a 2d gradient as texture to create a skydome. I read that in openGL this is often solved by rendering the skybox without depthtest in an additonal pass.
I disabled depthTest on my sphere so everything else is drawn in front of it, it's kinda giving me the disired effect but depending on the camera angle it clips through other objects in my scene.
I was looking at several examples which make use of THREE.EffectComposer and a second scene, I may be completely after the wrong thing here but I think that could solve this. The thing is I havent ever touched the effectComposer and have no idea at all how to work with it and which things i exactly need.
I would aprreciate any input on this, maybe I'm after the wrong stuff at all.
Here are two three.js examples in which a skydome with a gradient is created. They do not involve EffectComposer or disabling depth test.
http://mrdoob.github.com/three.js/examples/webgl_lights_hemisphere.html
http://mrdoob.github.com/three.js/examples/webgl_materials_lightmap.html
three.js r.55
You dont have to use a cone or other 3D-geometry to simulate a gradient sky.
I solved it using a canvas (with 3 gradient-spots, lightblue -> white (horizon) -> darkblue) and draw it as sprite in front of my camera with the right distance to it (fog-distance).
You only have to manage the distance when moving/rotating your cam.
Tip: Use mesh.scale.set (xx,xx,1) to zoom the canvas-texture to needed size.