3d 仅当鼠标位于画布上时才允许鼠标控制three.js场景_3d_Three.js

3d 仅当鼠标位于画布上时才允许鼠标控制three.js场景

3d three.js

3d 仅当鼠标位于画布上时才允许鼠标控制three.js场景,3d,three.js,3d,Three.js,3th.js画布是一个500 x 500的正方形，在一个包含其他内容的较大网页内，我需要鼠标控制相机（用于缩放和旋转对象），只有当鼠标位于500 x 500的正方形内时才会发生此外，我无法滚动网页，但当我们将鼠标事件侦听器隔离到500 x 500画布时，这可能会得到修复当前代码： <!DOCTYPE html> <html> <head> <style> div { position:r

3th.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>


div{
位置：相对位置；
左：100px；
顶部：100px；
背景色：#eeeeee；
边框：1px纯黑；
宽度：500px；
高度：500px；
}
帆布{
宽度：500px；
高度：500px；
}
var容器、摄影机、场景、渲染器、控件；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
var width=container.clientWidth；
var高度=容器的重量；
摄像头=新的三个透视摄像头（10个，宽/高，.11000）；
摄像机位置设置（0,0,10）；
场景=新的三个。场景（）；
控件=新的三个。轨迹球控件（相机）；//鼠标控件
控件。addEventListener（'change'，render）；//鼠标控件
//反对
var loader=new THREE.STLLoader（）；
loader.addEventListener（'load'，函数（事件）{
var geometry=event.content；
var material=new THREE.MeshLambertMaterial（{ambient:0xff5533，color:0xff5533}）；
var mesh=新的三个网格（几何体、材质）；
场景。添加（网格）；
} );
loader.load（'slotted_disk.stl'）；//来自https://raw.github.com/mrdoob/three.js/master/examples/models/stl/slotted_disk.stl
//灯光
添加（新的3.AmbientLight（0x22222））；
var directionalLight=新的三个方向灯（0xffffff，1）；
directionalLight.position=摄像机.position；
场景。添加（方向光）；
//渲染器
renderer=new THREE.WebGLRenderer（{antialas:true}）；
设置大小（宽度、高度）；
container.appendChild（renderer.doElement）；
addEventListener（'resize'，onWindowResize，false）；
}
功能添加灯光（x、y、z、颜色、强度）{
var directionalLight=新的三个方向光（颜色、强度）；
方向灯位置设置（x，y，z）
场景。添加（方向光）；
}
函数onWindowResize（）{
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
设置大小（宽度、高度）；
}
函数animate（）{
请求动画帧（动画）；
控件更新（）；
render（）；
}
函数render（）{
摄像机。注视（场景。位置）；
渲染器。渲染（场景、摄影机）；
}

大多数控件允许您指定将事件侦听器添加到哪个DOM节点。默认情况下，会将事件处理程序添加到文档中，但这会将鼠标处理约束到容器元素：

controls = new THREE.TrackballControls( camera , container);

建议的答案对我不起作用，但这确实起作用。希望它能帮助别人

controls = new THREE.TrackballControls(camera, renderer.domElement);

我用的是r73，这似乎对我不起作用。我还有一个相关的问题需要解决：基本上，请确保这一行：

document.getElementById（“WebGL输出”）.appendChild（renderer.doElement）出现在此行之前：var trackballControls=new THREE.trackballControls（摄影机、渲染器.doElement）