three.js 加载STL模型补充遇到的问题

 

 旋转问题

three.js在开发的时候找到的指导文档提到的都是场景相机渲染初始化,相机控制器默认是轨道控制器OrbitControls。在使用中若想各个方向都可以用鼠标旋转只有水平方向能够无限旋转,垂直方向有俯仰角±90°的限制,找了很久才知道TrackballControls轨迹球控制器,可以实现水平垂直旋转,但是也存在缺点,若是模型加载上下左右前后视图的时候,左右前后没有影响,但是在移动到上和下视图时,控制器失效,无法正常翻转,文档有介绍这个缺点但是没有说明怎么解决。目前的方法就是两种控制器一起使用。上下视图的翻转存在明显的不流畅问题。

测量问题

在之前的模型加载中有个功能是测量模型距离,只实现了模型点与点的距离测量,两个点必须是在一个平面上,跨平面的话,生成的线会有部分展示不出来,采用的是点击的点与模型射线相交确定在这个点在平面上 

// 创建一个可点击的平面,用于接收点击事件
      var clickPlaneGeometry = new THREE.PlaneGeometry(10, 10);
      var clickPlaneMaterial = new THREE.MeshBasicMaterial({
        visible: false,
      });
      var clickPlane = new THREE.Mesh(clickPlaneGeometry, clickPlaneMaterial);
      scene.add(clickPlane);
      let mesObj = scene.children.filter((child) => child.type == "Mesh");
      var intersects = raycaster.intersectObjects(mesObj, true);
      intersects = intersects.concat(raycaster.intersectObject(clickPlane, true));

将代码的这部分进行调整,判断以点击的点生成的一个平面是否为准,这样的有点就是不会因为视角的关系看到点击的点在模型上了,换一个视角看却还有一段距离,避免这种现象的出现。 

 

你可能感兴趣的:(前端)