我们可以将元素拾取进行进一步封装。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拾取</title>
<script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>
<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<div id="webgl"></div>
</body>
</html>
<script>
var scene, camera, renderer;
init();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 100, 300);
camera.lookAt(new THREE.Vector3(0, 0, 0))//相机观看物体的位置
scene.add(camera);//添加相机
//添加坐标轴
var axes = new THREE.AxesHelper(500);//500表示xyz轴的长度，红:x,绿:y,蓝:z
scene.add(axes);
createBox(scene);
render();
animate();
}
function createBox(scene) {
//楼体
for (let i = 0; i < 10; i++) {
let box = new THREE.Mesh(
new THREE.BoxGeometry(10, 10, 10),
new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff })
);
box.name = `第${i}个`;
box.position.x = Math.random() * 100;
box.position.y = Math.random() * 50;
box.position.z = Math.random() * 200;
scene.add(box);
}
}
function render() {
renderer = new THREE.WebGLRenderer({
antialias: true,
});//画布
renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
});
//将渲染好的canvas追加到dom
var cont = document.getElementById('webgl');
cont.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
getXYZ(renderer, camera, scene);
}
function getXYZ(renderer, camera, scene) {
const raycaster = new THREE.Raycaster(); //光线投射，用于确定鼠标点击位置
const mouse = new THREE.Vector2(); //创建二维平面
window.addEventListener("mousedown", mousedown); //页面绑定鼠标点击事件
//点击方法
function mousedown(e) {
//将html坐标系转化为webgl坐标系，并确定鼠标点击位置
mouse.x = (e.clientX / renderer.domElement.clientWidth) * 2 - 1;
mouse.y = -((e.clientY / renderer.domElement.clientHeight) * 2) + 1;
//以camera为z坐标，确定所点击物体的3D空间位置
raycaster.setFromCamera(mouse, camera);
//确定所点击位置上的物体数量
const intersects = raycaster.intersectObjects(scene.children);
//选中后进行的操作
if (intersects.length) {
var selected = intersects[0]; //取第一个物体
console.log(selected);
console.log("x坐标:" + selected.point.x);
console.log("y坐标:" + selected.point.y);
console.log("z坐标:" + selected.point.z);
}
}
}
function animate() {
renderer.render(scene, camera);//开始渲染
requestAnimationFrame(animate);
}
</script>
网友评论