So I have the basic setup of a three.js-canvas rendered inside of a html-div. Inside the 3d-world I want to position an object in such a way that it appears to be glued on to this outside div (should never move in any way). Currently I have this solution:
render {
object.position.x = camera.position.x;
object.position.y = camera.position.y;
object.position.z = camera.position.z - 200;
}
This works for panning the camera (i have rotation disabled since i don't need it). However, once I zoom in or out it obviously doesn't work any more, since zooming doesn't change the camera's position values. My approach was to incorporate the camera.zoom factor into the above function, but i couldn't get it to work properly. Is there an easy transformation function or something i can use?
Edit: I created a jsfiddle, hopefully this helps figuring out the solution. As long as you pan the camera with right mouse the yellow plane doesn't move at all (wanted behaviour). When you zoom in or out it starts to move (unwanted behaviour): https://jsfiddle.net/rdyLp7uc/2/
Related
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 trying to get infinite zoom functionality,
While looking at the following three.js example:
http://threejs.org/examples/misc_controls_orbit.html
While getting closer to the target vector, the zoom factor reduced and reduced until it barely worked, for an end user it looks like it is stuck. panning won't really work, and in order to zoom out user needs to use the mouse wheel for like ages.
Is there a way to get infinite zoom functionality?
Thanks.
as mentioned it is zooming infinitely ( but it's zooming infinitely to the target at the center of the scene so it will never pass the target and thus never zoom beyond the center of the scene ), there's a couple changes you can make to the controls object in order to render the desired effect ( if I'm understanding you correctly ).
one small change you can make is change the target location from the center of the scene to the other end of the scene, given the the camera's far perameter is set to 1000 we can try setting the target's z position to -1000 in your init() function like so:
controls.target = new THREE.Vector3(0,0,-1000);
here's a working fiddle: http://jsfiddle.net/6gn7k0m4/
in that example you'll zoom past the scene and slow down when you get to -1000. Another approach might be to change the dollyIn and dollyOut methods so that rather than getting infinitely closer to the target what it does is change the camera's z index, this way when you zoom past the target the camera will still rotate around the center, you can do something like this
controls.dollyOut = function(){
this.object.position.z -= 100;
}
controls.dollyIn = function(){
this.object.position.z += 100;
}
here's a working fiddle for that example: http://jsfiddle.net/6gn7k0m4/1/
I use a directional light to cast shadow on the ground of my scene. I only have a single object. I decided to have a very small shadow to keep good shadow quality. The problem is I can't manage to shift the position of the shadow camera and keep it on top of the object.
I tried several things.
Targeting my object works but the center of the camera don't change, just its angle. I don't want this behavior. I want to keep the same light direction.
Changing the shadowCameraRight of the light but nothing change
Changing the shadowCameraRight of the shadowCamera, nothing change
changing the position of the sahdowCamera. The "debugger" moves but the shadow stop being drawn as if I did not do anyting
I think there must be a pretty easy way of doing this but I could not find it.
Edit :
var light = THREE.DirectionalLight(...);
var myObject = THREE.Mesh(); //moving everyFrame
//here I just want to move the shadowCamera so the object stay in the frustum
Best
Why not using an Object3D?
var light = THREE.DirectionalLight(...);
var myObject = THREE.Mesh();
val allTogether = new Object3D();
allTogether.add(light);
allTogether.add(myObject);
// here set light position you want (relative)
scene.add(allTogether);
In your loop move the Object3D not your mesh, so everything is moved along.