How to rotate a THREE.PerspectiveCamera around on object - javascript

I am making this program where you can click on an object, zoom to it, then look at it from all angles by holding the right mouse button and dragging. I need the camera to be going around the object, not rotate the object with the camera looking at it. I honestly just have no idea how to math it out!
For testing there is already a game object with an xyz we have selected and are looking at
var g = new GameObject(500, 0, 0);//The game object with xyz
this.selected = g;//set selected to g
//Create and set the camera
this.camera = new THREE.PerspectiveCamera(45, w/h, 1, 10000);
this.camera.position.x = 0;
this.camera.position.y = 0;
this.camera.position.z = 0;
//set camera to look at the object which is 500 away in the x direction
this.camera.lookAt(new THREE.Vector3(this.selected.x, this.selected.y, this.selected.z));
So the radius between the camera and the object is 500 and while selected and rotating, the camera should always be 500 away.
I update the scene here:
Main.prototype.update = function(){
this.renderer.render(this.scene, this.camera);//scene is just some ambient lighting
//what to do when mouse right is held down
if(this.rightMouseDown){
//placeholder functionality, needs to rotate around object based on mouse movements
this.camera.position.x -= 5;
}
}
How do I rotate this camera around g with a radius of 500?!?!

As gaitat mentioned, trackball controls are the best place to start with many configurable parameters to make camera rotation/revolution easy. One enormous potential benefit of this method ( especially for your project ) is avoiding "gimbal lock" which is the source of much frustration when working with rotations. Here's a link that might help you with Trackball controls and Orbitcontrols:
Rotate camera in Three.js with mouse
Another option would be setting camera coordinates yourself in the animation loop which is actually quite simple:
var angle = 0;
var radius = 500;
function animate() {
...
// Use Math.cos and Math.sin to set camera X and Z values based on angle.
camera.position.x = radius * Math.cos( angle );
camera.position.z = radius * Math.sin( angle );
angle += 0.01;
...
}
Another option would be to connect the camera to a pivot object and just rotate the pivot:
var camera_pivot = new THREE.Object3D()
var Y_AXIS = new THREE.Vector3( 0, 1, 0 );
scene.add( camera_pivot );
camera_pivot.add( camera );
camera.position.set( 500, 0, 0 );
camera.lookAt( camera_pivot.position );
...
camera_pivot.rotateOnAxis( Y_AXIS, 0.01 ); // radians
If you pursue this option, be aware that the camera object is in "camera pivot space", and might be more challenging to manipulate further.

Related

not able to understand scene position importance

