在 ThreeJS 中手动设置相机矩阵 [英] Setting the camera matrix manually in ThreeJS

问题描述

我正在尝试在一个简单的 Three.js 场景中手动设置相机的矩阵.我已经尝试将 matrix.set 方法与 matrixAutoUpdate = false 结合使用，但是虽然最初渲染的场景并没有像我希望的那样随着时间的推移而改变.我还尝试使用 camera.matrix = 设置矩阵，结果相同.让我觉得我错过了一些关于如何让对象接受"手动设置值的信息.我也试过 applyMatrix 但这似乎完全是别的东西.

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

这里只是 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);
}

推荐答案

设置好相机矩阵后，需要调用

After setting the camera matrix, you need to call

camera.updateMatrixWorld( true );

你正在做的事情不可取.

three.js 不是为了这样使用而设计的.最好不要直接弄乱对象矩阵——除非您真的知道自己在做什么，并且了解库的内部工作原理.

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.

相反，只需设置相机的quaternion(或rotation)、position 和scale，然后让库更新矩阵.

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

three.js r.60

three.js r.60

这篇关于在 ThreeJS 中手动设置相机矩阵的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！