I'm using THREE DeviceControls via React Three Fiber for 360 video.
I'd like to set an initial angle or setAzimuthalAngle like is available in OrbitControls in that library.
Is there a way to set the Y angle in DeviceControls?
I tried setting the controls euler but that doesn't help.
Related
In the scene, there is an object that I'm looking at with a PerspectiveCamera. Using OrbitControls, I can move around the object.
I want to set viewing angle to the camera.
Concretely, here is the example where the behavior I suppose is realized.
Click camera icon and you find the slider to change viewing angle.
Is it possible to realize this, using PerspectiveCamera?
Or should I use Effect Composer for Post Processing? If so, I look for shader code.
i got a Scene which loads a very large .obj File (a lot of faces), this results in low fps ...
I want to set a maximum distance from camera where faces should be rendered.
So far i only tried to use the fog component, which does not what i expected...
Anyone got a idea ?
I believe you can achieve this by a THREE.PerspectiveCamera property called far which determines the camera frustum far plane.
You can check it out in the docs. It can be easily set it like this:
let scene = document.querySelector("a-scene")
scene.camera.far = 3 // default is 1000 afaik
Check it out in this fiddle (move around a bit).
Here i threw it into an aframe component.
I used sprites in Three js to display 2d images, the problem that I faced with sprites that they rotate to face the camera.
I am trying to use it to fake a shadow for the 3d object. When I rotate the camera the 3d object tilt with the camera until it makes a 30-degree angle with the horizontal but it's shadow (2d sprite) still at 0 degrees.
How to disable the auto rotation of sprite, or is there another solution to preview 2d images in three js to look like a 3d object?
How to disable the auto rotation of sprite, or is there another solution to preview 2d images in three js to look like a 3d object?
It's not possible to disable the orientation towards the camera with a flag or configuration. You would have to modify the shader code of SpriteMaterial for this.
I suggest you use a mesh instead based on a PlaneBufferGeometry and a MeshBasicMaterial. Alternatively, you write a custom billboard shader with ShaderMaterial or RawShaderMaterial.
I've been struggling with an application where I'm trying to set the camera rotation initially so when the scene is loaded, you'll be looking where we want you to look.
The backstory, I'm creating a panorama viewer where the panorama is applied to a mesh with a sphere geometry.
The problem I'm having is I don't seem to be able to set the camera rotation. I've tried multiple attempts, but none have been working. I attempted setting the camera rotation after creating the camera, and I tried applying the target of my orbitcontrols and setting the object rotation in the orbit controls. I haven't had any luck yet with just setting an initial camera rotation.
I'm really hoping at this point that this is due to something minor that I'm over looking.
Here's a source: http://www.freeptools.com/mapster/testing-360s2.php
It shows the camera itself AND the orbit controls object. It also shows what their target is I'm setting, and what they really are. So far I haven't been able to get this to accept anything I give it.
THREE.js OrbitControls take over the camera completely, so you should not use that in conjunction with updating camera rotations.
Instead, OrbitControls has methods that help you do this: https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js
orbitControls.rotateLeft( angle );
orbitControls.rotateUp( angle );
In addition, you can move orbitControls.target around (it's a THREE.Vector3) and the camera will just look to that direction.
I have a web application I am trying to show a plane of map image tiles in a 3D space.
I want the plane to be always horizontal however the device rotate, the final effect is similar to this marine compass demo.
I can now capture device orientation through the W3C device orientation API for mobile devices, and I successfully rendered the map image tiles.
My problem is me lacking of essential math knowledge of how to rotate the camera correctly according to the device orientation.
I am using the Three.js library. I tried to set rotation of the camera object directly by the alpha/beta/gamma (converted to radian). But it's not working since the camera seems to always rotate according to the world axis used by openGL/webGL not according to its local axis.
I came across the idea of rotate a point 100 unit in front the camera and rotate the point relatively to the camera position by angles supplied by the device orientation API. But I don't know how to implement this either.
Can anyone help me with what I want to achieve?
EDIT:
MISTAKE CORRECTION:
For anyone interested in implementing similar things, I found out that Three.js objects uses local space axis by default, not world space axis, I was wrong. Though the official document stated that by setting "object.matrixAutoUpdate = false" and then modify "object.matrixWorld" and call "object.updateWorldMatrix()" you can manually move/rotate/scale the object in world axis. However it does not work when the object has a parent, the local axis matrix will always be used when the object has a parent.
According to the W3C Device Orientation Event Specification, the angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y''.
The Three.js camera also rotates according to intrinsic angles. However the default order in which the rotations are applied is:
camera.rotation.order = 'XYZ'.
What you need to do, then, is to set:
camera.rotation.order = 'ZXY'; // or whatever order is appropriate for your device
You then set the camera rotation like so:
camera.rotation.x = beta * Math.PI / 180;
camera.rotation.y = gamma * Math.PI / 180;
camera.rotation.z = alpha * Math.PI / 180;
Disclaimer: I do not have your device type. This is an educated guess based on my knowledge of three.js.
EDIT: Updated for three.js r.65