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）位于屏幕的角落。所以只需“移动”（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/

Three.js当渲染器处于div而不是整个窗口时，如何获得准确的世界坐标

1 个答案: