javascript - Three.jsレンダラーがウィンドウ全体ではなくdivにある場合に正確なワールド座標を取得する方法

Question

私は three.js フレームワークを使用しており、画面の右 50% を占め、高さが 87.5% の div にレンダラーを持っています。次に、クリックされた場所に球を配置しようとしていますが、計算された座標は div 内で正確ではなく、球はマウスから離れたさまざまな位置に表示されます。この div 内の座標を正確に計算するにはどうすればよいですか? ありがとう、これがコードです

function onDocumentMouseMove( event ) {
    event.preventDefault();
    mouseX = (event.clientX / container.offsetWidth) * 2 - 1;
    mouseY = -(event.clientY / container.offsetHeight) * 2 - 1;
}

function onDocumentMouseDown(event){
    event.preventDefault()
    alert("X: " + mouseX + " Y: " + mouseY);
    var vector = new THREE.Vector3( mouseX, mouseY, 1 );
    var sphere = new THREE.Mesh(new THREE.SphereGeometry(size / 4), new THREE.MeshLambertMaterial(intensity));  
    sphere.position.x = vector.x;
    sphere.position.y = vector.y;
    sphere.position.z = vector.z;
    scene.add(sphere);
    spheres.push(sphere);
}