简短的答案是您必须考虑
offset画布的材质。
长答案取决于代码的编写方式，因此我将给您两个答案，其中应涵盖基础知识。
有很多可能的组合，因此您可能必须进行试验。同样，不同的浏览器可能会采取不同的行动。
假设您的HTML是这样的：
#canvas { width: 200px; height: 200px; margin: 100px; padding: 0px; position: 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 );
方法1 为使以下方法正常工作，请将画布位置设置为 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;
方法2 对于此替代方法，将画布位置设置为 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;
编辑：小提琴更新为three.js r.84
