three.js之模型区域选中方法
今天从ui那边拿到一个城镇模型，样子长这样的
3d模型
要实现的效果是选择这个模型中的某个房子，实现交互。效果如下
交互效果
导入模型和可能遇到的问题
- 模型太大了在视图中调试半天也不出现。
可以对模型的大小进行了缩放，并且通过计算xyz的最远和最近的2点确定中心点，将模型放置在视图的中心位置。核心代码如下：
objLoader.load('./obj/house.obj', function (obj) { console.log(obj) obj.traverse(function (child) { if (child instanceof THREE.Mesh) { child.material = new THREE.MeshLambertMaterial({ color: 0x2397F6, side: THREE.DoubleSide }); } }); obj.scale.set(0.05, 0.05, 0.05) var box = new THREE.Box3(); box.expandByObject(obj); var x = (box.max.x + box.min.x) / 2; var y = (box.max.y + box.min.y) / 2; var z = (box.max.z + box.min.z) / 2; obj.position.set(0 - x, 0 - y, 0 - z); obj.castShadow = true; obj.receiveShadow = true; let wrapper = new THREE.Object3D(); //模型在场景中实际位置 var pt = { x: 0, y: 0, z: 0 }; wrapper.position.set(pt.x, pt.y, pt.z); wrapper.add(obj); scene.add(wrapper); render(); });点击事件
three.js通过射线检测我们所点击的对象。
这里我们需要将鼠标的x,y点转化为空间坐标。这里简单地讲下原理（不想看的也可以跳过，直接拷贝公式）。
原理
- 红色区域代表视图界面，
- 空间坐标区间设置为[-1,1]
- 左上角黑点是鼠标的原点（0，0），我们空间坐标的原点在视图中心（0，0）对应（window.innerWidth/2，window.innerHeight/2），现在鼠标点击的点（x,y）我们要转化成空间坐标（a，b）,对应的公式：
x = event.clientX // 鼠标点击的位置 x1=x-window.innerWidth/2; // (减去空间坐标原点) a=x1/(window.innerWidth/2) // (空间坐标在[-1，1]之间，window.innerWidth/2 代表长度1) // 化简后得到 a=(event.clientX / window.innerWidth) * 2 - 1分析图