In Oculus VR browser (Samsung Gear VR), when a plane with png(alpha channel) texture in front of lensflare or a object block parts of lensflare, the lensflare become a black square. Any idea how to fix?
Related
I am currently using three.js and trying to create a 3D experience with a semi-transparent material that can be viewed from all angles. I've noticed that depending on the camera angle, only certain portions of the mesh are semi-transparent and will show the content behind them. In this example below I've created two half cylinders and applied the same transparent material with the stack overflow logo. The half cylinder on the left properly shows the logo on the closest surface, as well as the surface behind it. The half cylinder on the right only shows the logo on the closest surface and fails to render the logo that wraps behind it. However, it does properly render the background image so the material is still treated correctly as transparent:
If I spin the orbital camera around 180 degrees the side that originally failed to see through now works and the other side exhibits the wrong behavior. This leads me to believe it's related to the camera position / depth sorting. The material in this case is a standard MeshPhongMaterial with transparent set to true, side as DoubleSide, and a single map for the transparent stack overflow logo. The geometry is formed from an opened ended CylinderGeometry. Any help would be greatly appreciated!
I am making a Three.js sphere geometry with a radius of 4000, put a JPEG image on it and position the camera within its center and it works fine.
When I made the sphere with a radius of 9000 so the texture should look further away, it appeared as if there was a black "hole" in the sphere in the very direction the camera was looking. Also the texture on the sphere looks nearer and not further away. When I move the camera towards this "hole" it becomes smaller.
new THREE.SphereGeometry(9000, 32, 32);
The camera has a .near and .far setting. If .far is lower than your sphere radius, it will clip like you are describing.
Try setting camera.far = 20000
I have a PlaneBufferGeometry that isn't displayed when I switch from a PerspectiveCamera to a OrthographicCamera. Other objects like Box2D work fine with both cameras.
Is ortographic camera not able to render planes?
Orthographic cameras can render planes, but since planes have no thickness, they will generally be "invisible" if the plane points up or down, for example, if it represents a floor. This is the nature of the orthographic camera: its field of view doesn't differ with depth, and it doesn't offer perspective.
Is there a way to correctly display more than one transparent texture in three.js? There are no problems if you try to render a transparent texture on a non-transparent textured plane below, but if you have more than a transparent plane, the nearest will "delete" the others below as you can see here:
On the left pic, there's what I would have (achieved adding depthWrite = false to every transparent material), on the right there's what I have, only setting transparent = true to materials with RGBA textures.
I already tried using alphaTest, but it isn't what I need, and depthWrite sometimes can't satisfy my needs (look at the green line bounding the path in the first screen, which hasn't been covered by the house shadow).
Code is a little modified version of webgl interactive draggable cubes
5 meshes is created with new THREE.Mesh (red) and 5 with new THREE.SceneUtils.createMultiMaterialObject (blue)
[sorry, example deleted]
Please try to drag them, red and blue cubes moves differently.
Red cube moving is related to the mouse (screen) if I drag one cube to the left, cube moves to the left.
Blue cube moving is related to the ??rotated coordinate system (or camera rotation)?? , if i drag one cube to the left, cube can move up or down and faster than mouse.
I assume it is because createMultiMaterialObject is a group of THREE.Mesh with the same geometry and different materials. Anyway I can't see a reason. Why they move differently?
How to make red and blue cubes behave equally onDocumentMouseMove?
You really need to explain the "move differently" part. Both in Firefox and Chrome I see them rotating, translating and scaling as expected.