Breaking News: Grepper is joining You.com. Read the official announcement!

how to rotate camera around three JS object

Add Answer

Swapnil B answered on April 15, 2021 Popularity 9/10 Helpfulness 6/10

answer how to rotate camera around three JS object

related object same rotation of camera three js

related rotate camera three js

how to rotate camera around three JS object

Comment

var canvas = document.getElementById('canvas');
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
var camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientWidth, 1, 1000);

var geometry = new THREE.BoxGeometry(50, 50, 50);
var material = new THREE.MeshBasicMaterial({color: '#f00'});
var box = new THREE.Mesh(geometry, material);
scene.add(box);

// important, otherwise the camera will spin on the spot.
camera.position.z = 200;

var period = 5; // rotation time in seconds
var clock = new THREE.Clock();
var matrix = new THREE.Matrix4(); // Pre-allocate empty matrix for performance. Don't want to make one of these every frame.
render();

function render() {
  requestAnimationFrame(render);
  if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
    // This stuff in here is just for auto-resizing.
    renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
    camera.aspect = canvas.clientWidth /  canvas.clientHeight;
    camera.updateProjectionMatrix();
  }

  // Create a generic rotation matrix that will rotate an object
  // The math here just makes it rotate every 'period' seconds.
  matrix.makeRotationY(clock.getDelta() * 2 * Math.PI / period);

  // Apply matrix like this to rotate the camera.
  camera.position.applyMatrix4(matrix);

  // Make camera look at the box.
  camera.lookAt(box.position);

  // Render.
  renderer.render(scene, camera);
}

Popularity 9/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: camera javascript object

Link to this answer
Share Copy Link

Contributed on Jun 29 2022

Swapnil B

0 Answers Avg Quality 2/10

Closely Related Answers

object same rotation of camera three js

Comment

// THREE JS, I tested this with "PointerLockControls"
//IF YOU WANT OBJECT SAME Y ROTATION OF CAMERA :
const getCameraRotate = new THREE.Vector3();
        camera.getWorldDirection( getCameraRotate);
        getCameraRotate.y = 0;
        getCameraRotate.add( object.position );
        object.lookAt( getCameraRotate );

// IF YOU WANT OBJECT SAME X.Y.Z ROTATION OF CAMERA :
	   object.rotation.copy(camera.rotation)

// IF you want object same position to camera :
object.position.copy (new THREE.Vector3 (camera.position.x, camera.position.y, camera.position.z));
/*if your object gets the same position as the camera, you certainly wouldn't
see it, because you would be inside, try to change some value, for example 
new THREE.Vector3 (camera.position.x-5, camera.position .y -5, camera.position.z)
**/

Popularity 3/10 Helpfulness 10/10 Language javascript

Source: Grepper

Tags: camera javascript object rotation

Link to this answer
Share Copy Link

Contributed on Dec 25 2022

Mohamed

0 Answers Avg Quality 2/10

rotate camera three js

Comment

t = Math.min(t + 0.01, 1);
camera.position.copy(startPosition).lerp(endPosition, t);
camera.lookAt(0, 0, 0);

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: discourse.threejs.org

Tags: camera ca

Link to this answer
Share Copy Link

Contributed on Apr 15 2021

Anxious Anaconda

0 Answers Avg Quality 2/10

how to rotate camera around three JS object

Contents

More Related Answers

how to rotate camera around three JS object

Closely Related Answers

object same rotation of camera three js

rotate camera three js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.