I'm playing around with Three.js, and I'm trying to figure out how to keep a box I have always facing away from the camera.
As of right now, the camera rotates around the box as you drag around. However, the box itself does not rotate. I want to make it so that as you rotate the camera, the box's yaw changes to face away from the camera.
How would I accomplish something like this? At first, I tried to set the .rotation.y of the box to the .rotation.y of the camera, however that didn't work
What you are describing should work. I have made a fiddle you can check out and compare your code to: fiddle
Here is a snippet from the animate function:
//quick and dirty way to spin the camera around the world center
camera.position.set(0, 0, 0); //move to world center
camera.rotation.y += 0.01; //rotate camera around world center
camera.translateZ(300); //move backwards
//match
cube1.rotation.y = camera.rotation.y;
If you post your code here or on JSFiddle I might be able to help figure out what in your code is misbehaving
Related
In three.js, when we define the camera we use something like camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far); If the object is moved outside the bounds set by the two planes, far and near then it is clipped.
Suppose now I rotate the object and I zoom in/out.
How can I find the current plane my camera is on please? I am learning three.js, hence I dont know If I am explaining this clear enough.
I thought that it was camera.position.z that would give me this info. In fact, I think it gives the correct value when my camera looks down the z-axis. However when I rotate by 90 degrees, (effectively moving my camera on the x-axis) the value of camera.position.z changes by a lot.
I have added a graph in case it helps. The plane defined by the blue outline cuts through the data and is parallel to the far and near planes. As I zoom in and out, I am moving the plane forward and backward, right? Do I understand this correct or I have totally missed it? I would like to know the value (a float between far and near) indicating how far that blue plane is from the camera. If you rotate that distance shouldn't change
My end goal is to be able to find-out how close the scene is to the viewer. If it gets too close then I will be adding some more elements to the scene. If it is too far these elements will be removed.
I need to get the camera up direction and i've tried many ways with no luck, i'm not an expert of quaternions so i'm doubting i did it right.
I've tried:
camera.up
camera.up.applyMatrix4(camera.matrixWorld);
new THREE.Vertex3(0,1,0).applyMatrix4(camera.matrixWorld);
camera.up.normalize().applyMatrix4(camera.matrixWorld);
after this i create two planes passing by two points of my interest, and add the plane helper to the scene and i can see they are very far from where i was expecting them. (i'm expecting two planes that looks like the top and bottom of the camera frustum).
P.s. the camera is a shadow camera of a directional light so an orthographic camera, and i manipulate the directional light position and target before doing this operation, but i've called updateMatrixWorld on the light, on it's target and the camera, on the camera i've called also updateProjectionMatrix... still no results
I've made a sandbox to see what i've tried till now, and better visualize what i want to achieve:
https://codesandbox.io/embed/throbbing-cache-j5yse
once i manage to get the green arrow to point to the top of the blue triangle of the camera helper i'm good to go
In the normal render flow, shadow camera matrices are updated as part of rendering the shadow map (WebGLShadowMap.render).
However, if you want the updated matrix values before the render, then you'll need to update them manually (you already understand this part).
The shadow camera is a property of (not a child of) the DirectionalLight. As such, it doesn't follow the same rules as other scene objects when it comes to updating its matrices (because it's not really a child of the scene). Instead, you need to call the shadow property's updateMatrices method (inherited from LightShadow.updateMatrices).
const dl = new THREE.DirectionalLight(0xffffff, 1)
dl.shadow.updateMatrices(dl) // <<------------------------ Updates the shadow camera
This updates the shadow camera with information from the DirectionalLight's own matrix, and its target's matrix, to properly orient the shadow camera.
Finally, it looks like you're trying to get the "world up" of the camera. Personally, I'd use the convenience function localToWorld:
let up = new THREE.Vector3(0, 1, 0)
dl.shadow.camera.localToWorld(up) // destructively converts "up" from local-to-camera into world coordinates
via trial and errors i've figured out that what gave me the correct result was:
calling
directionalLight.shadow.updateMatrices(...)
and then
new THREE.Vector3(0,1,0).applyQuaternion(directionalLight.shadow.camera.quaternion)
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 am making a game in three.js and I have 2 questions. 1. I have a cube which gets pushed along but every few seconds it "Jitters" back a little. Why?. 2. When i click the left or right arrow key the cube meant to rotate on its Y-axis instead of rotating one way it sometimes rotates a little one way and then the other?.
So I realised that I was updating the camera in the Renderer update function not the physics update function so I moved it and now there is no jittering. Also for the rotation I changed .rotation.y -= 0.1; to .rotateOnAxis( new THREE.Vector3(0,1,0), -0.05); and now it works.
I'm new to libGDX and android game dev. And I want to achieve this:
I have a Screen and within it, a ball sprite that is moving along the X axis. Now I want to center the viewport to the sprite when it moves. Just like in Angry birds, where the camera follows the bird flying across the sky.
How can I implement that within my game using OrthographicCamera?
This took me a while of Googling and testing, but I just found something and I think others may appreciate it.
To move the camera (and if you are using a spriteBatch), make sure to call setProjectionMatrix.
Ex:
camera.position.y += 5; // or whatever you want to change y by...
camera.position.x += 5;
camera.update();
spriteBatch.setProjectionMatrix(camera.combined);
Hope this helps someone!
In case you haven't figured this out yet, you need to convert the ball position to the camera position using
camera.unproject(ballPosition)
This converts the screen coordinates into world coordinates. Then call
camera.position(ballPosition)
to set the camera position to your ball's location in the world.
The
camera.translate(...);
function translates all of the involved attributes the camera by the given data. After the operation you need to call
camera.update();
to calculate the new matrices of the camera. This will push the camera to the direction you want.