javascript - 在 ThreeJS 中手动设置相机矩阵

标签 javascript matrix 3d camera three.js

我正在尝试在一个简单的 three.js 场景中手动设置相机矩阵。我试过结合 matrixAutoUpdate = false 调用 matrix.set 方法,但是当场景最初呈现时它不会像我希望的那样随着时间的推移而改变。我也尝试使用 camera.matrix = 设置矩阵,结果相同。让我觉得我遗漏了一些关于如何让对象“接受”手动设置值的信息。我也尝试过 applyMatrix,但它似乎完全在做其他事情。

非常感谢任何建议 - 谢谢!

下面是代码的一部分:

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);
}

最佳答案

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

camera.updateMatrixWorld( true );

你的做法不可取

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

只需设置相机的四元数(或rotation)、positionscale,然后让库更新矩阵。

three.js r.60

关于javascript - 在 ThreeJS 中手动设置相机矩阵,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18470156/

相关文章:

验证日期时的 JavaScript 问题

c - 如何将矩阵保存在数组中

algorithm - 矩阵链乘算法

matrix - bool 矩阵的逆

javascript - 如何在three.js中渲染点的二维形状

c# - XNA Flash 或 Silverlight 集成

python - 更改 matplotlib 3D 图的轴平面的背景颜色

javascript - D3 根据对象的子项更改对象的宽度属性

javascript - 从 ES 6 中的对象获取一些属性的单行代码

Javascript 多个间隔与返回 promise 的函数