When I look at this demo from three js in my mobile device I get duplicate screen:
https://threejs.org/examples/#webxr_vr_video
When I look at some youtube 360 stereoscopic video for example: https://www.youtube.com/watch?v=oR5LEg1rpUo&ab_channel=BLUERAVENstudios I get normal behavior.
Is this the correct behavior for three js demo ? What is picture divided in 2 parts? Can this three js demo behave the same as youtube?
Yes, this is the correct behavior for that Three.js demo. See here for WebXR description on each device. Specifically, you're interested in the part that reads:
Enable VR by providing pose information and allowing the WebGL scene to be rendered side by side to be placed in a headset like the Cardboard
So the reason you're seeing it side-by-side is because you need a Google Cardboard to get the VR experience.
Related
Three js has this example: https://threejs.org/examples/webxr_vr_video.html But the angle doesnt change perspective when you move the phone around unless you enter VR mode.
I am looking for a way to make video behave in mobile browser as demonstrated here: https://bitmovin.com/demos/vr-360 When you move mobile phone around you can see different angles of the video (that is before you even enter VR mode by clicking glasses icon).
How to change the type of camera used in three.js/editor? I want to do this using scripts, and not using the add camera button (Add → Orthographic Camera). I try to announce the camera again, but I can't. I'm trying to check the view of the main camera using the function (console. log(camera)) — the console shows that the camera has changed. But, when you click the PLAY button, the view remains the same as it was. Thank you for your help and feedback, I am very grateful for this!
It is not possible to do what you are looking for since cameras are handled within the editor. You can't use scripts to change the type of camera used for rendering.
In general, there is no full support for orthographic cameras in the editor. For example the editor's controls only support perspective cameras as well as the app player that playbacks exported/published applications. However, there is a feature request at GitHub that tracks the improvement of orthographic camera support:
https://github.com/mrdoob/three.js/issues/16008
May I have a 2D layer for UI, Text, Buttons, etc over the 3D scene in ThreeJS?
Ideally something like engine from PixiJS inside ThreeJS? I've seen PixiJS offers some 3D features so why not combine both libraries in something super-powerful? I just do not want to place any HTML Dom elements over WebGL canvas as this will probably slow down performance on Mobile devices.
One way to solve this issue is to implement the UI as screen space sprites like demonstrated in the following official example (check out how the red sprites are rendered):
https://threejs.org/examples/webgl_sprites
The idea is to render them with a separate orthographic camera and an additional call of WebGLRenderer.render(). Besides, instances of THREE.Sprite do support raycasting which is of course useful when implementing interaction.
Building up on Mugen87's answer, you can also use THREE.Shape to make visual containers adapted to the user screen size :
https://threejs.org/docs/#api/en/extras/core/Shape
You can use THREE.Shape to make mesh-based text, is illustrated in this example :
https://threejs.org/examples/?q=text#webgl_geometry_text_shapes
You should also have a look at three-mesh-ui, an add-on for building mesh-based user interface with three.js :
https://github.com/felixmariotto/three-mesh-ui
I'm working on HTML5 canvas in Adobe Animate CC. Before embedding video I've created click actions and added links and since the video has been added (by Components > Video) all clickable objets stoped to work. Video is playing and slides and all animation is happening except interactive elements. I am feeling that the video is somehow embedded above everything (I have video layer at the very bottom).
Would you be able to help me please? Any advice appreciated
Video isn't part of the canvas, it's DOM element and it's over HTML5 canvas by default. If you'll view Animate's generated HTML code you can see it (video tag in "dom_overlay_container" div).
You need to rearrange your project and keep in mind that you have other DOM elements too in addition to the canvas.
I have used the ARScreen.cs script and ar_screen shaders from the AugmentedReality scene provided in getthehub.
The GUI shows perfectly, the background/Video Overlay displays perfectly but everything else draws over the video and stains. Video Overlay and GPU Acceleration options are enabled on Tango Manager, Ux script is enabled but its options are disabled.
Any advice regarding having the 3d objects render normal (exactly like the markups in the unity example project)
Thanks
Solved! Enable Ux script's options, set the culling of the main camera, the camera you are using for your arscreen.cs script to solid color white, and then in the arscreen.cs I commented out the command/call //_UpdateTransformation(timestamp); in my case... apparently the _UpdateTransformation command placed my camera far from the player's object and thus objects were not visible and it seemed as if the video overlay covered my seen.