2

我将 misc_controls_orbit 示例嵌入到具有其他内容的较大网页中的 800x600 框架中。

我的问题是当我滚动鼠标滚轮时，即使我的鼠标在框架内或框架外，它也会滚动网页和缩放我的对象。

我现在需要的是当我的鼠标在框架内时，它只是缩放对象，而不是用它滚动所有网页，当鼠标在框架外时，它只会滚动网页，而不是缩放对象（就像 Sketchfab 嵌入在这里：http ://www.klaasnienhuis.nl/2012/09/sketchfab-embeds/ ）

这个问题似乎只发生在 OrbitControls 上，轨迹球不是，我已经搜索并尝试了多种方式但仍然没有结果，有人可以帮助我吗？（sr我的英语不好，希望你能理解，请问你是否不理解）

这是我正在使用的原始 misc_controls_orbit 代码：

<!DOCTYPE html>
 <html lang="en">
 <head>
    <title>three.js webgl - orbit controls</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            color: #000;
            font-family:Monospace;
            font-size:13px;
            text-align:center;
            font-weight: bold;

            background-color: #fff;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            color:#000;
            position: absolute;
            top: 0px; width: 100%;
            padding: 5px;

        }

        a {
            color: red;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <div id="info">
        <a href="http://threejs.org" target="_blank">three.js</a> - orbit controls example
    </div>

    <script src="../build/three.min.js"></script>

    <script src="js/controls/OrbitControls.js"></script>

    <script src="js/Detector.js"></script>
    <script src="js/libs/stats.min.js"></script>

    <script>

        if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var container, stats;

        var camera, controls, scene, renderer;

        var cross;

        init();
        animate();

        function init() {

            camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.z = 500;

            controls = new THREE.OrbitControls( camera );
            controls.addEventListener( 'change', render );

            scene = new THREE.Scene();
            scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );

            // world

            var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
            var material =  new THREE.MeshLambertMaterial( { color:0xffffff, shading: THREE.FlatShading } );

            for ( var i = 0; i < 500; i ++ ) {

                var mesh = new THREE.Mesh( geometry, material );
                mesh.position.x = ( Math.random() - 0.5 ) * 1000;
                mesh.position.y = ( Math.random() - 0.5 ) * 1000;
                mesh.position.z = ( Math.random() - 0.5 ) * 1000;
                mesh.updateMatrix();
                mesh.matrixAutoUpdate = false;
                scene.add( mesh );

            }


            // lights

            light = new THREE.DirectionalLight( 0xffffff );
            light.position.set( 1, 1, 1 );
            scene.add( light );

            light = new THREE.DirectionalLight( 0x002288 );
            light.position.set( -1, -1, -1 );
            scene.add( light );

            light = new THREE.AmbientLight( 0x222222 );
            scene.add( light );


            // renderer

            renderer = new THREE.WebGLRenderer( { antialias: false } );
            renderer.setClearColor( scene.fog.color, 1 );
            renderer.setSize( window.innerWidth, window.innerHeight );

            container = document.getElementById( 'container' );
            container.appendChild( renderer.domElement );

            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            stats.domElement.style.zIndex = 100;
            container.appendChild( stats.domElement );

            //

            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

            render();

        }

        function animate() {

            requestAnimationFrame( animate );
            controls.update();

        }

        function render() {

            renderer.render( scene, camera );
            stats.update();

        }


    </script>

</body>

4

1 回答 1

-1

使用画布渲染 webgl 并添加事件监听器

使用这个 html：

<canvas id="webglcanvas" width="800" height="600"></canvas>

用这个 javascript

function onMouseWheel(evt) {
    evt.preventDefault();

    /* TODO : your zoom */
}

function addMouseHandler(canvas) {
    canvas.addEventListener('mousemove', onMouseMove, false);
    canvas.addEventListener('mousedown', onMouseDown, false);
    canvas.addEventListener('mouseup', onMouseUp, false);
    canvas.addEventListener('onwheel' in document ? 'wheel' : 'mousewheel', onMouseWheel, false);
}

function createScene(canvas) {
    renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        antialias: true
    });

    // Set the viewport size
    renderer.setSize(canvas.width, canvas.height);
}

$(document).ready(function () {
    var canvas = document.getElementById("webglcanvas");

    // create the scene
    createScene(canvas);

    // add mouse handling so we can rotate the scene
    addMouseHandler(canvas);

    // Run the run loop
    run();
});
于 2013-11-04T13:49:57.600 回答