I am trying to write some sample code of three.js where i have a plane and i want that plane to rotate around.
This is my camera:
var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(50, 50, 60);
camera.lookAt(scene.position);
and this is my plane:
var planeGeometry = new THREE.PlaneGeometry(70, 30, 1, 1);
var planeMaterial = new THREE.MeshBasicMaterial({ color: green });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
scene.add(plane);
i have other code too but this is my render and animationframe code:
renderScene();
function cameraUpdate() {
camera.position.x = cameraRadius * Math.cos(step);
camera.position.z = cameraRadius * Math.sin(step);
camera.lookAt(scene.position);
}
function renderScene() {
//make update to position, rotation of objects in the scene
step += 0.05;
cameraUpdate();
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
My question is that inside cameraUpdate function if dont put
camera.lookAt(scene.position);
the rotation become very wierd and when i put this inside cameraUpdate, i get rotation of the plane in own axis which is desired !!!
My question is
what does scene.position mean
Why do i need to make camera lookat at every animation frame? i dont understand how its value get changed when camera is rotated
Thank you in advance !!!
If you want the plane to rotate on its own, you should just use plane.rotation.y += 0.1 on each frame, or something simple like that. What you’re doing instead is that you’re making the camera move around in circles around the plane. Think of it as walking in a circle around a coffee table. If you keep your head looking forward, you won’t see the table as you walk past it. That’s what camera.lookAt() fixes. It makes the camera look at a point in space. You can read about it in the docs.
scene.position is by default at (0, 0, 0) so it’s just another way of telling the camera to look at the center of the scene.

Changing Three.js Orbit Controls target when camera moves, not working good

I'm making a """First Person Controller""" demo, where basically the camera moves forward in the scene when TOUCH event stay pressed, I use setInterval and addScaledVector for the camera movement.
I decided to add Orbit Controls just for rotating the camera to look around, no Zoom. Everything works quite good, but the Orbit Controls make a weird rotation to the target, in the target I use camera.position.x + 1, because if I just put camera.position.x with no value simply doesn't work, also I applied to the camera quaternion.
var vector = new THREE.Vector3();
var speed = 8;
var timer;
var iterations = 0;
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.rotateSpeed = 1.0;
controls.panSpeed = 0.8;
controls.target.set(camera.position.x + 1, camera.position.y,
camera.position.z);
function process_touchstart(evt) {
evt.preventDefault();
evt.stopImmediatePropagation();
iterations = 0;
timer=setInterval(function(){
iterations++;
vector.applyQuaternion( camera.quaternion );
camera.getWorldDirection( vector );
camera.position.addScaledVector( vector, speed );
controls.target.set(camera.position.x + 1,
camera.position.y,
camera.position.z);
}, 70);
}
Any information is appreciated, I'm kind of new on three.js so any detail is cool
Thank you !
Have you considered using PointerLockControls instead? It is just the same as OrbitControls but specially adapted to what you want. From the docs: The implementation of this class is based on the Pointer Lock API. PointerLockControls is a perfect choice for first person 3D games.
Here is a sample Codepen that does what you want: https://codepen.io/adelriosantiago/pen/OJbWBep?editors=1010

block the movement along z axis in three js

I'm creating a game level page using three js. Here I used mapcontrols for user control. In this when I click and drag any part of the screen, the object gets translated (as per my wish). But when I move along the Z axis, the objects move along z-axis which I need to block.
I just want to make the scene like a horizontal carousel in normal html (literally)
I tried some properties of OrbitControls which is given in threejs docs.
https://threejs.org/docs/index.html#examples/en/controls/OrbitControls
Here is the code I tried
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
var mapControls = new THREE.MapControls( camera, renderer.domElement );
mapControls.enableDamping = true;
mapControls.enableRotate = false;
mapControls.enableZoom = false;
To create a carousel-like experience, you don't need orbit controls, you only need to move the camera while looking at your object is advancing through the carousel, like the typical platform games.
I have created this fiddle with an example with an sphere moving along the x axis and the camera following it.
and the relevant code is basically on the render method:
function render() {
requestAnimationFrame(render);
mesh.position.x -= 0.1;
camera.lookAt(mesh.position);
camera.position.x -= 0.1;
renderer.render(scene, camera);
}
If you want to still playing with OrbitControls and fix the axes, you need to play with minPolarAngle and maxPolarAngle, that will block vertical axis if you set the same value for both.
controls.maxPolarAngle = Math.PI / 2;
controls.minPolarAngle = Math.PI / 2;
but that gives no perspective at all, so I would use:
controls.maxPolarAngle = Math.PI / 2.2;
controls.minPolarAngle = Math.PI / 2.2;
Then you have to play with the horizontal perspective, for that you need to set minAzimuthAngle and maxAzimuthAngle between -2 PI and +2 PI...:
controls.minAzimuthAngle = -Math.PI * 1.1;
controls.maxAzimuthAngle = Math.PI * 1.1;
This will slightly turn your camera angle:
Then, using only OrbitControls you will need to move the rest of the objects in the scene, so instead of moving the sphere, you will need to move conceptually the "floor".
If this solution solves your question, please mark the answer as answer accepted, in that way it will also help other users to know it was the right solution.

ThreeJS: rotate on y axis to face camera

I want my object to rotate on the Y axis to always face the camera (as if a human was turning around in circles), as the camera moves.
This is what I have tried so far:
var render = function() {
animationFrameId = window.requestAnimationFrame( render);
obj.lookAt(camera.position);
obj.rotation.set(0, obj.rotation.y, 0);
}
But i am missing some simple math or trig function, because when i rotate, it eventually 'jumps' and the object appears to face the wrong direction
If you use a .lookAt the object look to the camera in all directions, you have to calculate the angle on Y plane between camera and mesh like this.
var render = function() {
animationFrameId = window.requestAnimationFrame( render);
obj.rotation.y = Math.atan2( ( camera.position.x - obj.position.x ), ( camera.position.z - obj.position.z ) );
}

three.js: transforming coordinates from camera space to scene space

I'm trying to place a cube relative to the camera, rather than relative to the scene. The thing is, to place it in the scene (which I have to do make it show), I have to know the scene coordinates that correspond to the cubes camera space coordinates. I found this function "projectionMatrixInverse" in THREE.Camera. It has a nice function called "multiplyVector3" which I hoped would enable me to transform a vector (1,1,1) back to scene space like this:
var camera, myvec, multvec; // (and others)
camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 2000, 1000 );
camera.position.x = 200;
camera.position.y = 100;
camera.position.z = 200;
myvec = new THREE.Vector3(1,1,1);
console.log("myvec: ", myvec);
multvec = camera.projectionMatrixInverse.multiplyVector3(THREE.Vector3(1,1,1));
console.log("multvec: ", multvec);
the thing is, on the console i get:
myvec: Object { x=1, y=1, z=1}
TypeError: v is undefined
var vx = v.x, vy = v.y, vz = v.z;
multiplyVector3 simply doesn't accept my myvec, or says it's undefined, even though the console says it's an object. I don't get it.
The camera is located at the origin of it's coordinate system, and looks down it's negative-Z axis. A point directly in front of the camera has camera coordinates of the form ( 0, 0, z ), where z is a negative number.
You convert a point p
p = new THREE.Vector3(); // create once and reuse if you can
p.set( x, y, z );
from camera coordinates to world coordinates like so:
p.applyMatrix4( camera.matrixWorld );
camera.matrixWorld is by default updated every frame, but if need be, you can update it yourself by calling camera.updateMatrixWorld();
three.js r.95
This may also be what you're after:
scene.add( camera );
brick.position.set( 0, 0, -1 );
camera.add( brick );

Categories

Resources