[英]Positioning a 3d object in the corners of the canvas - three.js
您可以将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.