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
Related
I'm playing about with three.js and webGL with an attempt to get html objects overlaid on a webGL model.
I intend to use three.js object loaders to render a 3D model, where I can then allow users to overlay HTML DOM objects in 3D space via a custom UI.
I've mainly been using the various different examples in the three.js docs (https://threejs.org/examples/ and https://codepen.io/AdamEDGE/pen/RRjEwz).
In order to allow the user to move the overlaid HTML objects via the UI, I've added the transform controls (https://threejs.org/examples/misc_controls_transform.html).
Things seemed to be going relatively well up to this point, but now I see that the controls are not hoverable or clickable to move the element.
I suspect I'm either missing code or an issue with the camera not aligning correctly, but I'm very new to this so I'm guessing.
I have also experimented with Jerome Etienne's blending tutorials, but on testing that caused other issues and I think may not be worth the trouble for what I'm going for (http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/index.html).
I have created an example that shows the problem (click on an object and the controls should show).
Its a simple webGL torus with two HTML images overlaid and mapped to a Mesh so I can link the controls to the HTML elements which are on a different scene.
https://jsfiddle.net/mattscotty/h5wuq86y/
control = new THREE.TransformControls(camera, glRenderer.domElement);
control.addEventListener('change', render);
The controls show on all the correct places when clicked as expected and I can use the keyboard to change the transform type (again see https://threejs.org/examples/misc_controls_transform.html for how it should work).
As I can't click or hover, I can't hook up to the relevant events.
I'm brand new to this and I'm quite sure I'm missing something obvious, so any help is appreciated.
i want to disable the camera rotation, while being on mobile.
I though making look-controls="hmdEnabled:false" would disable moving the camera along with the mobile device, yet it didn't work.
I tried to find which controls should i disable, but i only found some intel stating, that WebVr drivers rotate the scene #HMD orientation, not directly from the gyroscopes.
Nonetheless, I have no idea how to lock the camera, so it can be only moved by dragging Your finger.
Thanks in advance
I packaged up a component that does this at https://github.com/AVGP/a-touch-controls:
<a-scene>
<a-entity camera touch-controls></a-entity>
</a-scene>
These controls are using mouse (click and drag) or finger (swipe) movements to move around the camera, but does not use the gyroscope on mobile, except when explicitely entering VR mode, which still permits Cardboard usage etc.
If you want your own control scheme, you'll need to make your own controls. You can copy and paste some code from the look-controls and customize it: https://github.com/aframevr/aframe/blob/master/src/components/look-controls.js
I was puzzled with resetting camera rotation, I wrote a simple component to reset camera rotation, the code is published at aframe demo
I add 'click' event listener to the blue box, if the box was clicked. then, i would reset camera rotation to {x:0,y:0,z:0}. but, as you see, there is no effects. I step in to my component and i found my code did work, but something set the rotation back after my function.
I have tried:
use look-controls instead of universal-control. in this way, it works on the PC browser but my mobile phone.
use a newer aframe-extras lib, v3.1.0. and I got an error 'Cannot read property x of undefined' at aframe-extras.js:5265.
Anyone hints?
You could try using a wrapper entity around the camera and modifying that. Or if that doesn't work...
Since the controls continually update the camera rotation on each frame, any rotations you set may be overwritten by the camera controls. You could perhaps try pausing the camera (el.pause()), setting the rotation (el.setAttribute), and resuming the camera (el.play()), but no guarantees that will work.
If it doesn't, you could maybe fork any control implementations and add some sort of logic to allow you to manually update the rotation.
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.
I am trying to achieve an effect similar to one of the cardboard app examples that Google has put out with their cardboard app called the 'exhibit'. I have a 3D object that I want to rotate using device orientation control. Right now with just the device orientation control, I can view the 3D object but when I turn around, the camera rotates (it seems) causing the object to fall out of view until I turn all the way back around to where it was in the beginning. In other words the camera seems to rotate in its axis as I look around. What I want is to be able to rotate the object as I turn around.
Kinda like this example http://threejs.org/examples/#misc_controls_orbit except I want to rotate using device orientation control.
Any idea how I can incorporate this feature?
Thank you for your assistance.
The answer to my own question for future seekers is to replace camera in
controls = new THREE.DeviceOrientationControls(camera, true);
with the 3D object you are trying to rotate.