2

他のコンテンツを含む大きな Web ページ内の 800x600 フレームに、misc_controls_orbit の例を埋め込みます。

私の問題は、マウスホイールをスクロールすると、マウスがフレームの内側または外側にある場合でも、Webページをスクロールしてオブジェクトをズームすることです。

今必要なのは、マウスがフレーム内にあるときです。オブジェクトをズームするだけで、すべてのWebページをスクロールするのではなく、マウスがフレームの外にあるときは、オブジェクトをズームするのではなく、Webページをスクロールするだけです(Sketchfabがここに埋め込むように) : http://www.klaasnienhuis.nl/2012/09/sketchfab-embeds/ )

この問題は OrbitControls でのみ発生するようです。トラックボールはそうではありません。検索してさまざまな方法で試してみましたが、まだ結果が得られません。誰か助けてもらえますか? （私の悪い英語、理解していただければ幸いです。理解できない場合はお尋ねください）

これは私が使用しているオリジナルの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 に答える