将 3D 对象放置在画布的角落 - Three.js

Question

我有一个 3D 对象，我希望能够自动将其放置在画布的任一角，无论画布的大小如何。

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

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

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

结果是：

正如您所看到的，它只是对象的一部分，我希望将其放置在完整视图中，如下所示，但它需要在不同的画布尺寸上看起来一致（可能用于移动使用）：

我还附上了我的设置示例

我只需要一些关于如何实现这一目标的指示，因此我们将非常感谢任何帮助。

谢谢。

Answer 1

您可以THREE.Raycaster()使用THREE.Plane()：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.set(0, 5, 10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var box = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshLambertMaterial({
  color: "green"
}));
scene.add(box);

var plane = new THREE.Plane().setFromNormalAndCoplanarPoint(new THREE.Vector3(0, 0, 1), new THREE.Vector3(0, 0, 1));

btnMove.addEventListener("click", onClick, false);

var raycaster = new THREE.Raycaster();
var corner = new THREE.Vector2();
var cornerPoint = new THREE.Vector3();

function onClick() {
  corner.set(-1, -1); // NDC of the bottom-left corner
  raycaster.setFromCamera(corner, camera);
  raycaster.ray.intersectPlane(plane, cornerPoint);
  box.position.copy(cornerPoint)
    .add(new THREE.Vector3(1, 1, -1)); // align the position of the box
}

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

#btnMove {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<button id="btnMove">Move bottom-left</button>