简短的答案是您必须考虑offset画布的材质。
长答案取决于代码的编写方式，因此我将给您两个答案，其中应涵盖基础知识。
有很多可能的组合，因此您可能必须进行试验。同样，不同的浏览器可能会采取不同的行动。
假设您的HTML是这样的：
#canvas {
width: 200px;
height: 200px;
margin: 100px;
padding: 0px;
position: static; /* fixed or static */
top: 100px;
left: 100px;
}
<body>
<div id="canvas">
</body>
您的JS是这样的：
var CANVAS_WIDTH = 200,
CANVAS_HEIGHT = 200;
var container = document.getElementById( 'canvas' );
document.body.appendChild( container );
renderer = new THREE.WebGLRenderer();
renderer.setSize( CANVAS_WIDTH, CANVAS_HEIGHT );
container.appendChild( renderer.domElement );
为使以下方法正常工作，请将画布位置设置为 static ；边距> 0和padding> 0都可以
mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.clientWidth ) * 2 - 1;
mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.clientHeight ) * 2 + 1;
对于此替代方法，将画布位置设置为 fixed ；置顶> 0，置左> 0; 填充必须为0；边距> 0可以
mouse.x = ( ( event.clientX - container.offsetLeft ) / container.clientWidth ) * 2 - 1;
mouse.y = - ( ( event.clientY - container.offsetTop ) / container.clientHeight ) * 2 + 1;
如果您想尝试，这里有一个小提琴：http ://jsfiddle.net/cn7ecoaa/
编辑：小提琴更新为three.js r.84
602392714
清零编程群