Javascript 将3d对象定位在画布的角落-three.js

我有一个3d对象，我希望它能够自动定位在画布的任意一个角落，而不管画布的大小。

我遇到了这个stackoverflow解决方案：

并将以下代码应用于我的对象：

mesh.position.set(-(window.innerWidth), (window.innerHeight), 0)

其结果是：

正如您所见，它只是对象的一部分，我希望将其放置在全视图中，如下图所示，但它需要在不同的画布大小上保持一致（可能用于移动用途）：

我还附上了我的设置示例

我只是需要一些关于如何实现这一点的建议，所以任何帮助都将不胜感激

---

谢谢。

您可以将

THREE.Raycaster（）

与

THREE.Plane（）

一起使用：

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（0,0,10）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var灯=新的三方向灯（0xffffff，0.5）；
光。位置。设置（0，5，10）；
场景。添加（灯光）；
添加（新的三个环境光（0xffffff，0.5））；
var box=新的THREE.Mesh（新的THREE.BoxGeometry（2，2，2），新的THREE.MeshLambertMaterial({
颜色：“绿色”
}));
场景。添加（框）；
var plane=new THREE.plane（）.setFromNormal和CoplanarPoint（new THREE.Vector3（0,0,1），new THREE.Vector3（0,0,1））；
btnMove.addEventListener（“单击”，onClick，false）；
var raycaster=new THREE.raycaster（）；
var corner=new THREE.Vector2（）；
var cornerPoint=new THREE.Vector3（）；
函数onClick（）{
set（-1，-1）；//左下角的NDC
raycaster.setFromCamera（角落，摄像头）；
raycaster.ray.intersectPlane（平面，角点）；
框。位置。复制（拐角点）
.add（新的三个.Vector3（1，1，-1））；//对齐框的位置
}
render（）；
函数render（）{
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}

正文{
溢出：隐藏；
保证金：0；
}
#btnMove{
位置：绝对位置；
}

左下移动

Hi@prisoner849，谢谢您的示例。我已经将您的代码应用到我自己的示例中，虽然它确实起作用，但您可以看到对象并不像您的对象那样在平面上完全对齐。我想知道您是否可以解释在任何情况下使其正确工作背后的数学原理，在我的示例中，我需要更改哪些数字才能使其正常工作。@Philly您的长方体的尺寸为200x200x200，因此，平面的共面点为[0，0，100]（z是立方体正面的坐标），然后，对齐的附加向量将是[100100，-100]（这意味着将立方体的左前底点设置为光线和平面之间的交点），因此我将您所说的翻译为：我将平面值更改为this

var plane=new THREE.plane（）.setFromNormal和CoplanarPoint（new THREE.Vector3（0，0，100），新的三个.Vector3（0，0，100））；

然后将

onClick

函数中mesh.position.copy的值更改为

mesh.position.copy（cornerPoint）。添加（新的三个.Vector3（100，100，-100））；

这似乎有效

.setfromNormal和共面点（新的三个.Vector3（0，0，100），新的三个.Vector3（0，100））

应类似于

.setFromNormal和CoplanarPoint（新的三个.Vector3（0，0，1），新的三个.Vector3（0，0，100））

因为第一个参数是法线，其长度必须等于1。如果答案解决了您的问题，请将其标记为已接受。