Question

我想在我的threejs Demo中使用相机类型，所以我读了一个官方演示：https://threejs.org/examples/#webgl_camera

但是当我测试我的演示时会出现一些错误。当我按P使用cameraPerspective时，它运行良好;但是当我使用O来切换cameraOrtho时，cameracontrol不起作用 - 我无法旋转或移动我的模型样本。

有我的代码：

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>3D-earth</title>
    <script src="JSandCSS/jquery-2.2.4.min.js"></script>
    <script src="JSandCSS/three.min.js"></script>
    <script src="JSandCSS/OrbitControls.js"></script>
    <script src="JSandCSS/OBJLoader.js"></script>
    <script type="text/javascript" src="JSandCSS/jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="JSandCSS/qrcode.js"></script>
    <script src="JSandCSS/bootstrap.min.js"></script>
    <script type="text/javascript" src="JSandCSS/CanvasRenderer.js"></script>
    <script src="JSandCSS/Projector.js"></script>
    <link href="JSandCSS/bootstrap.min.css" rel="stylesheet" type="text/css">

</head>

<body>

    <div style="width: 50%;">
        <script>
            var scene = new THREE.Scene();
            var group = new THREE.Group;
            var mouse = new THREE.Vector2();
            var raycaster = new THREE.Raycaster();
            var objects = [];
            init();

            var container, stats, titleinfo;
            scene.add(group);



            var textureLoader = new THREE.TextureLoader();
            var mat = new THREE.MeshLambertMaterial({
                /*   Roushness:1,
                   Metalness:0,*/
                map: textureLoader.load("model/earth/texture.jpg"),
                /* normalMap:textureLoader.load("model/earth/normal.jpg"),*/
                specularMap: textureLoader.load("model/earth/specular.jpg"),
                lightMap: textureLoader.load("model/earth/light.jpg"),
                side:THREE.DoubleSide,
            });




            var loader = new THREE.OBJLoader();
            loader.load('model/earth/earth.obj', function(obj) {
                obj.traverse(function(child) {
                    if(child instanceof THREE.Mesh) {
                        child.material = mat;
                    }
                });
                mesh = obj;
                obj.scale.set(2, 2, 2);
                group.add(obj);
            });


            var light = new THREE.PointLight(0xffffff);
            light.position.set(300, 400, 200);
            light.intensity.set = 0.1;
            scene.add(light);
            scene.add(new THREE.AmbientLight(0x333333));






            var cameraPerspective = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
            cameraPerspective.position.set(200, 200, 200);
            cameraPerspective.lookAt(scene.position);

            cameraOrtho = new THREE.OrthographicCamera(window.innerWidth / -4, window.innerWidth / 4, window.innerHeight / 4, window.innerHeight / -4, -10000, 10000);

            ActiveCamera = cameraPerspective;


            var renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            renderer.render(scene, ActiveCamera);
            renderer.setClearColor(0x808080, 0.5); 


            var controls = new THREE.OrbitControls(ActiveCamera);
            controls.minDistance = 200;
            controls.maxDistance = 400;
            controls.autoRotate = true;
            controls.addEventListener('change', render); 
            animate(); 
            window.addEventListener('resize', handleWindowResize, false); 
            document.addEventListener('keydown', onKeyDown, false);



            function render() {
                /*group.rotation.y -= 0.004;*/
                renderer.render(scene, ActiveCamera);
            } 

            function animate() {
                requestAnimationFrame(animate);
                render();
            } 

            function onKeyDown(event) {
                switch(event.keyCode) {
                    case 79:
                        ActiveCamera = cameraOrtho;                                                     
                    case 80:
                        ActiveCamera = cameraPerspective;
                }
            }

            function handleWindowResize() {
                HEIGHT = window.innerHeight;
                WIDTH = window.innerWidth;
                renderer.setSize(WIDTH, HEIGHT);
                ActiveCamera.aspect = WIDTH / HEIGHT;
                ActiveCamera.updateProjectionMatrix();
            } 

        </script>

    </div>

</body>

Answer 1

尝试使用CombinedCamera的单个相机对象和

在下面的代码中使用Perspective和Ortho之间切换。

//initial 
var camera = new THREE.CombinedCamera($(canvasHold).innerWidth(), $(canvasHold).innerHeight(), 75, .1, 3e3, -5e3, 5e3);
camera.toOrthographic();

function switchCamera()
{
  if(ortho) // Add condition
  {
     camera.toOrthographic();
     camera.position.set(0, 0, 0);
     camera.zoom = .5;
     camera.up = new THREE.Vector3(0, 0, 0);
     camera.lookAt(scene.position);
     camera.setFov(75);
  }
  else
  {
     camera.toPerspective();
     camera.zoom = 1;
     camera.setFov(45);
  }
}

注意：请根据您的要求更改变量和值。

当我切换相机时，相机控制有效

1 个答案: