ThreeJS | Hide the tube when my camera is within it - geometry

I have a scene with a Tube(Material side set to BackSide)and other things(not relevant to question) and a camera flying through the scene including travelling through the tube. I would like to hide the tube when the camera is within the tube.
Ideally setting the Tube to Front side would have solved this question. However the tube is set to backside by design. I could check the camera look at position and check if it is within the circumference of the tube, but figuring out the radial segment of the tube seems challenging.
In the picture, the tube needs to be hidden during the red dashed portion of the camera trajectory.
Any suggestions ?

Related

Phaser - Change width and height Camera

In normal i have canvas size 500x500 and it will create camera size (500,500)
But when i change
game.camera.width=5;
game.camera.height=5;
then visible area it the same? what will happen when change width and height camera, how to understand that thanks
Based upon the documentation and an older post from the creator of Phaser on the HTML5 Game Dev Forum where he said:
You're not doing anything wrong, you just can't change the camera dimensions - they match the game size at the moment.
and then in 2015 on the same thread:
So you can tell if something is within the camera bounds or not. Which is impossible if the camera doesn't have a size.
suggesting that things haven't changed since 2013, and the camera doesn't resize as you're expecting.
Testing as well suggests that things haven't changed either.

Phaser - How to access a certain element on the layer

Hello i recently started to study Phaser and i have came to a problem witch i need help with solving.
I created a 3 layer map with Tiled. SkyLayer, GroundLayer, BrickLayer. I added physics that allow the player to move around the GroundLayer. I also added physics that allow him to jump on the BrickLayer. I am struggling to make a motion that allows the player to jump from the bottom hit the brick with his head, when he hits his head the motion of the brick to move up a pixel and then back down a pixel just as in Mario. I have trouble finding out how to identify which brick section i have hit from the BrickLayer so i can later on apply the animation to the brick element.
Simple Layers itself contains only tiles, which has no any animation.
If you need something to have animation, you need to use object layer and convert its objects to sprites with TileMap.createFromObjects.

Stroke outline of captured object

For a project, I have to follow a little chopper that's painted green. I want to follow the helicopter with a webcam and have the outline stroked on my screen. How would you do this?
I am using Processing for this.

get color on click texture three.js

(sorry for my bad english)
I'm using Three.js to create a panorama. I would like to know if it is possible to get the color of a texture which I clicked on?
For that, I already have created a sphere and I can get the 3D coordinates on the sphere where I clicked (using, raycaster, projection,...).
The texture on the sphere is a ".png" with transparency. The area I would like to detect is colored :
Could you help me?

Calculate distortion in equirectangular projection on a sphere

Following Quote from this source:
http://www.cambridgeincolour.com/tutorials/image-projections.htm
Equirectangular image projections map the latitude and longitude
coordinates of a spherical globe directly onto horizontal and vertical
coordinates of a grid, where this grid is roughly twice as wide as it
is tall.
I have a 13312 px width and 6656 pixel height Panorama picture. It's a equirectangular projection of a room and have a 2:1 ratio.
I use following formular to calculate the xPosition:
var xPosition = ( panorama.width / 360 ) * azimuth
Azimuth = Phi = Heading = Angle to the left or right
How do I project this now on a 1366x768px browser screen?
I think my results are wrong, because it's not on the point where it should be.. it could be because the sphere has a distortion on the left and right:
Is there any formular to calculate the position with attention to the distortion and scale it to fit on the browser screen? I looked many (MANY) sources to find a solution for this, but they always just say that equirectangular are just lat and long.. they don't consider the distortion.
Last question: To find a special solution, I tryed to put a plane on the circle and expanded the line which shows the alpha angle. I though with Phytagoras I could find the position.. but this didn't worked either.. maybe I did something wrong? Is this the way even possible or am I doing it wrong?
edit
THIS is what I'm actually looking for: http://othree.github.io/360-panorama/three-2d/
The black grid in the background. What is the name of this? For what do I have to google or look for? When you start the 2D Panorama, if you want to get the coordinations of the top right corner of the window, what do you have to do?
The whole calculation problem was about to create a Google Streetview similiar view from a 2:1 equirectangular image. We already found a solution for this with a great help from Martin Matysiak (https://github.com/marmat | Google).
It's been a while so I can't give a direct answer to what the main solution is, but I can provide a URL to an AddOn Martin wrote for adding the custom Markers that we actually were trying to make.
You can follow https://github.com/marmat/google-maps-api-addons and look for yourself. In the end it helped a lot to solve the main problem and let us continue with our main Framework for Google Business Tours.
If you follow the link in the threejs demo you included, it would take you to the source code.
particularly look at:
https://github.com/mrdoob/three.js/blob/dev/examples/webgl_panorama_equirectangular.html
and
https://github.com/mrdoob/three.js/blob/dev/src/geometries/SphereBufferGeometry.js
not sure if there is distortion though. The distortion comes from the fact that the texture is mapped to the sphere, and the sphere is rendered in 3D (openGL).

Resources