Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting the camera matrix manually in ThreeJS

I'm trying to manually set the matrix of a camera in a simple three.js scene. I've tried calling the matrix.set method in combination with matrixAutoUpdate = false, but whilst the scene renders initially it doesn't change over time as I was hoping. I've also tried setting the matrix with camera.matrix = with the same result. Makes me think I'm missing something about how to get the object to 'take on' the manually set values. I've also tried applyMatrix but that seems to do something else entirely.

Any advice much appreciated - thanks!

Here's a pen of the code in action:

http://codepen.io/heyscam/pen/phflL

And here's just the JS:

var WIDTH = 640;
var HEIGHT = 360;

var VIEW_ANGLE = 31.417;
var ASPECT = WIDTH / HEIGHT;
var NEAR = 0.1;
var FAR = 10000;

var $container = $('#container');
console.log($container);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH, HEIGHT);
$container.append(renderer.domElement);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(
  VIEW_ANGLE,
  ASPECT,
  NEAR,
  FAR
);
scene.add(camera);

var cube = new THREE.Mesh(
  new THREE.CubeGeometry(200, 200, 200)
);
scene.add(cube);

var frame = 0;

animate();

function animate() {
    camera.matrixAutoUpdate = false;
    camera.matrix.set(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 500 + (frame * 10), 0, 0, 0, 1);
    render();
    frame++;
    requestAnimationFrame(animate);
}

function render() {
    renderer.render(scene, camera);
}
like image 519
heyscam Avatar asked Aug 27 '13 15:08

heyscam


People also ask

What is camera view matrix?

In computer vision a camera matrix or (camera) projection matrix is a. matrix which describes the mapping of a pinhole camera from 3D points in the world to 2D points in an image.

What is a matrix4?

A class representing a 4x4 matrix. The most common use of a 4x4 matrix in 3D computer graphics is as a Transformation Matrix. For an introduction to transformation matrices as used in WebGL, check out this tutorial.


1 Answers

After setting the camera matrix, you need to call

camera.updateMatrixWorld( true );

What you are doing is not advisable.

three.js was not designed to be used this way. It is best not to mess with an object matrix directly -- unless you really know what you are doing, and understand the inner-workings of the library.

Instead just set the camera's quaternion (or rotation), position, and scale, and let the library update the matrix.

three.js r.60

like image 165
WestLangley Avatar answered Oct 19 '22 23:10

WestLangley