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.
Related
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/
I'm trying to adapt my existing three.js project to work with WebVR. I've made decent progress -- I can look around the scene in VR, but I'm unable to move the camera position away from the initial place it gets spawned (which appears to be close to 0,0,0, it seems like there is a predefined userHeight that gets factored in)
Once I call renderer.vr.setDevice( vrDisplay ) it seems like a new camera is created and the existing camera that my scene was using is no longer used. I'd like to keep using that camera, or at least inherit most of its properties.
I've noticed that there is a renderer.vr.getCamera() method (link to source) but I haven't found any examples or documentation of how to use it (or if I should use it). Curiously, this method accepts a camera as an argument, which is a bit unintuitive for a getter. Looking at the code, it seems like the function should be called setCamera and left me a bit confused. I tried calling the function and passing in my existing camera but it had no effect.
Any help is appreciated. I am using a Google Daydream View on the latest version of Android/Chrome using Three.js R91
swirlybuns, Mugen87 solution works as long as you add user to the scene
var user = new THREE.Group();
user.position.set(0,0,0);
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.y = 1.6;
user.add( camera );
scene.add(user);
and on render loop
user.position.setZ(camera_z_pos);
camera_z_pos -= current_velocity;
Tested on
Three.js v102
chrome mobile v75
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 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.
I am creating a game engine and a test game, and I am currently working on cameras (using Matrix transforms). However, I am running into the strangest problem. I have a variable called CameraPosition (Vector2) that sets the position of the camera. The camera will move fine when I move the camera by doing something like
CameraPosition += new Vector2(0, 4);
(the camera will move up and all objects will appear to move down). However, when I do this:
CameraPosition = ship.Position;
nothing happens: the camera stays in the exact same spot, even though the ships position is changing. I've checked, and the matrix is changing as well, but it's not affecting the drawing.
PS: The code I'm using to calculate the matrix is this:
CameraMatrix = Matrix.CreateTranslation(new Vector3(CameraPosition, 0));
and the code I'm using to draw is this:
spriteBatch.Begin(SpriteSortMode.Immediate, null, null, null, null, null, CameraMatrix);
//draw stuff here...
spriteBatch.End();
If anyone has any ideas on what's going on/needs to see more of the code, feel free to ask/tell!
EDIT: Rotation and scaling/zooming work fine: it's just the translations that are messing up.