I am currently attempting to manually adjust the matrix of a camera in a basic three.js scene. Despite trying various methods such as using the matrix.set function combined with matrixAutoUpdate = false, the scene renders initially but does not update over time as expected. I have also experimented with setting the matrix using camera.matrix = with similar results. It seems like I may be overlooking something when it comes to applying these manual values to the object. Additionally, I've explored applyMatrix but it appears to have a different effect altogether.
Any insights or advice would be greatly appreciated - thank you!
Feel free to check out this code in action on CodePen:
http://codepen.io/heyscam/pen/phflL
Here is the JavaScript portion of the code:
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);
}