Three.js Raycaster scollt 页面偏移 [英] Three.js Raycaster is offset when scollt the page
问题描述
如果场景没有显示在整个页面上并且您可以滚动，则 Raycaster 将停止工作并被您滚动的内容抵消.
向下滚动到一边 20 个像素，点击对象下方 20 个像素，以便 Raycaster 正确识别对象.
如何解决我的问题?
非常感谢您的帮助
使用
var rect = renderer.domElement.getBoundingClientRect();mouse.x = ( ( event.clientX - rect.left )/( rect.width - rect.left ) ) * 2 - 1;mouse.y = - ( ( event.clientY - rect.top )/( rect.bottom - rect.top) ) * 2 + 1;会为你工作.这是一个演示，滚动到底部点击立方体.
<头><script src="http://threejs.org/build/three.min.js"></script><link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/><风格>身体 {字体系列:等宽；背景色:#fff;边距:0px；}#帆布 {背景色:#000；宽度:200px；高度:200px；边框:1px纯黑色；边距:10px；填充:0px；顶部:10px；左:100px；}.边界 {填充:10px；边距:10px；高度:3000px；溢出:滚动；}</风格><身体><div class="border"><div style="min-height:1000px;"></div><div class="border"><div id="画布"></div><脚本>//Three.js ray.intersects 与偏移画布var 容器、相机、场景、渲染器、网格、对象 = [],计数 = 0,CANVAS_WIDTH = 200,CANVAS_HEIGHT = 200;//信息info = document.createElement('div');info.style.position = '绝对';info.style.top = '30px';info.style.width = '100%';info.style.textAlign = 'center';info.style.color = '#f00';info.style.backgroundColor = '透明';info.style.zIndex = '1';info.style.fontFamily = '等宽';info.innerHTML = 'INTERSECT 计数:' + 计数；info.style.userSelect = "无";info.style.webkitUserSelect = "none";info.style.MozUserSelect = "无";document.body.appendChild( info );container = document.getElementById('canvas');renderer = new THREE.WebGLRenderer();renderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT );container.appendChild(renderer.domElement);场景 = 新的 THREE.Scene();相机 = 新 THREE.PerspectiveCamera( 45, CANVAS_WIDTH/CANVAS_HEIGHT, 1, 1000 );相机位置 y = 250;相机.位置.z = 500;相机.看(场景.位置)；场景添加(相机)；场景添加(新三环境光(0x222222))；var light = new THREE.PointLight(0xffffff, 1);相机.添加(光)；网格 = 新的 THREE.Mesh(new THREE.BoxGeometry( 200, 200, 200, 1, 1, 1 ),新三.MeshPhongMaterial({颜色:0x0080ff}) );场景添加(网格)；objects.push(mesh);//找到交叉点var raycaster = new THREE.Raycaster();var mouse = new THREE.Vector2();//鼠标监听器document.addEventListener('鼠标按下'，函数(事件){var rect = renderer.domElement.getBoundingClientRect();mouse.x = ( ( event.clientX - rect.left )/( rect.width - rect.left ) ) * 2 - 1;mouse.y = - ( ( event.clientY - rect.top )/( rect.bottom - rect.top) ) * 2 + 1;raycaster.setFromCamera(鼠标，相机)；相交 = raycaster.intersectObjects(objects);if ( intersects.length > 0 ) {info.innerHTML = 'INTERSECT 计数:' + ++count;}}， 错误的 );函数渲染(){网格.旋转.y += 0.01;renderer.render(场景，相机)；}(函数动画(){requestAnimationFrame( 动画 );使成为();})();</html>
if a scene does not show up all over the page and you can sroll , Raycaster stops working and is offset by what you have scrolled .
Srollt to the side by 20 pixels down , you have 20 pixels below the object click , so that the object Raycaster recognizes correctly .
How fix i the problem?
Would be very grateful for help
use the
var rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect.width - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
will works for you. here is a demo, scroll to the bottom to click the cube.
<!DOCTYPE html>
<html>
<head>
<script src="http://threejs.org/build/three.min.js"></script>
<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<style>
body {
font-family: Monospace;
background-color: #fff;
margin: 0px;
}
#canvas {
background-color: #000;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 10px;
padding: 0px;
top: 10px;
left: 100px;
}
.border {
padding:10px;
margin:10px;
height:3000px;
overflow:scroll;
}
</style>
</head>
<body>
<div class="border">
<div style="min-height:1000px;"></div>
<div class="border">
<div id="canvas"></div>
</div>
</div>
<script>
// Three.js ray.intersects with offset canvas
var container, camera, scene, renderer, mesh,
objects = [],
count = 0,
CANVAS_WIDTH = 200,
CANVAS_HEIGHT = 200;
// info
info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '30px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.style.color = '#f00';
info.style.backgroundColor = 'transparent';
info.style.zIndex = '1';
info.style.fontFamily = 'Monospace';
info.innerHTML = 'INTERSECT Count: ' + count;
info.style.userSelect = "none";
info.style.webkitUserSelect = "none";
info.style.MozUserSelect = "none";
document.body.appendChild( info );
container = document.getElementById( 'canvas' );
renderer = new THREE.WebGLRenderer();
renderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT );
container.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 1000 );
camera.position.y = 250;
camera.position.z = 500;
camera.lookAt( scene.position );
scene.add( camera );
scene.add( new THREE.AmbientLight( 0x222222 ) );
var light = new THREE.PointLight( 0xffffff, 1 );
camera.add( light );
mesh = new THREE.Mesh(
new THREE.BoxGeometry( 200, 200, 200, 1, 1, 1 ),
new THREE.MeshPhongMaterial( { color : 0x0080ff }
) );
scene.add( mesh );
objects.push( mesh );
// find intersections
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
// mouse listener
document.addEventListener( 'mousedown', function( event ) {
var rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect.width - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
intersects = raycaster.intersectObjects( objects );
if ( intersects.length > 0 ) {
info.innerHTML = 'INTERSECT Count: ' + ++count;
}
}, false );
function render() {
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
}
(function animate() {
requestAnimationFrame( animate );
render();
})();
</script>
</body>
</html>
这篇关于Three.js Raycaster scollt 页面偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
