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);
}

Answer 1

好吧，首先 - 你必须在 div 内正确设置相机:

camera = new THREE.PerspectiveCamera( 45, referenceToYourDiv.width / referenceToYourDiv.height, 1, 1000 );

然后，您所要做的就是计算相对于 div 位置的鼠标事件。

问题是，在 THREE.js 中，您处理容器的绝对中心以获得 3D 空间中的 (0,0) 坐标，但在 HTML 中 - 您的 (0,0) 位于屏幕的 Angular 落。因此，只需将 (0,0) 点“移动”到容器的中心即可开始!

如果您要全屏渲染，那么您的代码将是:

mouseX = event.clientX - windowHalfWidth;
mouseY = event.clientY - windowHalfHeight;

但是由于您处理的是自定义尺寸容器，请尝试以下操作:

mouseX = (event.clientX - (window.innerWidth*0.5))-(container.width*0.5);
mouseY = (event.clientY - (window.innerHeight*0.875))-(container.height*0.5);

对于窗口宽度 1920 和容器宽度 50% - 它将产生从 -480 到 +480 的鼠标值(相对于容器的宽度中心)。

对于窗口高度 1200 和容器高度 87.5% - 它将产生从 -525 到 +525 的鼠标值(相对于容器的高度中心)。

嗯，至少应该 - 我没有尝试这段代码，但这是你必须做的基本想法。

希望有帮助。

更新:以下是您想要实现的目标的示例:http://jsfiddle.net/PwWbT/