Javascript 在3JS中手动设置相机矩阵
我试图在一个简单的three.js场景中手动设置相机的矩阵。我尝试结合matrixAutoUpdate=false调用matrix.set方法,但虽然场景最初渲染,但它并没有像我所希望的那样随时间而改变。我还尝试使用camera.matrix=设置矩阵,结果相同。让我觉得我缺少了一些关于如何让对象“接受”手动设置的值的信息。我也尝试过applyMatrix,但这似乎完全是另一回事 非常感谢任何建议-谢谢 下面是一支笔正在运行的代码: 以下是JS:Javascript 在3JS中手动设置相机矩阵,javascript,matrix,3d,camera,three.js,Javascript,Matrix,3d,Camera,Three.js,我试图在一个简单的three.js场景中手动设置相机的矩阵。我尝试结合matrixAutoUpdate=false调用matrix.set方法,但虽然场景最初渲染,但它并没有像我所希望的那样随时间而改变。我还尝试使用camera.matrix=设置矩阵,结果相同。让我觉得我缺少了一些关于如何让对象“接受”手动设置的值的信息。我也尝试过applyMatrix,但这似乎完全是另一回事 非常感谢任何建议-谢谢 下面是一支笔正在运行的代码: 以下是JS: var WIDTH = 640; var HE
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的设计并不是为了这样使用。最好不要直接弄乱对象矩阵——除非您真的知道自己在做什么,并且了解库的内部工作原理
相反,只需设置相机的四元数
(或旋转
)、位置
、和比例
,然后让库更新矩阵
3.js r.60