three.js在组内取消投影相机

时间:2016-03-05 18:46:37

标签: camera three.js

我在Group对象中有一个相机作为子项,我需要获取原点/方向:

import React from 'react'
import { browserHistory, Router, Route } from 'react-router'
import MainPage from '../containers/MainPage';
import FavoritesPage from '../containers/FavoritesPage';
import Error404 from '../containers/Error404';

export default () => (
    <Router history={browserHistory}>
        <Route path="/" component={MainPage}>
            <Route path="/favorites" component={FavoritesPage}/>
            <Route path="*" component={Error404}/>
        </Route>
    </Router>
);

上面的代码给出了cameraRig上下文的原点+方向。当我将相机排除在外时,将场景作为直接父母,它会给我我想要的世界起源/方向。那么如何整合cameraRig以获得世界起源/方向,这样我可以做采摘或其他什么?

FIDDLE https://jsfiddle.net/647qzhab/1/

更新

正如Falk的评论所述:

var cameraRig = new THREE.Group();
cameraRig.add( cameraPerspective );
cameraRig.add( cameraOrtho );
scene.add( cameraRig );

function relativeMousePosition () {
    var canvasBoundingBox = renderer.domElement.getBoundingClientRect();
    var mouse3D = new THREE.Vector3(0, 0, 0.5);
    mouse3D.x = ((mouseX - 0) / canvasBoundingBox.width) * 2 - 1;
    mouse3D.y = -((mouseY - 0) / canvasBoundingBox.height) * 2 + 1;
    return mouse3D;
}

cameraRig.position.set(89,34,91);
cameraRig.lookAt(something.position);
cameraPerspective.position.set(123,345,123);

var dir = relativeMousePosition().unproject(camera).sub(cameraPerspective.position).normalize();
var origin = cameraPerspective.position;

结果更好,但尚未完全满足,因为相机旋转似乎尚未应用。

1 个答案:

答案 0 :(得分:0)

我需要为cameraRig更新matrixWorld:

cameraRig.position.set(89,34,91);
cameraRig.lookAt(something.position);
cameraPerspective.position.set(123,345,123);

cameraRig.updateMatrixWorld(true);
cameraPerspective.updateMatrixWorld(true);