I am using Google Maps Three.js overlay.
this.camera.projectionMatrix.fromArray(
transformer.fromLatLngAltitude(this.anchor, this.rotation, this.scale)
)
In the Google provided example they are changing camera position via projection matrix.
For objects near to (0, 0, 0) rendering is pretty good, but when object is far from (0,0,0) (for example {x: -13604029, y: 6035046, z: 200}) I get very bed rendering because renderer thinks that object is not visible and pixeletes it.
How can I disable this optimization or how can I fix that?
You can see example here
Related
I tried to use CSS3DRenderer to transform my DIVs，but I encountered this problem.
Because CSS3DRenderer is totally based on HTML, so it just doesn't act like what WebglRenderer does.(WebglRenderer can identify Backside and FrontSide)
I did try to identify Backside or FrontSide by testing the dot product of CSS3DObject direction and camera direction.
const objectToward = object.getWorldDirection(new Vector3(0, 0, 0));
const cameraToward = base.camera.instance.getWorldDirection(new Vector3(0, 0, 0));
console.log(objectToward.dot(cameraToward))
But I found this way is still not perfect, because I am using perspective camera.
(I can still see the CSS3DObject even the directions are orthogonal, just like the picture above.)
I just need to know how to identify Backside or FrontSide even if the scene is rendered in perspective way.
There's no need to perform all the calculations you're trying. In order to hide the HTML element when it's facing away, you can simply apply the following CSS property to it:
backface-visibility: hidden;
This will automatically not render the object when its face rotates away from the camera. See here for more information on that CSS rule
I am developing a standard panorama viewer, where a 360 picture is placed inside of a sphere and the user can look around using mouse and touch. I am using OrbtialControls for this and it is working fine.
The user can also load a new 360 picture, after loading the picture, I am trying to set the camera direction so that the user is looking in a certain direction. As I am using orbitalControls, I am using control.target.set(x,y,z) to do so. However that causes the camera to lock at that point and if I use the mouse or touch to look around, the camera position changes and it revolves around that point, rather than looking around inside the sphere.
Has anyone else seen this kind of behavior? Do I need to do something
The code is pretty simple.
controls.reset();
controls.target.set(window.newLookAt.x,window.newLookAt.y,window.newLookAt.z);
The purpose of controls.target.set(x,y,z) is to set the pivot point, so what you are facing is the expected behavior
Instead of setting the target (that has to be (0, 0, 0) in your case), why not putting the camera inside a THREE.Object3D and rotate this object
var camera = new THREE.PerspectiveCamera()
var container = new THREE.Object3D()
container.add( camera )
camera.position.set( 0, 0, 0.1 )
var controls = new THREE.OrbitControls( camera, renderer )
controls.target.set( 0, 0, 0 ) // Optional
container.rotate.y = Math.PI / 2 // Or whatever you want
So I ended up solving this myself. The issue was that my understanding of orbitControls was slightly off. All I needed to do was to set the target point in the same direction but way closer to the camera and presto, issue solved and things are working fine now.
I'm trying to get lensflare to work in ThreeJS.
It seem to function okay when there is distance to camera but if I camera is moved to about 50 units or less distance to lensflare the flare disappears! Why?
Update:
After further investigation I noticed that lensflare works fine in webgl_lensflares.html example. The problem is when I try to add it to ThreeJS Editor. Adding it to Editor causes 3 problems:
Rendering becomes painfully slow.
When I rotate the scene the lensflare rotates fine, but when I move the scene the lensflare moved the opposite direction.
If I put the lensflare at (0,0,0) it disappears when I get too close to it, but if I put it in locations away from origin such as (0,10,0) it doesn't have that problem.
Here is the code that I added to Editor in Viewport.js:
var textureLoader = new THREE.TextureLoader();
var textureFlare0 = textureLoader.load("textures/lensflare/lensflare0.png");
var flareColor = new THREE.Color(0xffffff);
flareColor.setHSL(0.55, 0.9, 0.5 + 0.5);
var lensFlare = new THREE.LensFlare(textureFlare0, 100, 1.0, THREE.AdditiveBlending, flareColor);
lensFlare.position.set(0, 0, -10);
scene.add(lensFlare);
I figured out the answer to all my 3 problems:
Netbean debugger was slowing down the rendering. Once I turned off Netbean debugger it became much faster. I still notice flare rendering slows down rendering a little but it's at least usable now.
The reason lensfare would move the opposition direction was because I passed 1.0 as its 3rd parameter. Should've been 0.0
The reason why at (0,0,0) I don't see the flare is because there is another shape located on that position. Apparently flare is not visible if it is position insider another shape. I had wrongly assumed that flare is rendered last and hence always visible.
i am trying to use the combined camera (found it under "Examples").
the problem is when i use it in Orthographic mode i still see the arrow and the box helper like in perspective view.
for example, when i am trying to zoom in with the mouse scroll, i can see the plane in the same size (as it supposed to be in orthographic view) but the arrows and the small box between the arrows is getting smaller or bigger.
when i tried to debug it at the renderer function i saw the camera is still in orthograpic mode when it render the arrows.
any idea how can i make all the object to be in orthograpic view but still use the combined camera?
edit:
i am not sure which part of the code i should post so i add a picture to describe my problem.
you can see that i am in an orthographic camera and i'm trying to zoom in and i can see the axis arrow getting bigger or smaller.
the difference between the plane when zooming
Found a possible answer which worked for me:
under TransformControls.js
change the update function to:
scale = (camera.inOrthographicMode == true)? 100 : worldPosition.distanceTo(camPosition ) / 6 * scope.size;
I am using three.js to create a tube geometry and have a feature where the camera rotates to particular angle with the click of a radio button.
To rotate the camera, I tried using below code:
camera.rotation.set(2.88, -0.9, -2.0);
camera.position.set(-1800, 0, -1200);
It doesn't have any effect. but when i use the same code by first setting auto rotation update to false, it works
camera.rotationAutoUpdate = false;
camera.rotation.set(2.88, -0.9, -2.0);
camera.position.set(-1800, 0, -1200);
The issue with setting rotationAutoUpdate to false is that once the rotation is set, if i try to rotate the tube with mouse event, it messes up the whole rotation functionality. And if i try to set it to true again, the above required rotation effect is not visible.
Please suggest, if I am doing something wrong or if i am missing out something? Thanks