0

我想让它通过移动透视相机以以下方式在three.js中移动：

  1. “按一个键或按钮将相机向前移动到我正在看的方向”
  2. “按一个键或按钮将相机向下移动到我正在看的方向下方”
  3. “按一个键或按钮来倾斜相机，使“fov”具有不同的值
  4. “按下键或按钮来倾斜相机，这样我就可以旋转，就像在相机要能够看到我左右的位置一样旋转

以下是我当前的代码。根据我所看到的，文档中的 PerspectiveCamera 似乎没有任何方法，如“setFov”或类似的东西，只是“camera.fov =”似乎没有像相机后的网格那样有任何效果已初始化。那么我该如何正确地做到以上几点？：

<!DOCTYPE html>

<html>

<head>
    <title>Example 01.03 - Materials and light</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
    <script type="text/javascript" src="../libs/stats.js"></script>
    <style>
        body{
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    $(function () {

        var stats = initStats();

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColorHex(0xEEEEEE, 1.0);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
        var planeMaterial =    new THREE.MeshLambertMaterial({color: 0xffffff});
        var plane = new THREE.Mesh(planeGeometry,planeMaterial);
        plane.receiveShadow  = true;

        // rotate and position the plane
        plane.rotation.x=-0.5*Math.PI;
        plane.position.x=15
        plane.position.y=0
        plane.position.z=0

        // add the plane to the scene
        scene.add(plane);

        // create a cube
        var cubeGeometry = new THREE.CubeGeometry(4,4,4);
        var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.castShadow = true;

        // position the cube
        cube.position.x=-4;
        cube.position.y=3;
        cube.position.z=0;

        // add the cube to the scene
        scene.add(cube);

        var sphereGeometry = new THREE.SphereGeometry(4,20,20);
        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

        // position the sphere
        sphere.position.x=20;
        sphere.position.y=0;
        sphere.position.z=2;
        sphere.castShadow=true;

        // add the sphere to the scene
        scene.add(sphere);

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

        // add subtle ambient lighting
        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);

        // add spotlight for the shadows
        var spotLight = new THREE.SpotLight( 0xffffff );
        spotLight.position.set( -40, 60, -10 );
        spotLight.castShadow = true;
        scene.add( spotLight );

        // add the output of the renderer to the html element
        $("#WebGL-output").append(renderer.domElement);

        // call the render function
        var step=0;
        render();

        function render() {
            stats.update();
            // rotate the cube around its axes
            cube.rotation.x += 0.02;
            cube.rotation.y += 0.02;
            cube.rotation.z += 0.02;

            // bounce the sphere up and down
            step+=0.04;
            sphere.position.x = 20+( 10*(Math.cos(step)));
            sphere.position.y = 2 +( 10*Math.abs(Math.sin(step)));

            // render using requestAnimationFrame
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            // Align top-left
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';

            $("#Stats-output").append( stats.domElement );

            return stats;
        }
    });



</script>
</body>
</html>
4

1 回答 1

3

我相信您只需要了解相机矩阵的组件即可实现您想要的。three.js“相机”是经典线性代数类型的 4x4 矩阵。 4x4 matrix = [a b c d e f g h i j k l n m o p] 3x3 内部矩阵实际上是相机的方向： camera orientation = [a b c e f g i j k] 意味着向量 { a, b, c } 是从相机的 pov 指向相机右侧的方向向量。向量 { e, f, g } 是从相机的角度指向上方的方向向量。向量 { i, j, k } 是指向相机所面对方向的导向器向量。

这 3 个向量一起构成了相机的方向。

可以通过像这样将左手握在您面前进一步设想它们： 左手旋转图片 每个手指都指向相机 pov 的正方向，它们同样等于定向相机所需的旋转因子。

另一个非旋转分量 { n, m, o } 是相机的 x, y, z 位置。

要沿相机方向移动，请将向量 { i, j, k } 添加到 { n, m, o }。

要向右移动，从相机的 pov 开始，将向量 { a, b, c } 添加到 { n, m, o }。

要向上移动，从相机的 pov 开始，将向量 { e, f, g } 添加到 { n, m, o }。

当然，要向相反方向移动，还要加上这些方向向量的负值。

于 2014-07-12T20:32:56.433 回答