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

object same rotation of camera three js

Mohamed answered on June 29, 2022 Popularity 3/10 Helpfulness 10/10

answer object same rotation of camera three js

related how to rotate camera around three JS object

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

Closely Related Answers

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: object javascript camera

Link to this answer
Share Copy Link

Contributed on Jun 29 2022

Swapnil B

0 Answers Avg Quality 2/10

object same rotation of camera three js

Contents

More Related Answers

object same rotation of camera three js

Closely Related Answers

how to rotate camera around three JS object

Grepper

Documentation

Social

Legal

Contact

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