Разрешить управление мышью сцены three.js только тогда, когда мышь находится над холстом

Холст three.js - это квадрат 500 x 500 внутри большой веб-страницы с другим содержимым, и мне нужно, чтобы управление камерой с помощью мыши (для масштабирования и вращения вокруг объекта) происходило только тогда, когда мышь находится внутри квадрата 500 x 500.

Кроме того, я не могу прокрутить веб-страницу, но, возможно, это будет исправлено, когда мы изолируем обработчик событий мыши на холсте 500 x 500.

Текущий код:

<!DOCTYPE html>
<html>
<head> 
   <style>
    div         { 
            position:relative;
            left:100px;           
            top:100px;
            background-color: #eeeeee;
            border:1px solid black;             
            width:500px;
            height:500px;
                }

    canvas      {
            width:500px;
            height:500px;
                }

   </style> 
</head>     
<body> 

    <script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>

    <script src="https://raw.github.com/mrdoob/three.js/master/examples/js/loaders/STLLoader.js"></script>

    <script src="https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"></script>

    <script>
        var container, camera, scene, renderer, controls;

        init();
        animate();

        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            var width = container.clientWidth;
            var height = container.clientHeight;


            camera = new THREE.PerspectiveCamera( 10 , width / height , .1 , 10000 );

            camera.position.set( 0, 0, 10);

            scene = new THREE.Scene();

            controls = new THREE.TrackballControls( camera ); // mouse control
            controls.addEventListener( 'change', render );    // mouse control

            // object

            var loader = new THREE.STLLoader();
            loader.addEventListener( 'load', function ( event ) {

                var geometry = event.content;

                var material = new THREE.MeshLambertMaterial( { ambient: 0xff5533, color: 0xff5533 } );

                var mesh = new THREE.Mesh( geometry, material );

                scene.add( mesh );

            } );

            loader.load( 'slotted_disk.stl' ); // from https://raw.github.com/mrdoob/three.js/master/examples/models/stl/slotted_disk.stl


            // lights

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

            var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
            directionalLight.position = camera.position;
            scene.add( directionalLight );

            // renderer

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setSize( width , height );
            container.appendChild( renderer.domElement );

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


        }

        function addLight( x, y, z, color, intensity ) {

            var directionalLight = new THREE.DirectionalLight( color, intensity );
            directionalLight.position.set( x, y, z )
            scene.add( directionalLight );

        }

       function onWindowResize() {   

            camera.aspect = width / height;
            camera.updateProjectionMatrix();

            renderer.setSize( width, height );
        }

        function animate() {

            requestAnimationFrame( animate );
    controls.update();
            render();

        }

       function render() {

           camera.lookAt( scene.position );
           renderer.render( scene, camera );

       }

    </script>

</body>
</html>
Источник

2 ответа

Решение

Большинство элементов управления позволяют вам указать, к какому DOM-узлу добавляются прослушиватели событий. Обработчики событий добавляются в документ по умолчанию, но это должно ограничивать обработку мыши вашим элементом контейнера:

controls = new THREE.TrackballControls( camera , container);
Источник

Предложенный ответ не работает для меня, это однако. Надеюсь, это поможет кому-то!

controls = new THREE.TrackballControls(camera, renderer.domElement);
Источник
Другие вопросы по тегам