仅当鼠标在画布上时才允许鼠标控制 Three.js 场景 [英] Allow mouse control of three.js scene only when mouse is over canvas
问题描述
three.js 画布是一个包含其他内容的较大网页内的 500 x 500 正方形，我需要鼠标控制相机(用于围绕对象进行缩放和旋转)，只有当鼠标位于 500 x 内时才会发生500平方.
The three.js canvas is a 500 x 500 square inside a larger web page with other content and I need mouse control of the camera (for zooming and rotating around the object) to only happen when the mouse is inside the 500 x 500 square.
此外，我无法滚动网页，但当我们将鼠标事件侦听器隔离到 500 x 500 画布时，这可能会得到解决.
Also, I am unable to scroll the web page but maybe that will be fixed when we isolate the mouse event listener to the 500 x 500 canvas.
当前代码:
<!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>
推荐答案
大多数控件允许您指定将事件侦听器添加到哪个 DOM 节点.默认情况下，事件处理程序被添加到文档中，但这应该将鼠标处理限制为您的容器元素:
Most of the controls allow you to specify which DOM node the event listeners are added to. Event handlers are added to document by default, but this should constrain the mouse handling to your container element:
controls = new THREE.TrackballControls( camera , container);
这篇关于仅当鼠标在画布上时才允许鼠标控制 Three.js 场景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
