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

问题描述

我想手动设置摄像机的矩阵在一个简单的three.js的场景。我试着打电话与matrixAutoUpdate = FALSE组合matrix.set方法，但同时现场呈现最初它不会随着时间的推移，我希望改变。我也试着设置矩阵camera.matrix =具有相同的结果。让我觉得我失去了一些关于如何获取对象为承担手动设置值。我也试着applyMatrix但似乎做别的东西完全。

任何意见多少AP preciated - ！谢谢

下面是在行动的code笔：

HTTP：//$c$cpen.io/heyscam/pen/phflL

在这里仅仅是JS：

  VAR WIDTH = 640;
VAR HEIGHT = 360;

VAR VIEW_ANGLE = 31.417;
VAR ASPECT =宽/高;
VAR邻近= 0.1;
VAR FAR = 10000;

变量$箱= $（'＃集装箱'）;
的console.log（$容器）;

VAR渲染器=新THREE.WebGLRenderer（）;
renderer.setSize（宽度，高度）;
$ container.append（renderer.domElement）;

VAR场景=新THREE.Scene（）;

VAR摄像头=新THREE.PerspectiveCamera（
  VIEW_ANGLE，
  方面，
  近，
  远
）;
scene.add（照相机）;

VAR立方=新THREE.Mesh（
  新THREE.CubeGeometry（200，200，200）
）;
scene.add（立方体）;

VAR帧= 0;

动画（）;

功能动画（）{
    camera.matrixAutoUpdate = FALSE;
    camera.matrix.set（1，0，0，0，0，1，0，0，0，0，1，500 +（帧* 10），0，0，0，1）;
    渲染（）;
    框架++;
    requestAnimationFrame（动画）;
}

功能渲染（）{
    renderer.render（场景，摄像头）;
}
 

解决方案

设置摄像头矩阵后，您需要调用

  camera.updateMatrixWorld（真正的）;
 

你在做什么是的不建议的。

three.js不旨在使用这种方式。最好不要惹直接对象矩阵 - 除非你真的知道你在做什么，并了解了内部工作的库

而不是仅仅将相机的<​​code>四元（或旋转），位置和比例，并且让库更新矩阵。

three.js r.60

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

解决方案

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

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