1

我正在使用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);
}
4

1 回答 1

1

好的，首先 - 你必须在你的 div 中正确设置你的相机：

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

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

问题是在 THREE.js 中，您处理容器的绝对中心以在 3D 空间中获取 (0,0) 坐标，但在 HTML 中 - 您的 (0,0) 位于屏幕的角落。因此，只需“移动” (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/

于 2013-08-04T12:32:45.443 回答