threejs 实现3d全景,场景转动方向与鼠标移动方向相反

Me5 发布于 2016/09/20 14:33
阅读 2K+
收藏 1

描述如标题,本人是新手,求大神指点迷津

这是预览地址  http://fishwx.duapp.com/pano

以下为源码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全景图开发测试</title>
    <style>
        *{overflow: hidden;margin:0;padding:0;}
        canvas {
            width: 100%;
            height: 100%;
        }

        .fixtitle {
            width: 190px;
            height: 50px;
            line-height: 50px;
            text-indent: 10px;
            color: red;
            z-index: 1000;
            position: fixed;
            background: rgba(20, 89, 255, 0.5);
        }

        .fixtitle:after {
            font-size: 24px;
            font-weight: bold;
            content: '测试fisher';
        }
    </style>
</head>
<body>
<div class="fixtitle"></div>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script>

    ;
    (function () {
        var index = (function () {
            var scene, camera, renderer, controls,
                    renderCount = 0;

            return {
                init: function () {
                    index.initScene();
                    //添加事件
                    index.addEvent();
                    //执行
                    index.render();
                    index.animate();
                },
                initScene: function () {
                    scene = new THREE.Scene();
                    var ext = '.png'
                            , textureCube = new THREE.CubeTextureLoader()
                                    .setPath('img/')
                                    .load([
                                        '0001' + ext,
                                        '0003' + ext,
                                        '0006' + ext,
                                        '0005' + ext,
                                        '0002' + ext,
                                        '0004' + ext
                                    ]);
                    scene.background = textureCube;
                    //加入环境光,浅灰色
                    scene.add(new THREE.AmbientLight(0xffffff));

                    index.initCamera();
                    index.initRenderer();
                    index.initControls();
                },
                initCamera: function () {
                    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
                    camera.position.set(200, 200, 200);
                    camera.lookAt(scene.position);
                    scene.add(camera);
                },
                initRenderer: function () {
                    renderer = new THREE.WebGLRenderer();
                    renderer.setSize(window.innerWidth, window.innerHeight);
                    document.body.appendChild(renderer.domElement);
                },
                initControls:function(){
                    controls = new THREE.OrbitControls(camera);
                    controls.addEventListener('change', index.render);
                    controls.autoRotate = false;//自动旋转开关
                    controls.autoRotateSpeed = 2;
                },
                addEvent:function(){
                    window.addEventListener('resize', index.windowResize, false);
                    function onBorderMouseUp(ev) {
                        window.addEventListener("drag", function(){alert('drag')});
                    }
                    onBorderMouseUp();
                },
                render: function () {
                    renderer.render(scene, camera);
                },
                animate: function () {
                    if (renderCount === 0) {
                        index.render();
                    }
                    requestAnimationFrame(index.animate);
                    controls.update();
                },
                windowResize:function(){
                    console.log(new Date());
                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix();

                    renderer.setSize(window.innerWidth, window.innerHeight);
                    controls.reset();
                    index.render();
                }
            };
        })();

        index.init();
    })();

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





加载中
0
oj8kay
oj8kay

OrbitControls旋转的是相机,当你相机往左转的时候,当然相对的,看起来物体就是右移的了。

可以直接修改源码,把rotateLeft方法和rotateUp方法里的-=改为+=就行了

Me5
Me5
谢谢大神,解决了
大猫_
大猫_
厉害了!遇到同样问题完美解决
返回顶部
顶部