锐客网

  1. 首页 > it技术 > >

three|three点击物体

前端three

let group = new THREE.Group(); //点击 addEventListener('click', onMouseDblclick); //获取与射线相交的对象数组 function getIntersects(event) { event.preventDefault(); // 阻止默认的点击事件执行, https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault //console.log("event.clientX:" + event.clientX); //console.log("event.clientY:" + event.clientY); //声明 rayCaster 和 mouse 变量 let rayCaster = new THREE.Raycaster(); let mouse = new THREE.Vector2(); //通过鼠标点击位置，计算出raycaster所需点的位置，以屏幕为中心点，范围-1到1 //通过鼠标点击位置，计算出raycaster所需点的位置，以屏幕为中心点，范围-1到1 mouse.x = ((event.clientX - document.body.getBoundingClientRect().left) / document.body.offsetWidth) * 2 - 1; mouse.y = -((event.clientY - document.body.getBoundingClientRect().top) / document.body.offsetHeight) * 2 +1; //这里为什么是-号，没有就无法点中 //通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置 rayCaster.setFromCamera(mouse, camera); //获取与射线相交的对象数组， 其中的元素按照距离排序，越近的越靠前。 //+true，是对其后代进行查找，这个在这里必须加，因为模型是由很多部分组成的，后代非常多。 console.log(rayCaster) let intersects = rayCaster.intersectObjects(group.children, true); //返回选中的对象 return intersects; } function onMouseDblclick(event){ //获取raycaster和所有模型相交的数组，其中的元素按照距离排序，越近的越靠前 let intersects = getIntersects(event); // console.log(intersects); // console.log(intersects[0].object); //获取选中最近的Mesh对象 //instance坐标是对象，右边是类，判断对象是不是属于这个类的 if (intersects.length !== 0 && intersects[0].object.geometry.name === '大得') { for (var i = 0; i < intersects.length; i++) { if(intersects[i].object.geometry.name === '大得'){ intersects[i].object.material.color.set(0xff0000); //变为红色 } }} else { console.log('未选中 Mesh!'); } }obj(){ let mesh; var mtlLoader = new MTLLoader(); mtlLoader.load('/static/1519.mtl', function(materials) { materials.preload(); var objLoader = new OBJLoader(); objLoader.setMaterials(materials); objLoader.load('/static/1519.obj', function(object) { mesh = object; mesh.name = "大得" mesh.scale.set(2, 2, 2); mesh.position.set(0, 0, 0); group.add(mesh) // console.log(mesh) scene.add(group); }); }); },

【three|three点击物体】

    推荐阅读


    上一篇：three|three贴图地面，雾气，克隆，贴图，打印所有模型，模型光源

    下一篇：2022高频前端面试题合集|2022高频前端面试题——HTML篇